Search completed in 1.00 seconds.
DocumentOrShadowRoot.activeElement - Web APIs
if so, you can get more detail by using the object's selectionstart and selectionend properties. other times the focused element might be a <select> element (menu) or an <input> element, of type "button", "checkbox", or "radio". typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate one (that is, to press a button or toggle a radio button). ...
... the browser's current configuration. for example, on macos systems, elements that aren't text input elements are not typically focusable by default. note: focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). you can get the current selection using window.getselection(). syntax element = documentorshadowroot.
activeelement value the element which currently has focus, <body> or null if there is no focused element. example html <p>select some text from one of the text areas below:</p> <form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is text area one. lorem ipsum dolor sit amet, consectetur adipiscing elit. donec tincidunt, lorem a porttitor molestie, odio nibh iaculis ...
...et, consectetur adipiscing elit. donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.</textarea> <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">this is text area two. fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. ...
...And 7 more matches
:active - CSS: Cascading Style Sheets
the :
active css pseudo-class represents an element (such as a button) that is being activated by the user. when using a mouse, "activation" typically starts when the user presses down the primary mouse button. /* selects any <a> that is being activated */ a:
active { color: red; } the :
active pseudo-class is commonly used on <a> and <button> elements. other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>. styles defined by the :
active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. ...
...utton> elements. other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated <label>. styles defined by the :
active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :
active rule after all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :
active. ...
... styles defined by the :
active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :
active rule after all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :
active. note: on systems with multi-button mice, css3 specifies that the :
active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button. 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 lin...
...And 6 more matches
ActiveXObject - Archive of obsolete content
typename the type or class of the object to create. location optional the name of the network server where the object is to be created. remarks automation servers provide at least one type of object. ...
... typename the type or class of the object to create. location optional the name of the network server where the object is to be created. remarks automation servers provide at least one type of object. ...
...n object, a document object, and a toolbar object. you may be able to identify servername.typename values on a host pc in the hkey_classes_root registry key. ...
...And 5 more matches
PerformanceNavigationTiming.domInteractive - Web APIs
example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
... example the following example illustrates this property's usage. ...
...And 3 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.get
activeuniform() method of the webgl api returns a webgl
activeinfo object containing size, type, and name of a uniform attribute. it is generally used when querying unknown uniforms either for debugging or generic library creation. syntax webgl
activeinfo webglrenderingcontext.get
activeuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information. index a gluint specifying the index of the uniform attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.
active_uniforms). return value a webgl
activeinfo object describing the uniform. the type attribute of the return value will be one of the following: gl.float gl.float_v...
...webgl generates one or more entries in the list depending on the declared type of the uniform in the shader: single basic type: one entry with the name of the uniform. e.g. uniform vec4 a; will result in a. array of basic type: one entry with the name of the uniform suffixed with [0]. e.g. unifor...
...dow gl.sampler_cube_shadow gl.int_sampler_2d gl.int_sampler_3d gl.int_sampler_cube gl.int_sampler_2d_array gl.unsigned_int_sampler_2d gl.unsigned_int_sampler_3d gl.unsigned_int_sampler_cube gl.unsigned_int_sampler_2d_array when gl.linkprogram is called, webgl creates a list of
active uniforms. these are possible values of the name attribute of return values of get
activeuniform. webgl generates one or more entries in the list depending on the declared type of the uniform in the shader: single basic type: one entry with the name of the uniform. e.g. uniform vec4 a; will result in a. array of basic type: one entry with the name of the uniform suffixed with [0]. e.g. uniform vec4 b[]; will result in b[0]. struct type: one entry for each member of the struct. ...
...And 3 more matches
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
these metrics have been proposed by the web incubator community group and are already being used in various tools. ...
...these metrics have been proposed by the web incubator community group and are already being used in various tools. ...
...these metrics have been proposed by the web incubator community group and are already being used in various tools. ...
...And 2 more matches
WebGLActiveInfo - Web APIs
the webgl
activeinfo interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.get
activeattrib() and webglrenderingcontext.get
activeuniform() methods. properties webgl
activeinfo.name the read-only name of the requested variable. webgl
activeinfo.size the read-only size of the requested variable. webgl
activeinfo.type the read-only type of the requested variable. ...
... webgl api and represents the information returned by calling the webglrenderingcontext.get
activeattrib() and webglrenderingcontext.get
activeuniform() methods. properties webgl
activeinfo.name the read-only name of the requested variable. webgl
activeinfo.size the read-only size of the requested variable. webgl
activeinfo.type the read-only type of the requested variable. ...
...the webglrenderingcontext.get
activeattrib() and webglrenderingcontext.get
activeuniform() methods. properties webgl
activeinfo.name the read-only name of the requested variable. webgl
activeinfo.size the read-only size of the requested variable. webgl
activeinfo.type the read-only type of the requested variable. ...
...And 2 more matches
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
editor's draft initial definition for webgl. ...
... editor's draft initial definition for webgl. ...
... editor's draft initial definition for webgl. ...
...method of the webgl 2 api retrieves the name of the
active uniform block at a given index within a webglprogram. syntax domstring gl.get
activeuniformblockname(program, uniformblockindex); parameters program a webglprogram containing the uniform block. uniformblockindex a gluint specifying the index of the uniform block to whose name to retrieve. return value a domstring indicating the
active uniform block name. examples var blockname = gl.get
activeuniformblockname(program, 0); specifications specification status comment webgl 2.0the definition of 'get
activeuniformblockname' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glget
activeuniformblockname' in that specification. standard man...
WebGLRenderingContext.activeTexture() - Web APIs
the webglrenderingcontext.
activetexture() method of the webgl api specifies which texture unit to make
active. syntax void gl.
activetexture(texture); parameters texture the texture unit to make
active. the value is a gl.texturei where i is within the range from 0 to gl.max_combined_texture_image_units - 1. return value none. exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. examples the following call selects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. ...
... the range from 0 to gl.max_combined_texture_image_units - 1. return value none. exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. examples the following call selects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. ...
...lects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. gl.
activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant. it is, per specification, at least 8. gl.getparameter(gl.max_combined_texture_image_units); to get the
active texture, query the
active_texture constant. ...
...lls that modify the texture state will affect this texture. gl.
activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the max_combined_texture_image_units constant. it is, per specification, at least 8. gl.getparameter(gl.max_combined_texture_image_units); to get the
active texture, query the
active_texture constant. gl.
activetexture(gl.texture0); gl.getparameter(gl.
active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the definition of '
activetexture' in that specification. recommendation initial definition. opengl es 2.0the definition of 'gl
activetexture' in that specification. standard man page of the ...
InstallEvent.activeWorker - Web APIs
the
activeworker read-only property of the installevent interface returns the serviceworker that is currently
actively controlling the page. this will return null if no
active worker is already controlling the page. syntax var my
activeworker = event.
activeworker value a serviceworker object. ...
... the
activeworker read-only property of the installevent interface returns the serviceworker that is currently
actively controlling the page. this will return null if no
active worker is already controlling the page. syntax var my
activeworker = event.
activeworker value a serviceworker object. ...
... the
activeworker read-only property of the installevent interface returns the serviceworker that is currently
actively controlling the page. this will return null if no
active worker is already controlling the page. syntax var my
activeworker = event.
activeworker value a serviceworker object. ...
PerformanceTiming.domInteractive - Web APIs
this property can be used to measure the speed of loading web sites that users feels. ...
... this property can be used to measure the speed of loading web sites that users feels. ...
...s property can be used to measure the speed of loading web sites that users feels. nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts. check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading. syntax time = performancetiming.dominter
active; specifications specification status comment navigation timingthe definition of 'performancetiming.dominter
active' in that specification. recommendation initial definition. ...
ServiceWorkerRegistration.active - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
...returns a service worker whose serviceworker.state is activated. this property is initially set to null. an
active worker controls a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) note: this feature is available in web workers. syntax var serviceworker = serviceworkerregistration.
active; value a serviceworker object's property, if it is currently in an activated state. specifications specification status comment service workersthe definition of 'serviceworkerregistration.
active' in that specification. working draft initial definition. ...
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.get
activeuniformblockparameter() method of the webgl 2 api retrieves information about an
active uniform block within a webglprogram. syntax any gl.get
activeuniformblockparameter(program, uniformblockindex, pname); parameters program a webglprogram containing the
active uniform block. uniformblockindex a gluint specifying the index of the
active uniform block within the program. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_size: returns a gluint indicating the minimum total buffer object size. gl.uniform_block_
active_uniforms: returns a gluint indicating the number of
active uniforms in the uniform block. ...
...am. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_size: returns a gluint indicating the minimum total buffer object size. gl.uniform_block_
active_uniforms: returns a gluint indicating the number of
active uniforms in the uniform block. gl.uniform_block_
active_uniform_indices: returns a uint32array indicating the list of
active uniforms in the uniform block. gl.uniform_block_referenced_by_vertex_shader: returns a glboolean indicating whether the uniform block is referenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return ...
...: returns a glboolean indicating whether the uniform block is referenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return value depends on which information is requested using the pname parameter. if an error occurs, null is returned. examples var blocksize = gl.get
activeuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment webgl 2.0the definition of 'get
activeuniformblockparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glget
activeuniformblockiv' in that specification. standard...
WebGL2RenderingContext.getActiveUniforms() - Web APIs
pname a glenum specifying which information to query. possible values: gl.uniform_type: returns an array of glenum indicating the types of the uniforms. gl.uniform_size: returns an array of gluint indicating the sizes of the uniforms. gl.uniform_block_index: returns an array of glint indicating the block indices of the uniforms. ...
... pname a glenum specifying which information to query. possible values: gl.uniform_type: returns an array of glenum indicating the types of the uniforms. gl.uniform_size: returns an array of gluint indicating the sizes of the uniforms. gl.uniform_block_index: returns an array of glint indicating the block indices of the uniforms. ...
...en columns of a column-major matrix or a row-major matrix. gl.uniform_is_row_major: returns an array of glboolean indicating whether each of the uniforms is a row-major matrix or not. return value depends on which information is requested using the pname parameter. examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); var uniformoffsets = gl.get
activeuniforms(program, uniformindices, gl.uniform_offset); specifications specification status comment webgl 2.0the definition of 'get
activeuniforms' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glget
activeuniformsiv' in that specification. standard man page of the (similar) opengl api. ...
WebGLRenderingContext.getActiveAttrib() - Web APIs
the webglrenderingcontext.get
activeattrib() method of the webgl api returns a webgl
activeinfo object containing size, type, and name of a vertex attribute. it is generally used when querying unknown attributes either for debugging or generic library creation. syntax webgl
activeinfo gl.get
activeattrib(program,index); parameters program a webglprogram containing the vertex attribute. index a gluint specifying the index of the vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.
active_attributes). return value a webgl
activeinfo object. ...
... recommendation initial definition. ...
...ogram containing the vertex attribute. index a gluint specifying the index of the vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.
active_attributes). return value a webgl
activeinfo object. examples const numattribs = gl.getprogramparameter(program, gl.
active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.get
activeattrib(program, i); console.log('name:', info.name, 'type:', info.type, 'size:', info.size); } specifications specification status comment webgl 1.0the definition of 'get
activeattrib' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glget
activeattrib' in that specification. standard man page of the opengl ap...
Using the aria-activedescendant attribute - Accessibility
this article describes the aria-
activedescendant property. description the aria-
activedescendant attribute contains the id of the currently
active child object that is part of a composite widget within the document object model. it makes do with the overhead of having all or more than one child focusable. as the name specifies, it helps in managing the current
active child of the composite widget. possible effects on user agents and assistive technology the user agent, which is any software that retrieves, renders and facilitates end user interaction with web content, uses the aria-
activedescendant property to inform the assistive technology about the
active child which has focus. ...
... note: opinions may differ on how assistive technology should handle this technique. the information provided below is one of those opinions and therefore not normative. ...
... note: opinions may differ on how assistive technology should handle this technique. the information provided below is one of those opinions and therefore not normative. ...
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
introduction microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond. if you are a plug-in author, you may find this project saves you a lot of work! this page describes a control that implements the np api and hosts most netscape-compatible plug-ins. now you can use your plug-ins in any recent version of ie or in any other
activex container for that matter. the control itself is implemented in a dll called pluginhostctrl.dll which is standalone from the rest of the mozilla project. if you're wondering how microsoft used to support the np api, look for a file called plugin.ocx in your windows system directory. this 100k
activex control contains the entire np api implementation and probably worked much like pluginhostctrl.dll does now. the sections below tell you h...
...to fetch, build and use the pluginhostctrl.dll . get the source you need cvs to get the source code. assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/browser/
activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\browser\
activex\src\pluginhostctrl. you can also see the code online. build it it is quite simple to build the control locate the pluginhostctrl directory: open pluginhostctrl.dsp build "win32 debug" or another target open some of the test files under pluginhostctrl\tests in internet explorer to verify the c...
activetitlebarcolor - Archive of obsolete content
moreover this hides separator between titlebar and window contents. this only affects mac os x. ...
...moreover this hides separator between titlebar and window contents. this only affects mac os x. ...
MediaSource.activeSourceBuffers - Web APIs
the
activesourcebuffers read-only property of the mediasource interface returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks. syntax var my
activesourcebuffers = mediasource.
activesourcebuffers; value a sourcebufferlist containing the sourcebuffer objects for each of the
active tracks. example the following snippet is based on a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, fu...
...iers (view the full demo live, or download the source for further investigation.) function sourceopen (_) { //console.log(this.readystate); // open var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); console.log(mediasource.
activesourcebuffers); // will contain the source buffer that was added above, // as it is selected for playing in the video player video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; ... specifications specification status comment media source extensionsthe definition of '
activesourcebuffers...
active - Web APIs
the
active read-only property of the mediastream interface returns a boolean value which is true if the stream is currently
active; otherwise, it returns false. a stream is considered
active if at least one of its mediastreamtracks is not in the mediastreamtrack.ended state. once every track has ended, the stream's
active property becomes false. syntax var is
active = mediastream.
active; value a boolean value which is true if the stream is currently
active; otherwise, the value is false. example in this example, a new stream whose source is the user's local camera and microphone is requested using getusermedia(). when that stream becomes available (that is, when the returned promise is fulfilled, a button on the page is updated based on whether or not the stream is currently
active. var p...
...ed using getusermedia(). when that stream becomes available (that is, when the returned promise is fulfilled, a button on the page is updated based on whether or not the stream is currently
active. var promise = navigator.mediadevices.getusermedia({ audio: true, video: true }); promise.then(function(stream) { var startbtn = document.queryselector('#startbtn'); startbtn.disabled = stream.
active; };) specifications specification status comment media capture and streamsthe definition of '
active' in that specification. candidate recommendation initial definition. ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
well as for hackers wishing to be involved in mozilla's msaa support specifically. if you're implementing controls/widgets, you should also see the accessible toolkit checklist. if you're interested in more about gecko's msaa implementation, read gecko info for windows accessibility vendors to learn how msaa clients can utilize gecko's msaa support. intro: what is msaa? msaa is the microsoft
active accessibility (msaa) api, used on windows operating systems to support assistive technologies for users with disabilities. third party assistive technology, such as screen readers, screen magnifiers and voice input software, want to track what's happening inside mozilla. they need to know about focus changes and other events, and it needs to know what objects are contained in the current documen...
...ppearance that the listbox is no longer focused -- a lighter color for unfocused lists will also make the listbox state more visually obvious and thus more usable for everyone. for popup listboxes used for dropdowns in autocomplete text fields, change the color value by 1 when the user is typing in the textfield as opposed to arrowing through the list. the listbox will still visually appear to be
active, but the screen reader behavior is improved by not echoing too much spoken information for each keypress. one downside to this solution is that means that you cannot use "client data" for the list items, because windows won't allow owner drawn list items to use client data. event window handle is incorrect problem: the screen reader or other assistive technology does not track the focus or othe...
:-moz-window-inactive - CSS: Cascading Style Sheets
the :-moz-window-in
active css pseudo-class is a mozilla extension that matches any element while it's in an in
active window. :-moz-window-in
active works in content html documents, too. 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. this attribute is no longer used. syntax :-moz-window-in
active examples this example alters the appearance of a box's background depending on whether its window is
active or not. ...
... the top-level xul chrome window. this attribute is no longer used. syntax :-moz-window-in
active 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-in
active { background: cyan; } result the result of this code is shown below. you can view this as a separate page as well. specifications not part of any standard. ...
menuactive - Archive of obsolete content
« xul reference home menu
active type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitem
active event will be sent to the item when the item is hovered over, and a dommenuitemin
active event will be sent to the item when the selection moves away. ...
DOMMenuItemActive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
DOMMenuItemInactive - Archive of obsolete content
general info specification xul interface event bubbles yes cancelable yes target element default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
tti, proposed by the web incubator community group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered. caveat: tti is derived by leveraging information from the long tasks api. ...
HTMLIFrameElement.getActive()
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the get
active() method of the htmliframeelement indicates whether the current browser <iframe> is the currently
active frame. syntax var ami
active = instanceofhtmliframeelement.get
active(); returns a boolean indicating whether the current browser <iframe> is the currently
active frame (true) or not (false.) parameters none. example var browser = document.queryselector('iframe'); var ami
active = browser.get
active(); specification not part of any specification. ...
HTMLIFrameElement.setActive()
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the set
active() method of the htmliframeelement sets the current <iframe> as the
active frame, which has an effect on how it is prioritized by the process manager. syntax instanceofhtmliframeelement.set
active(boolean); returns void. parameters boolean a boolean that indicates whether the iframe is to be the
active frame (true) or not (false). example var browser = document.queryselector('iframe'); browser.set
active(); specification not part of any specification. ...
LockedFile.active - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the
active property allows to know if the lockedfile object is still usable (true) or not (false). if the object is in
active then it is impossible to perform any read or write operation with it. typically, a lockedfile object becomes in
active when the lockedfile.abort() method is called or if an error occurs. syntax var state = instanceoflockedfile.
active value a boolean. specifications specification status comment filesystem api editor's draft draft proposal. ...
WebGLActiveInfo.name - Web APIs
the read-only webgl
activeinfo.name property represents the name of the requested data returned by calling the get
activeattrib() or get
activeuniform() methods. examples var
activeattrib = gl.get
activeattrib(program, index);
activeattrib.name; var
activeuniform = gl.get
activeuniform(program, index);
activeuniform.name; specifications specification status comment webgl 1.0the definition of 'webgl
activeinfo.name' in that specification. recommendation initial definition. ...
WebGLActiveInfo.size - Web APIs
the read-only webgl
activeinfo.size property is a number representing the size of the requested data returned by calling the get
activeattrib() or get
activeuniform() methods. examples var
activeattrib = gl.get
activeattrib(program, index);
activeattrib.size; var
activeuniform = gl.get
activeuniform(program, index);
activeuniform.size; specifications specification status comment webgl 1.0the definition of 'webgl
activeinfo.size' in that specification. recommendation initial definition. ...
WebGLActiveInfo.type - Web APIs
the read-only webgl
activeinfo.type property represents the type of the requested data returned by calling the get
activeattrib() or get
activeuniform() methods. examples var
activeattrib = gl.get
activeattrib(program, index);
activeattrib.type; var
activeuniform = gl.get
activeuniform(program, index);
activeuniform.type; specifications specification status comment webgl 1.0the definition of 'webgl
activeinfo.type' in that specification. recommendation initial definition. ...
Index - Web APIs
bute, experimental, property, reference, timelinetime, waapi, web animations api the timelinetime read-only property of the animationplaybackevent interface represents the time value of the animation's timeline at the moment the event is queued. this will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was in
active. 96 animationtimeline api, animation, animationtimeline, experimental, interface, reference, web animations, waapi, web animations api the animationtimeline interface of the web animations api represents the timeline of an animation. this interface exists to define timeline features (inherited by documenttimeline and future timeline types) and is not itself directly used by d...
... or any other timeline type instead. 97 animationtimeline.currenttime api, animation, animationtimeline, experimental, property, read-only, reference, web animations, currenttime, waapi, web animations api the currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is in
active. 98 arraybufferview api, interface, javascript, reference, typed arrays arraybufferview is a helper type representing any of the following javascript typedarray types: 99 attr api, dom the attr interface represents one of a dom element's attributes as an object. in most dom methods, you will directly retrieve the attribute as a string (e.g., element.getat...
...attservice this characteristic belongs to. ...
...And 85 more matches
Windows Media in Netscape - Archive of obsolete content
this article deals uniquely with netscape 7.1 running on the windows operating system. ...
...this article deals uniquely with netscape 7.1 running on the windows operating system. ...
... ability to load the microsoft® windows media player™ as an
activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer. netscape 7.1 will work with both the windows media player 6.4
activex control as well as versions 7 through 9. this article explains how to embed the windows media player
activex control in web pages to support netscape 7.1, how to control the windows media player
activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. ...
...And 46 more matches
Box-shadow generator - CSS: Cascading Style Sheets
gin: 5px 0; padding: 5px; text-align: center; background-color: #eee; border: 1px solid #ddd; font-size: 0.75em; line-height: 1.5em; color: #333; border-radius: 3px; position: relative; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #layer_manager .node:hover { color: #fff; background-color: #3380c4; cursor: pointer; } /*
active element styling */ #layer_manager [data-
active='layer'] { color: #fff; border: none; background-color: #379b4a; } #layer_manager [data-
active='subject'] { color: #fff; background-color: #467fc9; } /* delete button */ #layer_manager .delete { width: 1.5em; height: 100%; float: right; border-radius: 3px; background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png")...
...: 3px; background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; right: 5px; display: none; } #layer_menu .delete:hover { background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); } #layer_menu .button:hover .delete { display: block; } /* *
active element styling */ #layer_menu [data-
active='subject'] { color: #fff; background-color: #379b4a; border: 1px solid #379b4a; } /* checkbox */ #layer_menu .ui-checkbox > label { height: 15px; line-height: 17px; font-weight: normal; width: 46px; margin: 0 5px 0 0; } #layer_menu .ui-checkbox > input:checked + label { display: none; } /*************************************************...
...px; position: absolute; top: 2px; } #output .button { width: 90px; height: 22px; margin: 0 5px 0 0; text-align: center; line-height: 20px; font-size: 14px; color: #fff; background-color: #999; border-top-left-radius: 3px; border-top-right-radius: 3px; bottom: -5px; float:left; } #output .button:hover { color: #fff; background-color: #666; cursor: pointer; } #output .menu [data-
active="true"] { color: #777; background-color: #fff; border: 1px solid #ccc; border-bottom: none; } #output .menu [data-topic="before"] { left: 100px; } #output .menu [data-topic="after"] { left: 200px; } #output .output { width: 480px; margin: 10px; padding: 10px; overflow: hidden; color: #555; font-size: 14px; border: 1px dashed #ccc; border-radius: 3px; display: none; -moz-box-si...
...And 32 more matches
Theme changes in Firefox 2 - Archive of obsolete content
abs" drop-down menu when there are enough tabs to activate tab bar scrolling. global/browser.css revised to support new styles for the main browser window. global/globalbindings.xml updated to support changes to the tab bar, including per-tab close buttons. global/icons/alltabs.png not actually used; left over from earlier drafts of the theme. global/in
activetab-left.png removed file. global/in
activetab-right.png removed file. global/menu.css updated to include new styles. global/notification.css new file; defines styles used by the notification strip that appears at the top of browser windows to present notices such as "a popup was blocked." global/scrollbox/autorepeat-arrow-dn-dis.gif new file; icon...
...a new file in firefox 2, and should contain the same css code as you added to addbookmark.css. this file styles bookmarksproperties.xul. note: this css may be moved out into a separate file that will be referenced by both files in the future. ...
... 2, and should contain the same css code as you added to addbookmark.css. this file styles bookmarksproperties.xul. note: this css may be moved out into a separate file that will be referenced by both files in the future. ...
...And 25 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title">
active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title">
active axis </div> ...
...d; position: relative; } #gradient-container[data-alpha="true"]:after { content: ""; width: 100%; height: 100%; background: url('images/canvas-pattern.png'); position: absolute; z-index: -1; } /** * gradient axis */ .gradient-axis { width: 125%; height: 4px; margin: -3px 0 0 0; border: 1px solid #ccc; position: absolute; top: 50%; left: 0; opacity: 0.5; } .gradient-axis[data-
active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute; left: 0; top: 0; } .gradient-axis .gradient-line { width: 80%; height: 100%; margin: 0px auto; position: relative; } .gradient-axis .gradient-line:hover { cursor: pointer; } .gradient-axis .gradient-line:after, .gradient-axis .gradient-li...
...; top: -7px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; z-index: 1; } .gradient-axis .gradient-point:after { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; border: 1px solid #999; position: absolute; top: 4px; left: 4px; } .gradient-axis .gradient-point:hover:after, .gradient-axis .gradient-point[data-
active="true"]:after { background-color: #ccc; } .gradient-axis .rotate-point { width: 25px; height: 25px; position: absolute; top: -10.5px; right: -12px; } .gradient-axis[axisid='0']:after { background-color: #da5c5c; } .gradient-axis[axisid='1']:after { background-color: #5cda9b; } .gradient-axis[axisid='2']:after { background-color: #5c9bda; } .gradient-axis[axisid='3']:after { backgro...
...And 25 more matches
Color picker tool - CSS: Cascading Style Sheets
0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #picker-samples .sample[data-
active='true'] { border-color: #999; } #picker-samples .sample[data-
active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; width: 100%; height: 12px; top: -12px; z-index: 2; } #picker-samples #add-icon { width: 100%; height: 100%; position: relative; box-shadow: inset 0px 0px 2px 0px #ddd; } #picker-sa...
...; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-
active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #ccc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switc...
... { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #ccc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switch [data-
active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * trash can */ #delete { width: 100%; height: 94px; background-color: #ddd; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-repeat: repeat; text-align: center; color: #777; position: relative; float: right; } #d...
...And 15 more matches
Index - Archive of obsolete content
yout. the new design clearly shows what some experts have been saying: that standards-based design can be visually compelling and preserve the interface conventions we've come to expect from web pages. 356 archived mozilla and build documentation these articles are archived, obsolete documents about mozilla, gecko, and the process of building mozilla projects. 357
activex control for hosting netscape plug-ins in ie add-ons, needsclassification, plugins microsoft has removed support for netscape plug-ins from ie 5.5 sp 2 and beyond. if you are a plug-in author, you may find this project saves you a lot of work! 358 archived spidermonkey docs archive this section contains old spidermonkey documentation. 359 file object ...
... tool. searches, lookups, package tracking, and even word definitions can all be retrieved from user-customized bookmarks. 379 build this page was auto-generated because a user created a sub-page to this page. 380 building transformiix standalone needshelp, needsrewrite, xslt no summary! 381 chromeless update [this project may not be
active — check github https://github.com/mozilla/chromeless] 382 compiling the npruntime sample plugin in visual studio add-ons, plugins no summary! 383 creating a firefox sidebar extension add-ons, extensions, firefox, obsolete this article describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on cre...
...rs use them to identify the pages that the generators know how to summarize by matching patterns in those pages' urls. 414 dtrace archive, dtrace, performance, profiling, qa, testing dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when
active. probe data can be collected with scripts written in d (no, not that one). mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.5. 415 dehydra dehydra the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc. try dxr instead, or else try the gcc python plugin: https...
...And 14 more matches
Routing in Ember - Learn web development
prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. ...
...presented by the url so that if (for any reason), the page needs to refresh, the user isn't surprised by the state of the web app — they can link directly to significant views of the app. at the moment, we already have the "all" page, as we are currently not doing any filtering in the page that we've been working with, but we will need to reorganize it a bit to handle a different view for the "
active" and "completed" todos. an ember application has a default "application" route, which is tied to the app/templates/application.hbs template. because that application template is the entry point to our todo app, we'll need to make some changes to allow for routing. creating the routes let's start by creating three new routes: "index", "
active" and "completed". to do this you’ll need to enter ...
...ation template is the entry point to our todo app, we'll need to make some changes to allow for routing. creating the routes let's start by creating three new routes: "index", "
active" and "completed". to do this you’ll need to enter the following commands into your terminal, inside the root directory of your app: ember generate route index ember generate route completed ember generate route
active the second and third commands should have not only generated new files, but also updated an existing file, app/router.js. it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.locationtype; rooturl = config.rooturl; } router.map(function() { this.
...And 13 more matches
tabs - Archive of obsolete content
open, manipulate, and access tabs, and receive tab events. usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made
active or in
active: var tabs = require("sdk/tabs"); // listen for tab openings. tabs.on('open', function onopen(tab) { myopentabs.push(tab); }); // listen for tab content loads. tabs.on('ready', function(tab) { console.log('tab is loaded', tab.title, tab.url); }); access tabs the module itself can be used as a list of all opened tabs across all windows. in particular, you can enumerate it: var tabs = require('sdk/tabs'); for (let tab of tabs)...
...t of all opened tabs across all windows. ...
...re('sdk/tabs'); for (let tab of tabs) console.log(tab.title); you can also access individual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + 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", lo...
...And 12 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
issues the object element is part of the html 4.01 specification, and is the recommended mechanism to invoke plugins. its use is subject to a few caveats that this section outlines. traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based browsers such as netscape 7. in ie, the object element is used to invoke a plugin that is built on the
activex architecture. here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="...
...in this context, the codebase attribut...
...id:" urn followed by the unique identifier of an
activex control (in the above example, the string beginning with "d27..."). this is, in fact, the unique identifier of macromedia's flash plugin, and developers are expected to know such unique identifiers in order to invoke the component of their choice. the codebase attribute used above points to a location that houses the cab file containing the
activex control. in this context, the codebase attribute is used as an obtainment mechanism -- that is to say, a way to obtain a control if it isn't present. if the flash
activex control is not installed, ie will then go to the url referenced by the codebase attribute and retrieve the
activex control. additional param elements (which are "children" of the above object element) specify configuration para...
...And 12 more matches
How to build custom form controls - Learn web development
nt to clearly define all the states of your control. to do this, it's good to start with an existing control whose states and behavior are well known, so that you can simply mimic those as much as possible. in our example, we will rebuild the <select> element. here is the result we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the
active state (in the middle) and the open state (on the right). in terms of behavior, we are recreating a native html element. therefore it should have the same behaviors and semantics as the native html element. we require our control to be usable with a mouse as well as with a keyboard, and comprehensible to a screen reader, just like any native control. let's start by defining how the control reache...
... a native html element. therefore it should have the same behaviors and semantics as the native html element. we require our control to be usable with a mouse as well as with a keyboard, and comprehensible to a screen reader, just like any native control. let's start by defining how the control reaches each state: the control is in its normal state when: the page loads. the control was
active and the user clicks anywhere outside it. the control was
active and the user moves the focus to another control using the keyboard (e.g. the tab key). the control is in its
active state when: the user clicks on it or touches it on a touch screen. the user hits the tab key and it gains focus. the control was in its open state and the user clicks on it. the control is in its o...
...on it. the control is in its open state when: the control is in any other state than open and the user clicks on it. once we know how to change states, it is important to define how to change the control's value: the value changes when: the user clicks on an option when the control is in the open state. the user hits the up or down arrow keys when the control is in its
active state. the value does not change when: the user hits the up arrow key when the first option is selected. the user hits the down arrow key when the last option is selected. finally, let's define how the control's options will behave: when the control is opened, the selected option is highlighted when the mouse is over an option, the option is highlighted and the previously h...
...And 12 more matches
Border-image generator - CSS: Cascading Style Sheets
ff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); position: absolute; } #subject .guideline:hover { background-color: #f00; } #subject .guideline[data-
active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 100%; height: 1px; left: -1px; } #subject .guideline[data-axis='x']:hover { cursor: w-resize; } #subject .guideline[data-axis='y']:hover { cursor: s-resize; } #subject .relative { position: relative; font-size: 12px; } ...
... #subject .relative { position: relative; font-size: 12px; } #subject .tooltip, #subject .tooltip2 { width: 40px; height: 20px; line-height: 20px; font-size: 12px; text-align: center; position: absolute; opacity: 0.5; transition: opacity 0.25s; } #subject .tooltip { background: #eee; border-radius: 2px; border: 1px solid #ccc; } #subject .tooltip2{ color: #555; } #subject [data-
active] > * { opacity: 1; } #subject .tooltip[data-info='top'] { top: -10px; right: -50px; } #subject .tooltip[data-info='right'] { bottom: -30px; right: -20px; } #subject .tooltip[data-info='bottom'] { top: -10px; left: -50px; } #subject .tooltip[data-info='left'] { top: -30px; right: -20px; } #subject .tooltip2[data-info='top'] { top: -10px; left: -50px; } #subject .tooltip2[data-info...
...: 1.5em; } #unit-settings input { font-size: 12px; width: 40px !important; } #unit-settings .close { width: 16px; height: 16px; background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; background-size: 75%; position: absolute; top: 4px; right: 4px; opacity: 0.5; } #unit-settings .close:hover { cursor: pointer; opacity: 1; } #unit-settings[data-
active='true'] { opacity: 1; } #unit-settings[data-
active='false'] { opacity: 0; top: -100px !important; } /* * css output code */ #output { padding: 10px; border: 2px dashed #888 !important; box-shadow: none !important; border-radius: 3px; overflow: hidden; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; } @media (min-width: 880px) { #ou...
...And 12 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
lability) (also called the cia triad or aic triad) is a model that guides an organization's policies for information security. 47 cms cms, composing, content management system, glossary a cms (content management system) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and inter
active code. 48 cors glossary, infrastructure, security cors (cross-origin resource sharing) is a system, consisting of transmitting http headers, that determines whether browsers block frontend javascript code from accessing responses for cross-origin requests. 49 cors-safelisted request header cors, fetch a cors-safelisted request header is one of the followin...
...ary in object-oriented programming, a class defines an object's characteristics. class is a template definition of an object's properties and methods, the "blueprint" from which other more specific instances of the object are drawn. 79 client hints client hints, glossary, performance, reference, web performance client hints are a set of http request header fields for pro
active content negotiation allowing clients to indicate a list of device and agent specific preferences. 80 closure codingscripting, glossary the binding which defines the scope of execution. in javascript, functions create a closure context. 81 code splitting glossary, reference, web performance, code splitting, latency code splitting is the splitting of code ...
...to most object-oriented programming languages. essentially, a constructor in javascript is usually declared at the instance of a class. 89 continuous media glossary, media continuous media is data where there is a timing relationship between source and destination. the most common examples of continuous media are audio and motion video. continuous media can be real-time (inter
active), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict. 90 control flow codingscripting, glossary, javascript the control flow is the order in which the computer executes statements in a script. 91 cookie glossary, webmechanics a cookie is a small piece of information left on ...
...And 11 more matches
Working with Svelte stores - Learn web development
rested parties to be notified whenever the store value changes, and an optional set() method that allows you to set new values for the store. this minimal api is known as the store contract. svelte provides functions for creating readable, writable, and derived stores in the svelte/store module. svelte also provides a very intuitive way to integrate stores into its reactivity system using the re
active $store syntax. if you create your own stores honoring the store contract, you get this reactivity syntactic sugar for free. creating the alert component to show how to work with stores, we will create an alert component. these kind of widgets might also be known as popup notifications, toast, or notification bubbles. our alert component will displayed by the app component, but any component ca...
...on, which takes care of releasing the subscription. so we subscribe when the component is being initialized, and use ondestroy to unsubscribe when the component is unmounted. finally we use the alertcontent variable in our markup, and if the user clicks on the alert we clean it. at the end we include a few css lines to style our alert component. this setup allows us to work with stores in a re
active way. when the value of the store changes, the callback is executed. there we assign a new value to a local variable, and thanks to svelte reactivity all our markup and re
active dependencies are updated accordingly. using the component let's now use our component. in app.svelte we'll import the component; add the following import statement below the existing one: import alert from './co...
... in app.svelte we'll import the component; add the following import statement below the existing one: import alert from './components/alert.svelte' then call the alert component just above the todos call, like this: <alert /> <todos {todos} /> load your test app now, and you should now see the alert message on screen. you may click on it to dismiss it. ...
...And 11 more matches
Template Logging - Archive of obsolete content
the firefox tools menu. this logging of results can be very useful for debugging, but remember to remove this flag when you have finished and the template works correctly, as the logging can take up extra time that is not necessary when the template is working. each result is logged in a form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new
active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been added. for references, the value of the template's id and ref attributes are provided in each logged message. this is useful if multiple templates are being used. the second line gives details about the new result. the id of the result is specified at the end, i...
...> element. if only one <query> is used, naturally this will always indicate a query of 1. in addition, this result matches the first <rule> of query 2. this information may be used to determine if results are not matching the correct rules. if you, for example, were expecting rule 2 to match, examine the rules and ensure that the logic is correct. the final piece of information is the phrase 'new
active result'. this indicates first, that this is a new result, as opposed to a result being removed, and second, that this result is '
active'. being
active means that the result is not being overridden by an earlier query. as this example implies multiple queries are being used, we can determine that the first query did not provide a result with the given id, and that the result from the second query ...
...again, it was a result from query 2. ...
...And 10 more matches
Index - Learn web development
nics this section of the learning area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the html or css learning articles.) these articles are designed to work on their own. 15 how can we design for all types of users? accessibility, beginner, design, example, intro, mobile, needs
activelearning when you're building a website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on. 16 how do i start to design my website? beginner, composing, needs
activelearning, needsschema when starting with a web project, many people focus on the technical side. of course you...
... website google app engine is a powerful platform that lets you build and run applications on google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. here's a step-by-step guide to hosting your website on google app engine. ...
...page more accessible to people with different disabilities. 25 what are browser developer tools? beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: 26 what are hyperlinks? beginner, infrastructure, navigation, needs
activelearning hyperlinks, usually called links, are a foundational concept behind the web. to explain what links are, we need to step back to the very basics of web architecture. 27 what do common web layouts contain? beginner, css, design, html, needs
activelearning there's a reason we talk about web design. you start out with a blank page, and you can take it so many directi...
...And 10 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
omponent', completed: true }, { id: 3, name: 'complete the rest of the tutorial', completed: false } ] let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length </script> now let's do something with that information. let's start by showing a status message. find the <h2> heading with an id of list-heading and replace the hardcoded number of
active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the information is coming from the todos array. to prove it, go to that array, and try changing some of the todo object's completed property values, and even ...
...do item's delete button is pressed, the relevant todo is removed from the todos array, and the ui updates to no longer show it. in addition, we can now check the checkboxes, and the completed status of the relevant todos will now update in the todos array. however, the "x out of y items completed" heading is not being updated. read on to find out why this is happening and how we can solve it. re
active todos as we've already seen, every time the value of a component top-level variable is modified svelte knows how to update the ui. in our app, the todos array value is updated directly every time a todo is toggled or deleted, and so svelte will update the dom automatically. the same is not true for totaltodos and completedtodos, however. in the following code they are assigned a value when the ...
...ed a value when the component is instantiated and the script is executed, but after that, their values are not modified: let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length we could recalculate them after toggling and removing todos, but there's an easier way to do it. we can tell svelte that we want our totaltodos and completedtodos variables to be re
active by prefixing them with $:. svelte will generate the code to automatically update them whenever data they depend on is changed. note: svelte uses the $: javascript label statement syntax to mark re
active statements. just like the export keyword being used to declare props, this may look a little alien. this is another example in which svelte takes advantage of valid javascript syntax and gives i...
...And 10 more matches
Venkman Introduction - Archive of obsolete content
using venkman, the features, procedures, and tips described here will make you a more confident web developer and debugger. venkman is both a graphic and a console debugger. features such as breakpoint management, call stack inspection, and variable/object inspection are available from the user interface and from console commands, letting you work in the way you are most accustomed to. the inter
active console also allows for execution of arbitrary javascript code. venkman's keyboard shortcuts are the same as leading visual debugging environments, and gdb users should be familiar with venkman's /break, /step, /next, /finish, /frame, and /where commands. on windows, the javascript debugger compares favorably with visual interdev and other large web development tools. on other platforms, includi...
...stall" link for the most recent version. when the download is complete, restart your browser (some windows users may also need to restart their computer as well). you can then access the debugger via a new, dynamically created menuitem in the tools menu of that browser, or else restart the browser with a special debugger option. to see which version of venkman you have, type /version in the inter
active session view. for more information about the latest improvements and versions, see the venkman development page. there are two ways to start the debugger: from firefox, you can start it by selecting javascript debugger from the tools menu (tools->web development menu in mozilla 1.x and netscape). you can also start the browser with the -venkman command line option, which launches venkman ini...
...have been loaded by the javascript engine appear in the loaded scripts window (for more information about how scripts are loaded and accessed in venkman, see "loading scripts into the debugger"). the menubar, toolbar, and all of the views can be collapsed or hidden, giving you a lot of control over the debugging environment. the source code view is empty until you select a script, and the inter
active session view starts up with basic startup information. each of the views has a label, a float button that lets you display the view in its own window, and a close button that puts the view away until you want to display it again, as seen in figure 2. the following section describes these views and their use within the interface as a whole. getting acquainted with venkman's user interface tool...
...And 8 more matches
Styling links - Learn web development
xists in the browser's history), styled using the :visited pseudo class. hover: a link when it is being hovered over by a user's mouse pointer, styled using the :hover pseudo class. focus: a link when it has been focused (for example moved to by a keyboard user using the tab key or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class.
active: a link when it is being activated (e.g. clicked on), styled using the :
active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this...
...erlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. focused links have an outline 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. this is because users know and have come to expect this behaviour — if links were styled differently, it would confuse a lot of people. this doesn't mean that you shouldn't style links at...
...note: you are not just limited to the above properties to style your links — you are free to use any properties you like. just try not to go too crazy! styling some links now we've looked at the default states in some detail, let's look at a typical set of link styles. to start off with, we'll write out our empty rulesets: a { } a:link { } a:visited { } a:focus { } a:hover { } a:
active { } this order is important because the link styles build on one another, for example the styles in the first rule will apply to all the subsequent ones, and when a link is being activated, it is also being hovered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. now let's add some more informatio...
...And 8 more matches
ui/button/toggle - Archive of obsolete content
ted from the global state: browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the
active tab will still show "my t3 label", but the button displayed when t4 is the
active tab will show "my w2 label": browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my t3 label" t4 > displays "my w2 label" setting the properties on the button instance sets the button's glo...
... displays "my w2 label" setting the properties on the button instance sets the button's global state: button.label = "my new label"; you can set state to be specific to a window or tab using the button's state() method. ...
...roperties on the button instance sets the button's global state: button.label = "my new label"; you can set state to be specific to a window or tab using the button's state() method. ...
...And 7 more matches
ui/sidebar - Archive of obsolete content
g sidebars you construct a sidebar object using the sidebar() constructor. once you've done that, you can show the sidebar by calling the sidebar's show() method. if a new window is opened from a window that has a sidebar visible, the new window gets a sidebar, too. you can hide the sidebar by calling its hide() method. called with no arguments, show() and hide() will operate on the currently
active window. from firefox 33 onwards you can pass a browserwindow into these methods, and they will then operate on the specified window. alternatively, the view->sidebar submenu in firefox will contain a new item which the user can use to show or hide the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden. once you've finished using the sidebar you can ...
...ion listener for the sidebar's attach event. ondetach function listener for the sidebar's detach event. onshow function listener for the sidebar's show event. onhide function listener for the sidebar's hide event. sidebar the sidebar object. once a sidebar has been created it can be shown and hidden in the
active window using its show() and hide() methods. once a sidebar is no longer needed it can be destroyed using dispose(). methods dispose() destroys the sidebar. once destroyed, the sidebar can no longer be used. show(window) displays the sidebar. parameters window : browserwindow the window in which to show the sidebar, specified as a browserwindow. this parameter is optional. if it is omitted...
...a sidebar is no longer needed it can be destroyed using dispose(). methods dispose() destroys the sidebar. once destroyed, the sidebar can no longer be used. show(window) displays the sidebar. parameters window : browserwindow the window in which to show the sidebar, specified as a browserwindow. this parameter is optional. if it is omitted, then the sidebar will be shown in the currently
active window. this parameter is new in firefox 33. hide(window) hides the sidebar. parameters window : browserwindow the window for which to hide the sidebar, specified as a browserwindow. this parameter is optional. if it is omitted, then the sidebar will be hidden for the currently
active window. this parameter is new in firefox 33. on(type, listener) registers an event listener with the sideb...
...And 7 more matches
Video and Audio APIs - Learn web development
tener() lines below the previous ones: rwd.addeventlistener('click', mediabackward); fwd.addeventlistener('click', mediaforward); now on to the event handler functions — add the following code below your previous functions to define mediabackward() and mediaforward(): let intervalfwd; let intervalrwd; function mediabackward() { clearinterval(intervalfwd); fwd.classlist.remove('
active'); if(rwd.classlist.contains('
active')) { rwd.classlist.remove('
active'); clearinterval(intervalrwd); media.play(); } else { rwd.classlist.add('
active'); media.pause(); intervalrwd = setinterval(windbackward, 200); } } function mediaforward() { clearinterval(intervalrwd); rwd.classlist.remove('
active'); if(fwd.classlist.contains('
active')) { fwd.classlis...
...rwd.classlist.contains('
active')) { rwd.classlist.remove('
active'); clearinterval(intervalrwd); media.play(); } else { rwd.classlist.add('
active'); media.pause(); intervalrwd = setinterval(windbackward, 200); } } function mediaforward() { clearinterval(intervalrwd); rwd.classlist.remove('
active'); if(fwd.classlist.contains('
active')) { fwd.classlist.remove('
active'); clearinterval(intervalfwd); media.play(); } else { fwd.classlist.add('
active'); media.pause(); intervalfwd = setinterval(windforward, 200); } } you'll notice that first we initialize two variables — intervalfwd and intervalrwd — you'll find out what they are for later on. let's step through mediabackward() (the functionality for mediaforward() is exactly the ...
...actly the same, but in reverse): we clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the rwd button after pressing the fwd button, we want to cancel any fast forward functionality and replace it with the rewind functionality. if we tried to do both at one, the player would break. we use an if statement to check whether the
active class has been set on the rwd button, indicating that it has already been pressed. the classlist is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. we use the classlist.contains() method to check whether the list contains the
active class. this returns a boolean true/false resul...
...And 7 more matches
Perceived performance - Learn web development
reas of your site that you may not be able to make faster, but you can make it feel faster even if the metrics discussed in the othser sections can't be improved. there is no unicorn metric that can measure what the user feels, but metrics are useful in guaging improvements (and regressions). relevant measurements include first meaningful paint (fmp), largest contentful paint (lcp), time to inter
active (tti), render start, dom inter
active, and speed index. 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. it doesn’t indicate completeness and may report a time when nothing visible is painted. first contentful paint (fcp) reports the time when the brows...
... perceived performance: it measures the average time for pixels on the visible screen to be painted. it doesn't account for jitter, nor does it weight which content important to a user more highly, so it's not a perfect metric. these metrics have to do with initial load and render. it is also important to ensure the site feels fast once the user begins interacting with it. for this, time to inter
active, is a good metric; it is the moment when the last long task of the load process finishes and the ui is available for user interaction with delay. ui lack or responsiveness and jank both harm perceived performance. even though a task may take a long time, though, there are ways to make it seem faster. there are several tips to improving perceived performance. improving perceived performance und...
... perceived performance understanding networking, how the browser works, user perception of time, etc., can help you better understand how to improve the user interaction. however, you don't have to know the ins and outs of how everything, including how the human mind works, to improve the perception of speed. ...
...And 7 more matches
<color> - CSS: Cascading Style Sheets
ywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. these values may also be used in other contexts, but are not widely supported by browsers. the keywords in the following list are defined by the css color module level 4 specification. note that these keywords are case insensitive, but are listed here with mixed case for readability. ...
...sed to ensure that the rest of the page integrates well with the restricted palette. these values may also be used in other contexts, but are not widely supported by browsers. the keywords in the following list are defined by the css color module level 4 specification. note that these keywords are case insensitive, but are listed here with mixed case for readability. ...
...should be used with captiontext as foreground color. appworkspace backgrou...
...And 7 more matches
ui/button/action - Archive of obsolete content
that is, its properties are the same across all open windows and tabs, and updating them updates the button's state across all open windows and tabs. you can set state to be specific to a window or tab using the button's state() method. ...
...windows and tabs, and updating them updates the button's state across all open windows and tabs. you can set state to be specific to a window or tab using the button's state() method. ...
...like this, call state() with 2 parameters: the first parameter is a window or tab object or as a shorthand, the string "window" for the currently
active window, or the string "tab" for the currently
active tab the second parameter is an object containing the state properties you wish to update. ...
...And 6 more matches
Desktop gamepad controls - Game development
pad api implementation in the captain rogers: battle at andromeda game we created with phaser. this is pure javascript code however too, so can be used in any other project no matter what framework was used. first off, we'll create a small library that will take care of handling the input for us. ...
...the connect() and disconnect() functions are bound to the following events: window.addeventlistener("gamepadconnected", gamepadapi.connect); window.addeventlistener("gamepaddisconnected", gamepadapi.disconnect); they are fired when the gamepad is connected and disconnected respectively. ...
...sets the information about it in our object, and the axes property stores the array containing the values signifying the amount an axis is pressed in the x and y directions, represented by a float in the (-1, 1) range. ...
...And 6 more matches
TypeScript support in Svelte - Learn web development
rom '../types/todo.type' export let todos: todotype[] notice that now typescript can infer that the t variable in todos.filter(t => t.completed) is of type todotype. nevertheless, if we think it makes our code easier to read, we could specify it like this: $: completedtodos = todos.filter((t: todotype) => t.completed).length most of the time typescript will be able to correctly infer the re
active variable type, but sometimes you might get an "implicitly has an 'any' type" error when working with re
active assignments. in those cases you can declare the typed variable in a different statement, like this: let completetodos: number $: completedtodos = todos.filter((t: todotype) => t.completed).length you can't specify the type in the re
active assignment itself. the following statement $: co...
...g with re
active assignments. in those cases you can declare the typed variable in a different statement, like this: let completetodos: number $: completedtodos = todos.filter((t: todotype) => t.completed).length you can't specify the type in the re
active assignment itself. the following statement $: completedtodos: number = todos.filter[...] is invalid. for more information read how do i type re
active assignments? / i get an "implicitly has type 'any' error". filterbutton.svelte now we'll take care of the filterbutton component. add the lang='ts' attribute to the <script> tag, as usual. you'll notice there are no warnings — typescript infers the type of the filter variable from the default value. but we know that there are only three valid values for the filter: all,
active, and comp...
... there are no warnings — typescript infers the type of the filter variable from the default value. but we know that there are only three valid values for the filter: all,
active, and completed. so we can let typescript know about them by creating an enum filter. create a filter.enum.ts file in the types folder. give it the following contents: export enum filter { all = 'all',
active = '
active', completed = 'completed', } now we will use this from the filterbutton component. replace the content of the filterbutton.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class...
...And 6 more matches
nsIPromptService
shows an alert dialog with an ok button. it works the same way as window.alert, but accepts a title for the dialog. you should use this method instead of window.alert in chrome code. void alert( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext ); parameters aparent the parent window for the dialog, or null, in which case the parent window will be nsiwindowwatcher.
activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. see also the alert_example. alertcheck() shows an alert dialog with an ok button and a labeled checkbox. void alertcheck( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate ); parameters apa...
...in the body of the dialog. see also the alert_example. alertcheck() shows an alert dialog with an ok button and a labeled checkbox. void alertcheck( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in wstring acheckmsg, inout boolean acheckstate ); parameters aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.
activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acheckmsg text to appear with the checkbox. acheckstate contains the initial checked state of the checkbox when this method is called and the final checked state after this method returns. if you call this method from javascript you need to wrap this argum...
...ap this argument in an object with its 'value' property set to a boolean (or use an empty object). see also the alertcheck_example. confirm() shows a dialog with ok and cancel buttons. boolean confirm( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext ); parameters aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.
activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. return value true for ok, false for cancel see also the confirm_example. confirmcheck() shows a dialog with ok and cancel buttons and a labeled checkbox. see also the confirm_example. boolean confirmcheck( in nsidomwindow aparent, in wstring adialogtitle, in ...
...And 6 more matches
ARIA: tab role - Accessibility
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role. the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. elements with the role tab must either be a child of an element with the tablist role, or have their id part of the aria-owns property of a tablist. ...
... some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the
active tab in a tablist. when working with elements with the tab role, when they are selected or
active, they should have their aria-selected attribute set to true, otherwise it should be set to false. when a tab is selected or
active, its controlled tabpanel should have its aria-expanded and hidden attributes set to true, otherwise they should be set to false. associated roles and attributes aria-...
... → focuses and optionally activates the next tab in the tab list. if the current tab is the last tab in the tab list it activates the first tab. ...
...And 6 more matches
Practical positioning examples - Learn web development
t to keep things as simple as possible. there is some javascript later on, but only a tiny bit. to start with, we'd like you to make a local copy of the starting html file — info-box-start.html. save this somewhere sensible on your local computer, and open it up in your text editor. let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="
active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="
active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. vivamus v...
...th: 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 feedback. secondly, we'll set a rule that puts the same styling on one of the tabs when a class of
active is present on it. we will set this using javascript when a tab is clicked on. 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. let's get going! first, of all, add the followin...
...nd make them all sit flush to the top and left of their <div> container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. the rule also gives the panels the same set height as the container, and gives the content some padding, a text color, and a background-color. the second rule we'll add here makes it so that a panel with a class of
active-panel set on it will have a z-index of 1 applied to it, which will make it sit above the other panels (positioned elements have a z-index of 0 by default, which would put them below). again, we'll add this class using javascript at the appropriate time. .info-box article { position: absolute; top: 0; left: 0; height: 352px; padding: 10px; color: white; background-color: #a60000; } ...
...And 5 more matches
Screen Wake Lock API - Web APIs
are. modern devices do this to save on battery power. whilst this is a useful feature, some applications need the screen to stay awake to be their most useful. the screen wake lock api prevents the screen from turning off, dimming or locking. it allows for a simple platform based solution which up until now could only be achieved via workarounds which were potentially power hungry. only visible (
active) documents can acquire the screen wake lock. there are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a qr/barcode or applications that use voice or gesture control, rather than tactile input (the default way to keep a screen awake). you acquire a wakelocksentinel object by calling the navigator.wa...
...s that use voice or gesture control, rather than tactile input (the default way to keep a screen awake). you acquire a wakelocksentinel object by calling the navigator.wakelock.request() promise based method that resolves if the platform allows it. a request may be rejected for a number of reasons, including system settings (such as power save mode or low battery level) or if the document is not
active or visible. the sentinel is attached to the underlying system wake lock. it can be released by the system, again if the battery power is too low or the document is not
active or visible. it can also be released manually via the wakelocksentinel.release() method. it is good practice to store a reference to the sentinel object to control release later and also to reacquire the lock if need be. th...
... screen wake lock api interfaces wakelock the wakelock interface prevents device screens from dimming or locking when an application needs to keep running. wakelocksentinel provides a handle to the underlying platform wake lock and if referenced can be manually released and reacquired. ...
...And 5 more matches
HTML documentation index - HTML: Hypertext Markup Language
on index html, index, mdn meta a comprehensive index list of all the available html documentation. 54 html elements reference basic, element, html, reference, web, l10n:priority this page lists all the html elements, which are created using tags. 55 <a>: the anchor element content, element, html, html text-level semantics, html:flow content, html:inter
active content, html:palpable content, html:phrasing content, inline element, reference, web the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address. 56 <abbr>: the abbreviation element acronym, definitions, element, html, html text-level semantics, htm...
...ion, or value for the preceding term (<dt>) in a description list (<dl>). 88 <del>: the deleted text element deleted text, element, html, html edits, reference, web, del the html <del> element represents a range of text that has been deleted from a document. 89 <details>: the details disclosure element disclosure box, disclosure widget, element, html, html inter
active elements, reference, web, details the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. 90 <dfn>: the definition element definition, definitions, element, html, html text-level semantics, reference, semantic markup, web, dfn the html definition element (<dfn>) is used to ind...
...ggled into an "open" state. 90 <dfn>: the definition element definition, definitions, element, html, html text-level semantics, reference, semantic markup, web, dfn the html definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. 91 <dialog>: the dialog element dialog, element, html, html inter
active elements, reference, web, polyfill the html <dialog> element represents a dialog box or other inter
active component, such as a dismissable alert, inspector, or subwindow. 92 <dir>: the directory element (obsolete) directory, element, html, html lists, obsolete, reference, web, dir, lists the obsolete html directory element (<dir>) is used as a container for a directory ...
...And 5 more matches
windows - Archive of obsolete content
es not mean that the url content has loaded, only that the window itself is fully functional and its properties can be accessed. this is an optional property. onclose function a callback function that is called when the window will be called. this is an optional property. onactivate function a callback function that is called when the window is made
active. this is an optional property. ondeactivate function a callback function that is called when the window is made in
active. this is an optional property. returns browserwindow : properties browserwindows browserwindows provides access to all the currently open browser windows as browserwindow objects. var windows = require("sdk/windows"); for (let window of w...
...n the window is made in
active. this is an optional property. returns browserwindow : properties browserwindows browserwindows provides access to all the currently open browser windows as browserwindow objects. ...
... optional property. returns browserwindow : properties browserwindows browserwindows provides access to all the currently open browser windows as browserwindow objects. var windows = require("sdk/windows"); for (let window of windows.browserwindows) { console.log(window.title); } console.log(windows.browserwindows.length); the currently
active window is given by browserwindows.
activewindow: var windows = require("sdk/windows").browserwindows; windows.on('activate', function(window) { console.log("a window was activated."); var
activewindowtitle = windows.
activewindow.title; console.log("
active window title is: " +
activewindowtitle); }); events the browserwindows property emits the following events which can be listened to using its on function. var windows = requi...
...And 4 more matches
Forms related code snippets - Archive of obsolete content
this.otbody = document.createelement("tbody"); for (var nday, oday, niter = 0; niter < ntotal; niter++) { if (niter % 7 === 0) { otr = document.createelement("tr"); this.otbody.appendchild(otr); } nday = niter - nendblanks + 1; otd = document.createelement("td"); if (niter + 1 > nendblanks && niter < nend) { otd.classname = sprefs + "-
active-cell"; otd.id = sprefs + "-day-" + this.id + "-" + nday; otd.onclick = ondayclick; otd.appendchild(document.createtextnode(nday)); } else { otd.classname = sprefs + "-empty-cell"; } otr.appendchild(otd); } this.display.innerhtml = smonthsnames[this.current.getmonth()] + " " + this.current.getfullyear(); this.container.appendchild(this...
...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-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" rea...
... <th>t</th> <th>w</th> <th>t</th> <th>f</th> <th>s</th> <th>s</th> </tr> </thead> <tbody> <tr> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td id="zdp-day-1-1" class="zdp-
active-cell">1</td> <td id="zdp-day-1-2" class="zdp-
active-cell">2</td> </tr> <tr> <td id="zdp-day-1-3" class="zdp-
active-cell">3</td> <td id="zdp-day-1-4" class="zdp-
active-cell">4</td> <td id="zdp-day-1-5" class="zdp-
active-cell">5</td> <td id="zdp-day-1-6" class="zdp-
active-cell">6</td> <td id="zdp-day-1-7" class="zdp-
active-cell">7</td> <td id="zdp-d...
...And 4 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
development page, located at the venkman development page. figure 3. mozilla's javascript debugger the javascript debugger can debug javascript running in the mozilla browser window. it supports such standard debugging features as breakpoint management, call stack inspection, and variable/object inspection. all features are accessible through the user interface or through the debugger's inter
active console. with the console, you can execute arbitrary javascript in the same scope as the javascript currently being debugged. css differences mozilla-based products have the strongest support for cascading style sheets (css), including most of css1, css2.1 and parts of css3, compared to internet explorer as well as all other browsers. for most issues mentioned below, mozilla will add an error ...
...l data island: <xml id="xmldataisland"> <foo>bar</foo> </xml> one cross-browser solution is to use dom parsers, which parse a string that contains a serialized xml document and generates the document for the parsed xml. mozilla uses the domparser object, which takes the serialized string and creates an xml document out of it. in internet explorer, you can achieve the same functionality using
activex. the object created using new
activexobject("microsoft.xmldom") has a loadxml method that can take in a string and generate a document from it. the following code shows you how: var xmlstring = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>"; var mydocument; if (window.domparser) { // this browser appears to support domparser var parser = new domparser(); mydocument = parser.parsefromst...
...microsoft.xmldom") has a loadxml method that can take in a string and generate a document from it. the following code shows you how: var xmlstring = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>"; var mydocument; if (window.domparser) { // this browser appears to support domparser var parser = new domparser(); mydocument = parser.parsefromstring(xmlstring, "text/xml"); } else if (window.
activexobject){ // internet explorer, create a new xml document using
activex // and use loadxml as a dom parser. mydocument = new
activexobject("microsoft.xmldom"); mydocument.async = false; mydocument.loadxml(xmlstring); } else { // not supported. } see using xml data islands in mozilla for an alternative approach. xmlhttprequest internet explorer allows you to send and retrieve xml f...
...And 4 more matches
Menus - Archive of obsolete content
show or hide menu items in a load event listener. for example, to have an item initially hidden in a window: function initmenus() { var item = document.getelementbyid("menu-file-open"); item.hidden = true; } the hidden property is set to true to hide the menu with the id 'menu-fileopen'. this function may be called from within an onload attribute on the window. accessing and setting the
active item in a menu, there will usually be an item that is considered "
active". this item will be highlighted, and will do certain functions depending on the kind of item it is, and the way in which it has been activated, whether via the keyboard or mouse. for example, if it is a menu element and has been activated via a mouseover, then the menu will open. if it has been activated via navigation w...
...d the command associated with it. there may be occasion to access or set this programatically with a script. if the menu has been created using a menulist, this is easily accomplished using the selecteditem or selectedindex properties. however, it is not possible to use these properties for menus whose popup is the child of menu, button, or toolbarbutton. ...
...asion to access or set this programatically with a script. if the menu has been created using a menulist, this is easily accomplished using the selecteditem or selectedindex properties. however, it is not possible to use these properties for menus whose popup is the child of menu, button, or toolbarbutton. ...
...And 4 more matches
Accessibility API cross-reference
ria live region. alert alert alert alert, alertdialog content changes over time, such as animated gif animation n/a no spec n/a a section that forms an independent part of a document, page, or site. article <article> <part> or <art> object representing entire app. aria role denotes inter
active (not browsable) content operable in ways that differ from any of the other inter
active aria roles, and may be only a part of the main document. application frame n/a application see <div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content. banner a portion of quoted cont...
...se <index> with a <l>(list) inside. no default semantics in html, but semantics and other accessibility features may be provided with aria. see also span n/a n/a n/a <div> <div> but if you need custom semantic structure, use <nonstruct> instead window that corresponds to an mdi document. in aria, used to nest browsable rich text content inside inter
active content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. ...
...lapsed in the same manner as for a tree. n/a n/a treegrid if you're using more than one consecutive whitespace element in html, you're doing it wrong. (use css instead). screen readers often announce this as "blank" or similar, which is usually noise, rather than content. whitespace filler filler n/a <br> an inter
active component of a graphical user interface. n/a n/a widget (abstract role) a window window window window window (abstract role) i have no idea what the difference between these things are n/a internal_frame, option_pane, frame, directory_pane, root_pane, layered_pane, scroll_pane, viewport desktop_frame, directory_pa...
...And 4 more matches
Introduction to the JavaScript shell
this article explains how to use the shell to experiment with javascript code and run javascript programs. to get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your platform from the nightly builds. for a list of other javascript shells, see javascript shells. ...
...f other javascript shells, see javascript shells. note: starting with spidermonkey 44 (firefox 44 / thunderbird 44 / seamonkey 2.41), the standard, web-compatible javascript version is used by default (and not js1.7+ anymore). the version() shell builtin is still there for testing legacy features. running the javascript shell the shell offers two modes of operation. ...
...nter
active shell, in which you type javascript code at a prompt and get instant gratification, which is handy for experimenting or testing new features. you can also pass in, on the command line, a javascript program file to run, in which case the program is run automatically. after following the build documentation and installing the built shell using make install, you can run the shell in inter
active mode using the command: js [ if you get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g. from a bash console when using a pre-compiled binary, try <path to your firefox's run-mozilla.sh>/run-mozilla.sh ./js -- that worked for me] if you'd like to run the javascript code in the file foo.js, you can use this command: js foo.js to run foo.js then drop into the ...
...And 4 more matches
Keyboard-navigable JavaScript widgets - Accessibility
as menus, tree views, rich text fields, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the keyboard. using tabindex by default, when people use the tab key to browse a webpage, only inter
active elements (like links, form controls) get focused. with the tabindex global attribute, authors can make other elements focusable, too. when set to 0, the element becomes focusable by keyboard and script. when set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order. the order in which elements gain focus when using a keyboard, is the source order...
... it does not become part of the keyboard focus order. the order in which elements gain focus when using a keyboard, is the source order by default. in exceptional circumstances, authors may want to redefine the order. to do this, authors can set tabindex to any positive number. warning: avoid using positive values for tabindex. elements with a positive tabindex are put before the default inter
active elements on the page, which means page authors will have to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex. the following table describes tabindex behavior in modern browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows...
...esent follows the platform convention of the element (yes for form controls, links, etc.). follows the platform convention of the element. negative (i.e. tabindex="-1") yes no; author must focus the element with focus() in response to arrow or other key presses. zero (i.e. tabindex="0") yes in tab order relative to element's position in document (note that inter
active elements like <a> have this behavior by default, they don't need the attribute). positive (e.g. tabindex="33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11"). non-native controls native html e...
...And 4 more matches
Event reference
ard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
...e fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
... system clipboard to the document. pause event html5 media playback has been paused. pause speechsynthesisevent web speech api the utterance is paused part way through. pointercancel pointerevent pointer events the pointer is unlikely to produce any more events. pointerdown pointerevent pointer events the pointer enters the
active buttons state. pointerenter pointerevent pointer events pointing device is moved inside the hit-testing boundary. pointerleave pointerevent pointer events pointing device is moved out of the hit-testing boundary. pointerlockchange event pointer lock the pointer was locked or released. pointerlockerror event pointer lock it wa...
...And 4 more matches
Web Performance
web performance is the objective measurements and the perceived user experience of load time and runtime. web performance is how long a site takes to load, become inter
active and responsive, and how smooth the content is during user interactions - is the scrolling smooth? are buttons clickable? are pop-ups quick to load and display, and do they animate smoothly as they do so? web performance includes both objective measurements like time to load, frames per second, and time to become inter
active, and subjective experiences of how long it felt like it took the content to load. the longer it takes for a site to respond, the more users will abandon the site. it is important to minimize the loading and response times and add additional features to conceal latency by making the experience as...
... there are tools, apis, and best practices that help us measure and improve web performance. ...
...ere. instead, we're going to look at a more important issue when building web apps: starting up as asynchronously as possible. that means not running all your startup code in a single event handler on the app's main thread.performance budgetsa performance budget is a limit to prevent regressions. it can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. time to inter
active), a custom metric (e.g. time to hero element), or a threshold over a period of time. performance fundamentalsperformance means efficiency. in the context of open web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.performance monitoring: rum vs synthetic monitoringsynthetic mo...
...And 4 more matches
Mixed content - Web security
nd man-in-the-middle attacks. an https page that includes content fetched using cleartext http is called a mixed content page. pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. that leaves the pages unsafe. types of mixed content there are two categories for mixed content: mixed passive/display content and mixed
active content. the difference lies in the threat level of the worst case scenario if content is rewritten as part of a man-in-the-middle attack. in the case of passive content, the threat is lower (the page may contain misleading content, or the user's cookies may be stolen). in the case of
active content, the threat can lead to phishing, sensitive data disclosure, redirection to malicious sites, etc. ...
...ecific page within a website. if the attacker observes http requests to certain images, they could determine which webpage the user is visiting. passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed
active content mixed
active content is content that has access to all or parts of the document object model of the https page. this type of mixed content can alter the behavior of the https page and potentially steal sensitive data from the user. hence, in addition to the risks described for mixed display content above, mixed
active content is vulnerable to a few other attack vectors. in the mixed act...
...age and potentially steal sensitive data from the user. hence, in addition to the risks described for mixed display content above, mixed
active content is vulnerable to a few other attack vectors. in the mixed
active content case, a man-in-the-middle attacker can intercept the request for the http content. the attacker can also rewrite the response to include malicious javascript code. malicious
active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the browser or its plugins, for example). the risk involved with mixed content does depend on the type of website the user is visiting and how sensitive the data exposed to that site may be. the webpage may have public data visible ...
...And 4 more matches
XUL Events - Archive of obsolete content
a <checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
... has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>. ...
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
ents to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc. these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attr
active layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form control...
...mally tabbable elements to receive focus programmatically, e.g., via javascript, or as the target of links. whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the enter/return key. ...
... this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
ents to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc. these provide extra semantics for screen readers (and other tools) to give user extra clues about the content they are navigating (see screen reader support for new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attr
active layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form control...
...mally tabbable elements to receive focus programmatically, e.g., via javascript, or as the target of links. whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the enter/return key. ...
... this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. better to just use the right element for the right job in the first place. ...
...And 3 more matches
HTML text fundamentals - Learn web development
lowing their users to find the information they need quickly. if headings are not available, they will be forced to listen to the whole document read out loud. to style content with css, or make it do interesting things with javascript, you need to have elements wrapping the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup.
active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output<...
...ems for which the order of the items doesn't matter—let's take a shopping list as an example. milk eggs bread hummus every unordered list starts off with a <ul> element—this wraps around all the list items: <ul> milk eggs bread hummus </ul> the last step is to wrap each list item in a <li> (list item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul>
active learning: marking up an unordered list try editing the live sample below to create your very own html unordered list. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100p...
... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 200px; w...
...And 3 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
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. you'll notice that the array is successfully updated every time you press the button (the todo objects' completed properties are toggled between true and false), but svelte is not aware of that. this also means that in this case, a re
active statement like $: console.log('todos', todos) won't be very useful. to find out why this is happening, we need to understand how reactivity works in svelte when updating arrays and objects. many web frameworks use the virtual dom technique to update the page. basically, the virtual dom is an in-memory copy of the contents of the web page. the framework updates this virtual representation which ...
... piece of code: const foo = obj.foo foo.bar = 'baz' svelte won't update references to obj.foo.bar, unless you follow it up with obj = obj. that's because svelte can't track object references, so we have to explicitly tell it that obj has changed by issuing an assignment. note: if foo is a top level variable, you can easily tell svelte to update obj whenever foo is changed with the following re
active statement: $: foo, obj = obj. with this we are defining foo as a dependency, and whenever it changes svelte will run obj = obj. in our checkalltodos() function, when we run: todos.foreach(t => t.completed = completed) svelte will not mark todos as changed because it does not know that when we update our t variable inside the foreach() method, we are also modifying the todos array. and that ma...
... don't forget to pass the prop into moreactions from inside todos.svelte, where the component is called: <moreactions {todos} on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> working with the dom: focusing on the details now that we have completed all of the app'...
...And 3 more matches
Using the Browser API
er('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); implementing the search bar let's now turn our attention to implementing browser search using the browser api. tap the "s" button and try it out. try searching for "firefox" on the default page when the app first loads. ...
...using the browser api. tap the "s" button and try it out. try searching for "firefox" on the default page when the app first loads. so how do we do this? ...
...; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search input element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set search
active to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted. searchform.addeventlistener('submit',function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); search
active = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); with this all done, you'll see your search resu...
...And 3 more matches
Index
s xray vision for an object, giving the caller a transparent wrapper to the underlying object. 50 javaxpcom embedding, java, javaxpcom, mozilla, xpcom, xpcom:language bindings javaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface. javaxpcom is not
actively maintained. 51 development javaxpcom, xpcom:language bindings no summary! 52 examples javaxpcom, xpcom:language bindings no summary! 53 other resources javaxpcom, xpcom:language bindings no summary! 54 plxpcom guide, mozilla, plxpcom, xpcom, xpcom:language bindings plxpcom (perl xpcom) provides language bindings...
... xpcom from perl code. the resources here provide information about this language binding and how to use it. 55 pyxpcom landing, mozilla, pyxpcom, xpcom, xpcom:language bindings pyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface. pyxpcom is
actively used in
activestate komodo products, for example. 56 community pyxpcom, xpcom:language bindings no summary! 57 rbxpcom guide, mozilla, rbxpcom, xpcom, xpcom:language bindings rbxpcom (ruby cross-platform com) provides bindings between the popular ruby programming language and xpcom. you can find additional information using the resource links below. ...
...uage and xpcom. you can find additional information using the resource links below. 58 xpconnect landing, mozilla, xpcom, xpcom:language bindings, xpconnect xpconnect is a bridge between javascript and xpcom. with xpconnect, you can use xpcom components from javascript code, and interact with javascript objects from within xpcom components. xpconnect is part of firefox and is
actively used in xul applications. 59 architecture basics guide, needscontent, xpcom, xpcom:language bindings, xpconnect xpcom is like com, for windows. it lets you get pointers to components inside mozilla, and it lets you talk about their interfaces as well. 60 using components deprecated, guide, needscontent, xpcom, xpcom:language bindings, xpconnect xpconnec...
...And 3 more matches
Pointer events - Web APIs
, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. in fact, the pointerevent interface inherits all of the mouseevent properties, thus facilitating the migration of content from mouse events to pointer events. terminology
active buttons state the condition when a pointer has a non-zero value for the buttons property. for example, in the case of a pen, when the pen has physical contact with the digitizer, or at least one button is depressed while hovering.
active pointer any pointer input device that can produce events. a pointer is considered
active if it can still produce further events. for example, a pen that is a ...
... digitizer a sensing device with a surface that can detect contact. ...
...nterover fired when a pointer is moved into an element's hit test boundaries. pointerenter onpointerenter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). pointerdown onpointerdown fired when a pointer becomes
active buttons state. pointermove onpointermove fired when a pointer changes coordinates. this event is also used if the change in pointer state can not be reported by other events. pointerup onpointerup fired when a pointer is no longer
active buttons state. pointercancel onpointercancel a browser fires this event if it concludes the pointer will no longer b...
...And 3 more matches
WebGL constants - Web APIs
use getprograminfolog to find the exact error. validate_status 0x8b83 passed to getprogramparameter after calling validateprogram to determine if it is valid. returns false if errors were found. attached_shaders 0x8b85 passed to getprogramparameter after calling attachshader to determine if the shader was attached correctly. returns false if errors occurred.
active_attributes 0x8b89 passed to getprogramparameter to get the number of attributes
active in a program.
active_uniforms 0x8b86 passed to getprogramparamter to get the number of uniforms
active in a program. max_vertex_attribs 0x8869 the maximum number of entries possible in the vertex attribute list. max_vertex_uniform_vectors 0x8dfb max_...
...ve_x 0x8515 texture_cube_map_negative_x 0x8516 texture_cube_map_positive_y 0x8517 texture_cube_map_negative_y 0x8518 texture_cube_map_positive_z 0x8519 texture_cube_map_negative_z 0x851a max_cube_map_texture_size 0x851c texture0 - 31 0x84c0 - 0x84df a texture unit.
active_texture 0x84e0 the current
active texture unit. repeat 0x2901 clamp_to_edge 0x812f mirrored_repeat 0x8370 uniform types constant name value description float_vec2 0x8b50 float_vec3 0x8b51 float_vec4 0x8b52 int_vec2 0x8b53 int_vec3 0x8b...
...onents 0x8c8a max_transform_feedback_separate_attribs 0x8c8b interleaved_attribs 0x8c8c separate_attribs 0x8c8d transform_feedback_buffer 0x8c8e transform_feedback_buffer_binding 0x8c8f transform_feedback 0x8e22 transform_feedback_paused 0x8e23 transform_feedback_
active 0x8e24 transform_feedback_binding 0x8e25 framebuffers and renderbuffers constant name value description framebuffer_attachment_color_encoding 0x8210 framebuffer_attachment_component_type 0x8211 framebuffer_attachment_red_size 0x8212 framebuffer_attachment_green_size 0x8213 ...
...And 3 more matches
ARIA Test Cases - Accessibility
ers as the grid is traversed with arrow keys (in forms mode). screen readers should continue to respect any special table reading modes while the user traverses the grid. for example, while in the grid in forms mode, the user should be able to configure the screen reader to read row headers only. jaws - virtual cursor - jaws treats a grid as if it were an html table. all table keys are
active. header behavior is not yet defined. pc cursor - tbd. window-eyes window-eyes should allow the user to change row/col header reading modes with ctrl+shift+h, whether the user is in browse or forms mode. markup used: role="grid", "gridcell", "rowheader", "columnheader" aria-selected, aria-readonly notes: results: at firefox ie opera safari ...
...if an item is focused within th...
...eader should announce the relevant list items. ...
...And 3 more matches
ARIA: listbox role - Accessibility
nounces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selectable, omit the aria-selected. list a section containing listitem elements states and properties aria-
activedescendant holds the id string of the currently
active element within the listbox. if that's an option element, then that would be the id of the most recently interacted with option, regardless of whether that option has an aria-selected value of true or not. takes the value of only one id, even in a multiselectable listbox. if the id does not refer to a dom descendant of the listbox, then that...
...ion, the following must occur: deselect the previously selected option, setting the aria-selected to false, or removing the attribute altogether, changing the appearance of the newly unselected option to appear not selected. select the newly selected option, setting aria-selected="true" on the option and changing the appearance of the newly selected option to appear selected. ...
...elect listbox when the user clicks on an option, hits space when focused on an option, or otherwise toggles the state of an option, the following must occur: toggle the aria-selected state of the currently focused option, changing the state of the aria-selected to true if it was false or false if it was true. change the appearance of the option to reflect it's selected state update the aria-
activedescendant value on the listbox to the id of the option the user just interacted with, even if they toggled the option to be unselected. the first rule of aria use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an aria role, state or property to make it accessible, then do so. the <select> element with...
...And 3 more matches
Accessibility documentation index - Accessibility
ment, agent, alertdialog, alerts, modal, user, useragent the alertdialog role is used to notify the user of urgent information that demands the user's immediate attention. as the name implies, alertdialog is a type of dialog. this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 17 using the aria-
activedescendant attribute attribute, document object model, needscontent, property, widget, aria-
activedescendant this article describes the aria-
activedescendant property. 18 using the aria-describedby attribute aria, accessibility, attribute the aria-describedby attribute is used to indicate the ids of the elements that describe the object. it is used to establish a rel...
...he essence of an object, while a description provides more information that the user might need. 19 using the aria-hidden attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent this technique demonstrates how to use the aria-hidden attribute. the aria-hidden attribute can either expose or hide non-inter
active content from the accessibility api. 20 using the aria-invalid attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent the aria-invalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application.this may include formats such as emai...
... html, cell, table the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row. 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable inter
active controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. 58 aria: contentinfo role aria, aria role, reference, role-contentinfo the contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links,...
...And 3 more matches
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
note: this topic documents only the element that is defined as part of html5. it does not address earlier, non-standardized implementation of the element. ...
... note: this topic documents only the element that is defined as part of html5. it does not address earlier, non-standardized implementation of the element. ...
... note: this topic documents only the element that is defined as part of html5. it does not address earlier, non-standardized implementation of the element. ...
...And 3 more matches
<input type="file"> - HTML: Hypertext Markup Language
value a domstring representing the path to the selected file. ...
... value a domstring representing the path to the selected file. ...
... value a domstring representing the path to the selected file. ...
...And 3 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
rs conference summer 2007. mr. shimoda is a co-author of firefox 3 hacks (o'reilly japan, 2008). this chapter explains how to use xpcom to implement advanced processes using only javascript. introduction javascript lacks functions for opening files and character-code conversion, among other things. a different mechanism is needed to perform these functions. internet explorer handles this using
activex; in firefox, we use the cross-platform component object model, or xpcom. due to deprecation of enableprivilege this functionality can not be used in web pages. enableprivilege is disabled in firefox 15 and will be removed in firefox 17. about xpcom xpcom is a framework for developing platform-independent components. components developed in line with that framework are referred to as xpcom com...
... see fit. make sure to change file paths to match your own environment. you can download the source code used in this chapter. get window while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. ...
... download the source code used in this chapter. get window while you can use javascript to get child windows opened from the parent window, you cannot get dialogs or windows that have no relation to that window. to overcome this limitation, nsiwindowmediator makes it possible to access all of firefox's windows. get
active window one thing that nsiwindowmediator is often used for is to get the
active window. ...
...And 2 more matches
List of Former Mozilla-Based Applications - Archive of obsolete content
the following is a list of all known applications that at one point used mozilla technologies or that are no longer being
actively maintained. a list of
actively maintained mozilla-based applications is also available. applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing ...
... software installation over internet no longer using mozilla technology -- need confirmation and details second life virtual world desktop client switched from embedded mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional information aphrodite browser in
active aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder in
active civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczill...
...re last news item on site from 2004 chameleon theme builder in
active civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 2005 fabula language learning application in
active galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment for internet computers no longer available hp printer assistant printer utility hall of fame p...
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
this list is likely to be incomplete since we think there are many dark matter projects that we don't know about. if you have information about a new project or extra information about an existing project, please feel free to update this page. a list of former mozilla-based applications is also available. name description additional information 389 directory server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it. ...
... celtx media tool cenzic hailstorm vulnerability assessment and management tool uses gecko chatzilla irc client standalone version (xulrunner) chromium and google chrome web browser uses mozilla nss and npapi libraries chromeless browser with html-based interface classilla mozilla browser for mac o...
... dogtag certificate system uses nss dojo javascript toolkit uses mozilla rhino in shrinksafe eclipse platform open development platform the ajax toolkit framework, standard widget toolkit and eclipsemozilla projects make use of mozilla elix...
...And 2 more matches
Index - Archive of obsolete content
ecreasing the size, except in the other direction. ...
... no summary! 152 ignorecase xul attributes, xul reference no summary! 153 ignoreincolumnpicker xul attributes, xul reference no summary! 154 ignorekeys xul attributes, xul reference no summary! 155 image xul attributes, xul reference no summary! 156 image.onload no summary! 157 in
activetitlebarcolor xul attributes, xul reference no summary! 158 increment xul attributes, xul reference no summary! 159 index xul attributes, xul reference no summary! 160 inputtooltiptext xul attributes, xul reference no summary! 161 insertafter xul attributes, xul reference no summary! 162 insert...
... summary! 185 maxpos xul attributes, xul reference no summary! 186 maxrows xul attributes, xul reference no summary! 187 maxwidth xul attributes, xul reference no summary! 188 member xul attributes, xul reference no summary! 189 menu xul attributes, xul reference no summary! 190 menu
active xul attributes, xul reference no summary! 191 menuitem.key xul attributes, xul reference no summary! 192 menuitem.name xul attributes, xul reference no summary! 193 menuitem.type xul attributes, xul reference more information on adding checkmarks to menus in the xul tutorial 194 min xul attributes, xul referen...
...And 2 more matches
Gecko FAQ - Gecko Redirect 1
zilla.org. why was gecko built? the original mozilla browser, first released as navigator 1.0, was developed rapidly by a small team that was passionate about creating the next killer app, and they succeeded. now that the web has evolved, a new generation layout engine was needed upon which future products could be built. gecko enables a pioneering new class of dynamic content that is more inter
active and offers greater presentation control to web developers, using open and recommended internet standards instead of proprietary apis. you are encouraged to join this team by getting involved. how does mozilla use gecko? gecko lies at the heart of mozilla and firefox browsers, as well as others, powering all of the individual components. gecko technologies will also power the display of the mozi...
...fferent vendors. they have been demanding that all vendors fully support the open standards listed above so that they can have a rich, powerful formatting system and object model at their disposal, and "write once, view anywhere." gecko's robust support for these standards makes gecko the platform of choice for web content and web application developers worldwide. ...
... a javabean wrapper is not currently under development, but there is nothing in gecko's architecture that precludes such development in the future. ...
...And 2 more matches
Example 1 - Learn web development
<span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...nd: #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> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relat...
... <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; pad...
...And 2 more matches
What’s in the head? Metadata in HTML - Learn web development
page title. but they are different things! the <h1> element appears on the page when loaded in the browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) the <title> element is metadata that represents the title of the overall html document (not the document's content.)
active learning: inspecting a simple example to start off this
active learning, we'd like you to go to our github repo and download a copy of our title-example.html page. to do this, either copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place. press the "raw" button on the github page, which causes the raw code to appear (pos...
...acter encoding to iso-8859-1, for example (the character set for the latin alphabet), your page rendering may appear all messed up: note: some browsers (e.g. chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem anyway. you should still set an encoding of utf-8 on your page anyway, to avoid any potential problems in other browsers.
active learning: experiment with character encoding to try this out, revisit the simple html template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to iso-8859-1, and add the japanese to your page. this is the code we used: <p>japanese example: ご飯が熱い。</p> adding an author and description many <meta> elements include nam...
...content management systems have facilities to automatically extract page author information and make it available for such purposes. specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.)
active learning: the description's use in search engines the description is also used on search engine result pages. let's go through an exercise to explore this go to the front page of the mozilla developer network. view the page's source (right/ctrl + click on the page, choose view page source from the context menu.) find the description meta tag. it will look something like this (although it ma...
...And 2 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
h tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. you can do this the same way you stop timeouts — by passing the identifier returned by the setinterval() call to the clearinterval() function: const myinterval = setinterval(myfunction, 2000); clearinterval(myinterval);
active learning: creating your own stopwatch! with this all said, we've got a challenge for you. take a copy of our setinterval-clock.html example, and modify it to create your own simple stopwatch. you need to display a time as before, but in this example, you need: a "start" button to start the stopwatch running. a "stop" button to pause/stop it. a "reset" button to reset the time back to 0. t...
...t executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in. it was created in response to perceived problems with setinterval(), which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the
active tab or the animation is scrolled off the page, etc. (read more about this on creativejs.) note: you can find examples of using requestanimationframe() elsewhere in the course — see for example drawing graphics, and object building practice. the method takes as an argument a callback to be invoked before the repaint. this is the general pattern you'll see it used in: function draw() { /...
...lues like "128000 degrees". if (rotatecount > 359) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line. this is the key to the whole operation — you are setting the variable defined earlier to an
active requestanimation() call, which takes the draw() function as its parameter. this starts the animation off, constantly running the draw() function at a rate as near 60 fps as possible. raf = requestanimationframe(draw); below the draw() function definition, add a call to the the draw() function to start the animation. draw(); note: you can find the finished example live on github. ...
...And 2 more matches
Test your skills: Conditionals - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...s. to finish off, you should then add another test that checks whether season contains the string "winter", and again assigns an appropriate string to response. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. conditionals 2 for this task you are given three variables: machine
active — contains an indicator of whether the answer machine is switched on or not (true/false) score — contains your score in an imaginary game. this score is fed into the answer machine, which provides a response to indicate how well you did. response — begins uninitialized, but is later used to store a reponse that will be printed to the output panel. you need to create an if...else structu...
... some things, but it's a pretty bad score. needs improvement." score of 40 to 69 — "you did a passable job, not bad!" score of 70 to 89 — "that\'s a great score, you really know your stuff." score of 90 to 100 — "what an amazing score! did you cheat? are you for real?" try updating the live code below to recreate the finished example. after you've entered your code, try changing machine
active to true, to see if it works. download the starting point for this task to work in your own editor or in an online editor. conditionals 3 in this task you need to take the code you wrote for the second task, and rewrite the inner if...else if...else to use a switch statement instead. try updating the live code below to recreate the finished example: download the starting point for this...
...And 2 more matches
Server-side web frameworks - Learn web development
your site. web security: some web frameworks provide better support for handling common web attacks. django for example sanitises all user input from html templates so that user-entered javascript cannot be run. other frameworks provide similar protection, but it is not always enabled by default. there are many other possible factors, including licensing, whether or not the framework is under
active development, etc. if you're an absolute beginner at programming then you'll probably choose your framework based on "ease of learning". in addition to "ease of use" of the language itself, high quality documentation/tutorials and an
active community helping new users are your most valuable resources. we've chosen django (python) and express (node/javascript) to write our examples later on in the...
...nu links (named things like "documentation, guide, api reference, getting started", etc.). can you see topics showing how to set up url routing, templates, and databases/models? are the documents clear? navigate to mailing lists for each site (accessible from community links). ...
...there are many other great server-side frameworks that you can discover using a basic internet search. ...
...And 2 more matches
Componentizing our Svelte app - Learn web development
ler subcomponents. both approaches should complement each other, and help you decide how to better organize your components. eventually, we will split up our app into the following components: alert.svelte: a general notification box for communicating actions that have occurred. newtodo.svelte: the text input and button that allow you to enter a new todo item. filterbutton.svelte: the all,
active, and completed buttons that allow you to apply filters to the displayed todo items. todosstatus.svelte: the "x out of y items completed" heading. todo.svelte: an individual todo item. each visible todo item will be displayed in a separate copy of this component. moreactions.svelte: the check all and remove completed buttons at the bottom of the ui that allow you to perform mass actions on the ...
...ilter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === '
active'} aria-pressed={filter === '
active'} on:click={()=> filter = '
active'} > <span class="visually-hidden">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</spa...
... the filterbutton component will receive an onclick handler from its parent. 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. we will just declare the onclick prop assigning a dummy handler to prevent errors, like this: export let onclick = (clicked) => {} and we'll declare the following re
active statement — $: onclick(filter) — to call the onclick handler whenever the filter variable is updated. the <script> section of our filterbutton component should end up looking like this — update it now: <script> export let filter = 'all' export let onclick = (clicked) => {} $: onclick(filter) </script> now when we call filterbutton inside todos.svelte we'll need to speci...
...And 2 more matches
Handling common accessibility problems - Learn web development
to be focused (including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details). this allows us to tab to the buttons, but not to activate them via the enter/return key. ...
... note: this technique will only work if you set your original event handlers via event handler properties (e.g. onclick). addeventlistener won't work. this is a lot of extra hassle to build the functionality back in. ...
... note: this technique will only work if you set your original event handlers via event handler properties (e.g. onclick). addeventlistener won't work. this is a lot of extra hassle to build the functionality back in. and there's bound to be other problems with it. ...
...And 2 more matches
IME handling guide
systems or speech input systems on some platforms. if ime is available on focused elements, we call that state "enabled". if ime is not fully available(i.e., user cannot enable ime), we call this state "disabled". if ime is enabled but users use direct input mode (e.g., for inputting latin characters), we call it "ime is closed". otherwise, we call it "ime is open". (fyi: "open" is also called "
active" or "turned on". "closed" is also called "in
active" or "turned off") so, this document is useful when you're try to fix a bug for text input in gecko. composition string and clauses typical japanese ime can input two or more words into a composition string. when a user converts from hiragana characters to chinese characters the composition string, japanese ime separates the composition string ...
...oes not make sense. the result is always same as the result of querying contents at receiving this notfication. notify_ime_of_blur when an imecontentobserver instance ends observing the focused editor, this is sent to widget synchronously because assumed that this notification causes neither query content events nor composition events. if widget wants notifications even while all windows are de
active, imecontentobserver doesn't end observing the focused editor. i.e., in this case, notify_ime_of_focus and notify_ime_of_blur are not sent to widget when a window which has a composition is being activated or deactivated. when widget wants notifications during de
active, widget includes notify_during_de
active to the result of nsiwidget::getimeupdatepreference(). if this notification is tried to s...
...field has focus, mimestate may be enabled. when you need to check if a password field has focus for security reasons, you should use inputcontext::ispasswordeditor(). the other is ime open state: dont_change_open_state the open state of ime shouldn't be changed. i.e., gecko should keep the last ime open state. open open ime. this is specified only when ime-mode of the new focused element is
active. close close ime. this is specified only when ime-mode of the new focused element is in
active. e.g., on linux, applications cannot manage ime open state. on such platforms, this is ignored. ime open state should be changed only when nsiwidget::setinputcontext() is called at dom focus change because changing ime open state while an editor has focus makes users confused. the reason why nsiwi...
...And 2 more matches
nsIApplicationCache
nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) each application cache has a unique client id for use with nsicacheservice.opensession() method, to access the cache's entries. each entry in the cache can be marked with a set of types, specified in the constants section. all application caches with the same group id belong to a cache group. each group has one "
active" cache that will service future loads. in
active caches are removed from the cache when no longer referenced. method overview void activate(); void addnamespaces(in nsiarray namespaces); void discard(); void gatherentries(in pruint32 typebits, out unsigned long count, [array, size_is(count)] out string keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring key); unsigned...
...read only. clientid acstring the client id for this application cache. clients can open a session with nsicacheservice.createsession() using this client id and a storage policy of store_offline to access this cache. read only. groupid acstring the group id for this cache group. this is the uri of the cache manifest...
...ng keys); nsiapplicationcachenamespace getmatchingnamespace(in acstring key); unsigned long gettypes(in acstring key); void initashandle(in acstring groupid, in acstring clientid); void markentry(in acstring key, in unsigned long typebits); void unmarkentry(in acstring key, in unsigned long typebits); attributes attribute type description
active boolean true if the cache is the
active cache for this group, otherwise false. read only. clientid acstring the client id for this application cache. clients can open a session with nsicacheservice.createsession() using this client id and a storage policy of store_offline to access this cache. read only. groupid acstring the group id for this cache group. this is the uri of the cache manifest file. read only. usage unsigned long ...
...And 2 more matches
nsITextInputProcessor
it returns true. getmodifierstate() getting modifier state. this is similar to keyboardevent.getmodifierstate() [en-us]. the result is the modifier state of managed by the instance. boolean getmodifierstate(in domstring amodifierkeyname); parameters amodifierkeyname a modifier key name which is defined by dom level 3 keyboardevents key values. return value true if the modifier state is
active. otherwise, false. keydown() dispatches a keydown event and some keypress event when all of or some of them are necessary. when this dispatches a normal modifier key event, the textinputprocessor instance activates the modifier state and stores its code attribute value. when this dispatches a lockable modifier key event, the textinputprocessor instance activates the modifier state or if the m...
.... each nsitextinputprocessor instance manages modifier state internally and uses the state when it initializes a keyboardevent instance before dispatching it. activating normal modifier state when keydown() is called with normal modifier key (i.e., not lockable like capslock) event, the instance stores the modifier key and code values. stored modifier key information means that the modifier is
active. inactivating normal modifier state when keyup() is called with normal modifier key event, the instance checks if there is a stored modifier key whose key attribute and code attribute are the same as the event. if the same modifier key is stored, the instance forgets the key. this means that the modifier is inactivated. toggling lockable modifier state when keydown() is called with lockable m...
...e the same as the event. if the same modifier key is stored, the instance forgets the key. this means that the modifier is inactivated. toggling lockable modifier state when keydown() is called with lockable modifier key event, the instance checks if there is a stored modifier key whose key attribute and code attribute are the same as the event. if it's not stored, i.e., the modifier state is in
active, the instance stores the modifier key, otherwise forgets the key. examples of modifier state management var leftshiftkey = new keyboardevent("", { key: "shift", code: "shiftleft" }); var rightshiftkey = new keyboardevent("", { key: "shift", code: "shiftright" }); var shiftkeyonvirtualkeyboard = new keyboardevent("", { key: "shift", code: "" }); tip.keydown(leftshiftkey); // this activate...
...And 2 more matches
DevTools API - Firefox Developer Tools
s: theme {themedefinition|string} - the theme definition object or the theme identifier. showtoolbox(target [, toolid [, hosttype [, hostoptions]]]) opens a toolbox for given target either by creating a new one or activating an existing one. parameters: target {target} - the target the toolbox will debug. toolid {string} - the tool that should be activated. if unspecified the previously
active tool is shown. hosttype {string} - the position the toolbox will be placed. one of bottom, side, window, custom. see hosttype for details. hostoptions {object} - an options object passed to the selected host. see hosttype for details. return value: a promise that is fulfilled with the toolbox instance once it has been initialized and the selected tool is loaded. gettoolbox(target) fetch...
...t properties. toolbox.hosttype.bottom host type for the default toolbox host at the bottom of the browser window. toolbox.hosttype.side host type for the host at the side of the browser window. toolbox.hosttype.window host type for the separate toolbox window. toolbox.hosttype.custom host type for a custom frame host. methods getcurrentpanel() get the currently
active toolpanel. return value: the toolpanel object that was returned from toolpanel.build(). getpanel(toolid) get the toolpanel for given tool. parameters: toolid {string} - the tool identifier. return value: the toolpanel object if the tool with the given toolid is
active, otherwise undefined. getpanelwhenready(toolid) similar to getpanel() but waits for the tool to load first...
...w, toolbox) a method that builds the toolpanel for this tool. parameters: window {window} - the window object for frame the tool is being built into. toolbox {toolbox} - the toolbox the tool is being built for. return value: a toolpanel for the tool. onkey(panel, toolbox) optional. a method that is called when the keyboard shortcut for the tool is activated while the tool is the
active tool. parameters: panel {toolpanel} - the toolpanel for the tool. toolbox {toolbox} - the toolbox for the shortcut was triggered for. return value: undefined. properties the tooldefinition object can contain following properties. most of them are optional and can be used to customize the presense of the tool in the browser and the toolbox. id string, required. an unique identi...
...And 2 more matches
All keyboard shortcuts - Firefox Developer Tools
ble to the toolbox itself. after that there's one section for each tool, which lists the shortcuts that you can use within that tool. because access keys are locale-dependent, they're not documented in this page. opening and closing tools these shortcuts work in the main browser window to open the specified tool. the same shortcuts will work to close tools hosted in the toolbox, if the tool is
active. for tools like the browser console that open in a new window, you have to close the window to close the tool. command windows macos linux open toolbox (with the most recent tool activated) ctrl + shift + i cmd + opt + i ctrl + shift + i bring toolbox to foreground (if the toolbox is in a separate window and not in foreground) ctrl + shift + i or f...
...on the web console's command line. to close the web console, use the global toolbox shortcut of ctrl + shift + i (cmd + opt + i on a mac). 2. before firefox 55, the keyboard shortcut was ctrl + shift + q (cmd + opt + q on a mac). 3. starting in firefox 71. before firefox 66, the letter in this shortcut was s. toolbox these shortcuts work whenever the toolbox is open, no matter which tool is
active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between
active tool and settings. f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d ...
... up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down comment/uncomment line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is
active. command windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. command windows macos linux delete...
...And 2 more matches
AudioWorkletProcessor.process - Web APIs
depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block sizes). therefore, you must always check the size of the sample array rather than assuming a particular size. this size may even be allowed to change over time, so you mustn't look at just the first block and assume the sample buffers will always be the same size. syntax var is
activelyprocessing = audioworkletprocessor.process(inputs, outputs, parameters); parameters inputs an array of inputs connected to the node, each item of which is, in turn, an array of channels. each channel is a float32array containing 128 samples. for example, inputs[n][m][i] will access n-th input, m-th channel of that input, and i-th sample of that channel. each sample value is in range of...
...which is, in turn, an array of channels. each channel is a float32array containing 128 samples. for example, inputs[n][m][i] will access n-th input, m-th channel of that input, and i-th sample of that channel. each sample value is in range of [-1 .. 1]. the number of inputs and thus the length of that array is fixed at the construction of the node (see audioworkletnodeoptions). if there is no
active node connected to the n-th input of the node, inputs[n] will be an empty array (zero input channels available). the number of channels in each input may vary, depending on channelcount and channelcountmode properties. outputs an array of outputs that is similar to the inputs parameter in structure. it is intended to be filled during the execution of the process() method. each of the output ...
...utomation happening during the time represented by the current block, the array may contain a single value that is constant for the entire block, instead of 128 identical values. if the automation rate is "k-rate", the array will contain a single value, which is to be used for each of 128 frames. return value a boolean value indicating whether or not to force the audioworkletnode to remain
active even if the user agent's internal logic would otherwise decide that it's safe to shut down the node. the returned value lets your processor have influence over the lifetime policy of the audioworkletprocessor and the node that owns it. if the combination of the return value and the state of the node causes the browser to decide to stop the node, process() will not be called again. returning tru...
...And 2 more matches
VideoTrack - Web APIs
id read only a domstring which uniquely identifies the track within the media. ...
... id read only a domstring which uniquely identifies the track within the media. ...
... id read only a domstring which uniquely identifies the track within the media. ...
...And 2 more matches
Migrating from webkitAudioContext - Web APIs
ed = (src.playbackstate == src.finished_state); // new audiocontext code: var src = context.createbuffersource(); function endedhandler(event) { isfinished = true; } var isfinished = false; src.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. ...
... == src.finished_state); // new audiocontext code: var src = context.createbuffersource(); function endedhandler(event) { isfinished = true; } var isfinished = false; src.onended = endedhandler; the exact same changes have been applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. ...
...en applied to both audiobuffersourcenode and oscillatornode, so you can apply the same techniques to both kinds of nodes. removal of audiocontext.
activesourcecount the
activesourcecount attribute has been removed from audiocontext. if you need to count the number of playing source nodes, you can maintain the count by handling the ended event on the source nodes, as shown above. code using the
activesourcecount attribute of the audiocontext, like this snippet: var src0 = context.createbuffersource(); var src1 = context.createbuffersource(); // set buffers and other parameters... src0.start(0); src1.start(0); // some time later... ...
...And 2 more matches
Cognitive accessibility - Accessibility
functionality cannot be achieved in another way that would conform. this includes animated gifs, if the gif animates for more than 5 seconds. additional timing criteria to consider are: people who have cognitive or language limitations may need more time to read and to understand. for improved usability remove any time limit. timed content should also be avoided, with exceptions for non-inter
active synchronized media and real-time events. people with attention deficit disorders should be able to focus on content without distractions. the user should be able to postpone or suppress interruptions, except situations involving altering a person to an emergency. this provides access to people with cognitive disabilities by enabling them to focus on the main purpose of the content. enable the us...
... to find what they need. others may prefer to explore the site in a sequential manner, moving from page to page in order to best understand the site's layout, content, and concepts. ability to bypass blocks of content providing a mechanism, such as a skiplink, to bypass blocks of content that are repeated on multiple web pages. focus order makes sense the order of focus for inter
active elements should make sense. to achieve this, the dom order should match the visual order, which in turn should match the tabbing order. if the tab order jumps around, especially in a way that does not match the visual order when navigating with a keyboard, users can become disoriented. focused elements should be visibly focused when a user navigates using a keyboard, the ui should make it obvio...
...n language (such as latin), explain its meaning. also, consider using ruby text for initialism (pronunciation of acronyms). reading level content should be written as clearly and simply as possible. a good rule to go by is to make content simple enough that it can be understood the first time. methods to achieve this include: using short, simple words. writing short sentences. using
active voice in the present tense. using correct grammar and spelling. it helps users with cognitive disabilities to provide a text summary (sometimes referred to as a tl;dr; [too long, didn't read]) at a low reading level. another technique you can use is providing accompanying visuals to help explain ideas, events, and processes. there are tools that can rate the level of your content. for example...
...And 2 more matches
Keyboard - Accessibility
be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible. focusable elements should have inter
active semantics if an element can be focused using the keyboard, then it should be inter
active; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an inter
active context (such as role="application"). in su...
... user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). note: one important exception to this rule is if the element has role="document" applied to it, inside an inter
active context (such as role="application"). in such a case, focusing the nested document is the only way of returning assistive technology to a non-inter
active state (often called "browse mode"). most inter
active elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. however, you should only add tabindex if you have also made the element inter
active, for example, by defining appropriate event handlers keyboard events. see also tabindex global html attribute global event handlers: onkeydo...
... when the focus order differs from the logical order of the page. a better strategy is to structure the html document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values. see also tabindex global html attribute understanding focus order don't use tabindex greater than 0 clickable elements must be focusable and should have inter
active semantics if an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it. an element is clickable if it has an onclick event handler defined. you can make it focusable by adding a tabindex=0 attribute value to it. you can make it operable with the keyboard by defining a...
...And 2 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. by default, html buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with css. the source for this inter
active example is stored in a github repository. ...
... element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. by default, html buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with css. the source for this inter
active example is stored in a github repository. ...
...ywhere in a document for accessible, standard button functionality. by default, html buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with css. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, inter
active content, listed, labelable, and submittable form-associated element, palpable content. permitted content phrasing content but there must be no inter
active content tag omission none, both the starting and ending tag are mandatory. permitted parents a...
...And 2 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create inter
active controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. the <input> element is one of the most powerful and complex in all of html due to the sheer number of combinations of input types and attributes. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. <input> types how an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. if this attribut...
... button a push button with no default behavior displaying the value of the value attribute, empty by default. <input type="button" name="button" /> checkbox a check box allowing single values to be selected/deselected. <input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when
active in supporting browsers. <input type="color" name="color"/> html5 date a control for entering a date (year, month, and day, with no time). opens a date picker or numeric wheels for year, month, day when
active in supporting browsers. <input type="date" name="date"/> html5 datetime-local a control for entering a date and time, with no time zon...
... <input type="datetime-local" name="datetime-local"/> html5 email a field for editing an email address. ...
...And 2 more matches
window/utils - Archive of obsolete content
rid(window) returns the id of the specified window's outer window. this function wraps nsidomwindowutils.outerwindowid. parameters window : nsidomwindow the window whose outer window we are interested in. returns id: the outer window's id. ...
...window's outer window. this function wraps nsidomwindowutils.outerwindowid. parameters window : nsidomwindow the window whose outer window we are interested in. returns id: the outer window's id. ...
...rwindowid. parameters window : nsidomwindow the window whose outer window we are interested in. returns id: the outer window's id. ...
...uire('sdk/window/utils'); var
active = utils.getmostrecentbrowserwindow();
active instanceof ci.nsixulwindow // => false utils.getxulwindow(
active) instanceof ci.nsixulwindow // => true parameters window : nsidomwindow returns nsixulwindow getbasewindow(window) returns the nsibasewindow for the given nsidomwindow: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var
active = utils.getmostrecentbrowserwindow();
active instanceof ci.nsibasewindow // => false utils.getbasewindow(
active) instanceof ci.nsibasewindow // => true parameters window : nsidomwindow returns nsibasewindow gettoplevelwindow(window) returns the toplevel nsidomwindow for the given child nsidomwindow: var { ci } = require('chrome'); var utils = require('sdk/window/utils'); var browserwindow ...
Modifying the Page Hosted by a Tab - Archive of obsolete content
sics of jpm. to modify the page hosted by a particular tab, load one or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web content. here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").
activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the
active tab and loads a script into the page hosted by the
active tab. the sc...
...ot contentscript, whose value is a url pointing to one or more content script files. for example, if we save the script above under the add-on's data directory in a file called my-script.js: var self = require("sdk/self"); var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").
activetab.attach({ contentscriptfile: self.data.url("my-script.js") }); } }); you can load more than one script, and the scripts can interact directly with each other. so you can load jquery, and then your content script can use that. loading several content script files the data assigned to contentscriptfile can be a vector. scripts will be loaded in the same order as the vector. in th...
...scripts, first.js & second.js. both scripts will be executed in the same context, so everything publicly defined in first.js will be accessible from second.js. // index.js var self = require("sdk/self"); var tabs = require("sdk/tabs"); require("sdk/ui/button/action").actionbutton({ id: "load-several", label: "load several scripts", icon: "./icon-16.png", onclick: function () { tabs.
activetab.attach({ contentscriptfile: [self.data.url('first.js'), self.data.url('second.js')] }); } }); communicating with the content scripts your add-on script and content scripts can't directly access each other's variables or call each other's functions, but they can send each other messages. to send a message from one side to the other, sender calls port.em...
... injecting css unlike the page-mod api, tab.attach() doesn't enable you to inject css directly into a page. to modify the style of a page, you have to use javasc...
Tamarin build documentation - Archive of obsolete content
documentation. supported platforms tamarin currently supports the following operating systems and/or architectures. windows 32 and 64 bit mac osx 10.4, 10.5 on ppc mac osx 10.5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
active development source resides at tamarin redux. in this document replace instances of tamarin-central with tamarin-redux to operate in the redux repository. use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-central tamarin-central tips for working with mercurial can be found here. building tamarin building tamarin will create all th...
... scalability. *important* project-specific settings for the cdt indexer do not appear to work (it looks like a bug in eclipse), so you have to set these manually/globally. what we want is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor). to enable this go to eclipse preferences >> c/c++ >> indexer, then select 'use
active build configuration' in the 'build configuration for the indexer' section. importing the project into eclipse file >> import >> general >> existing projects into workspace click next the root directory should be the full path to your top-level tamarin-redux directory ensure the 'avmshell-project' project is checked in the 'projects' list uncheck 'copy projects into workspace' click fini...
...obe actionscript compiler. the source code for the actionscript compiler, asc, has been open sourced as part of adobe flex®. this compiler is written in java and will require the installation of a java™ 1.4 or later jdk. a prototype self-hosting ecmascript edition 4 compiler, esc, is provided with tamarin but it is not yet capable of bootstrapping itself or building applications. esc is under
active development and will be able to generate tamarin applications later this year. use the following steps to build and install the actionscript compiler. download and build the asc source code using the subversion client $ svn co http://opensource.adobe.com/svn/open...box/asc-redux/ asc $ cd asc/build/java $ ant ... jar: [jar] building jar asc\lib\asc.jar $ cd ../.. $ java -jar lib/asc...
...bc hello, world use the -help options of asc.jar and avmshell for more details. running tamarin tests see running tamarin acceptance tests and running tamarin performance tests building tamarin windows mobile utilities the tamarin windows mobile utilities allows the existing acceptance and performance testsuites to be run on a windows mobile device connected to a windows desktop machine by
activesync or windows mobile device center (for windows vista and windows 7). setup and run
activesync or windows mobile device center. you should be connected and able to see the devices file system in windows explorer in tamarin repository go to the utils/wmremote directory, open the ceremoteshell2008.sln file in visual studio 2008 build all targets in release mode (for more information see u...
XUL accessibility guidelines - Archive of obsolete content
monly used assistive technologies, and special accessibility features built into the xul languages. most of all, accessibility requires a conscious effort on your part, and a desire to include everyone. 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. in addition, there is an
active community of accessibility developers within the mozilla project that will be happy to help you with any concerns or questions you have in regards to making your xul applications fully accessible. there is also a xul accessibility tool which can help test some of these guidelines, but please be aware that no tool can replace human judgement for accessibility, and understanding the guidelines is ...
...ing code. it can also be set programmatically with the tabindex attribute if needed, but this should be done sparingly and thoroughly tested whenever it is used. the navigation order should be logical, generally left to right, top to bottom. navigation order may vary depending on the nature of the application or the reading direction of the language. ensure that tab order is logical and all inter
active elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not keyboard accessible, consistent with the standard tree behavior on most contemporary...
...o flag alerts. avoid using audio or visual alerts alone to signal urgent events. users who have audio turned down or off and users who are deaf or hard of hearing may not be able to recognize audio only alerts. users with visual disabilities will not be able to observe alerts that are purely visual (unless such alerts are presented in functional text that is accessible to a screen reader). inter
active elements avoid small targets, which are difficult to see and click on. verify that the layout and contrast is sufficient to distinguish inter
active elements one from another and from static portions of the application. error recovery when the user causes an error in an application allow for graceful recovery. for example, if the user provides letters where numbers are required in a form, this ...
...struction help documentation is provided including a description of keyboard shortcuts. help documentation is not provided or is incomplete. alerts alerts are displayed using the alert scripting function or the notificationbox element. alerts are conveyed visually or audibly, or use a method other than the alert scripting function or the notificationbox element. inter
active elements inter
active elements are sufficiently large and visible. inter
active elements are too small or not sufficiently contrasted from other parts of the application. error recovery alerts are presented when the user initiates an error. the user has the opportunity and instruction to fix the error. no error alerts exist, or inadequate instruction is provided. respo...
Archived Mozilla and build documentation - Archive of obsolete content
if you are a plug-in author, you may find this project saves you a lot of work! ant script to assemble an extension this ant script helps to package an extension archived spidermonkey docs this section contains old spidermonkey documentation. ...
...rview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. califiletype the califiletype interface provides information about a specific file type. chromeless [this project may not be
active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater. see the references section for information on creating extension in earlier browsers. creating a hybrid cd creating a microsummary a microsummary generator is a se...
...s article provides a list of them. drag and drop this section describes how to implement objects that can be dragged around and dropped onto other objects. dtrace dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on performance when not in use and very little when
active. probe data can be collected with scripts written in d (no, not that one). mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.5. embedding faq embedding mozilla in a java application using javaxpcom xulrunner ships with the javaxpcom component, which allows java c...
...ent for mozilla based browsers namely firefox, netscape 7.x/9.x and seamonkey. note that it is not included in the gecko-based browsers such as k-meleon, galeon and netscape 8.x. venkman has been provided as part of the mozilla install distribution since october 2001, as well as an extension package in xpi format. video presentations mozilla is
actively working to produce video presentations that can help you learn how the mozilla codebase works and how to take advantage of its technology in your own applications and extensions. this article is a jumping-off point to help you find those presentations. gecko - the smart embedding choice xbdesignmode.js xml in mozilla mozilla h...
Client-side form validation - Learn web development
// there are many ways to pick a dom node; here we get the form itself and the email // input box, as well as the span element into which we will place the error message. const form = document.getelementsbytagname('form')[0]; const email = document.getelementbyid('mail'); const emailerror = docu...
...message. emailerror.textcontent = 'entered value needs to be an e-mail address.'; } else if(email.validity.tooshort) { // if the data is too short // display the following error message. emailerror.textcontent = `email should be at least ${ email.minlength } characters; you entered ${ email.value.length }.`; } // set the styling appropriately emailerror.classname = 'error
active'; } the comments explain things pretty well, but briefly: every time we change the value of the input, we check to see if it contains valid data. if it has then we remove any error message being shown. if the data is not valid, we run showerror() to show the appropriate error. every time we try to submit the form, we again check to see if the data is valid. if so, we let the form submit. if ...
... // there are fewer ways to pick a dom node with legacy browsers const form = document.getelementsbytagname('form')[0]; const email = document.getelementbyid('mail'); // the following is a trick to reach the next sibling element node in the dom // this is dangerous because you can easil...
...the difficult part is to make it generic enough to use both cross-platform and on any...
Looping code - Learn web development
it running live on github (also view the full source code). important: with while and do...while — as with all loops — you must make sure that the initializer is incremented or, depending on the case, decremented, so the condition eventually becomes false. if not, the loop will go on forever, and either the browser will force it to stop, or it will crash. this is called an infinite loop.
active learning: launch countdown! in this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to blastoff. specifically, we want you to: loop from 10 down to 0. we've provided you with an initializer — let i = 10;. for each iteration, create a new paragraph and append it to the output <div>, which we've selected using const output = document.queryselector...
... the loop (for example (while(i>=0)), the browser might stuck because you have not yet entered the end condition. so be careful with this. you can start writing your code in a comment to deal with this issue and remove the comment after you finish. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. ...
...but it's not quite that easy — we don't want to let phil and lola in because they are greedy and rude, and always eat all the food! we have two lists, one for guests to admit, and one for guests to refuse. specifically, we want you to: write a loop that...
...mas, but they will be untidy — there will be a comma at the end of each one. can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? have a look at the useful string methods article for help. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. ...
Introduction to client-side frameworks - Learn web development
t of the web, used on 95% of all websites, and the web is an essential part of modern life. users write papers, manage their budgets, stream music, watch movies, and communicate with others over great distances instantaneously, with text, audio or video chat. the web allows us to do things that used to be possible only in native applications installed on our computers. these modern, complex, inter
active websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, inter
active applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be mai...
... in a user interface. other things frameworks give us let's look at some of the other advantages conferred upon us by frameworks. as we've alluded to before, the advantages of frameworks are achievable in vanilla javascript, but using a framework takes away all of the cognitive load of having to solve these problems yourself. tooling because each of the frameworks in this module have a large,
active community, each framework's ecosystem provides tooling that improves the developer experience. these tools make it easy to add things like testing (to ensure that your application behaves as it should) or linting (to ensure that your code is error-free and stylistically consistent). note: if you want to find out more details about web tooling concepts, have a read of our client-side tooling ove...
...g 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. when routing is handled by a client application in this fashion, it is aptly called client-side routing. it's possible to make a router using the native capabilities of javascript and the browser, but popular,
actively developed frameworks have companion libraries that make routing a more intuitive part of the development process. things to consider when using frameworks being an effective web developer means using the most appropriate tools for the job. javascript frameworks make front-end application development easy, but they are not a silver bullet that will solve all problems. this section talks about ...
...me to learn and have their quirks. before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfortable with it as well. overengineering if your web development project is a personal portfolio with a few pages, and those pages have little or no inter
active capability, a framework (and all of its javascript) may not be necessary at all. that said, frameworks are not a monolith, and some of them are better-suited to small projects than others. in an article for smashing magazine, sarah drasner writes about how vue can replace jquery as a tool for making small portions of a webpage inter
active. larger code base and abstraction frameworks allow you t...
React interactivity: Editing, filtering, conditional rendering - Learn web development
editing ? editingtemplate : viewtemplate}</li>; your browser should render all your tasks just like before. to see the editing template, you will have to change the default isediting state from false to true in your code for now; we will look at making the edit button toggle this in the next section! toggling the <todo /> templates at long last, we are ready to make our final core feature inter
active. to start with, we want to call setediting() with a value of true when a user presses the "edit" button in our viewtemplate, so that we can switch templates. 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...
...: <form classname="stack-small" onsubmit={handlesubmit}> you should now be able to edit a task in your browser! back to the filter buttons now that our main features are complete, we can think about our filter buttons. currently, they repeat the "all" label, and they have no functionality! we will be reapplying some skills we used in our <todo /> component to: create a hook for storing the
active filter. render an array of <filterbutton /> elements that allow users to change the
active filter between all, completed, and incomplete. adding a filter hook add a new hook to your app() function that reads and sets a filter. we want the default filter to be all because all of our tasks should be shown initially: const [filter, setfilter] = usestate('all'); defining our filters our goal r...
...ch filter should have a unique name. each filter should have a unique behavior. a javascript object would be a great way to relate names to behaviors: each key is the name of a filter; each property is the behavior associated with that name. at the top of app.js, beneath our imports but above our app() function, let's add an object called filter_map: const filter_map = { all: () => true,
active: task => !task.completed, completed: task => task.completed }; the values of filter_map are functions that we will use to filter the tasks data array: the all filter shows all tasks, so we return true for all tasks. the
active filter shows tasks whose completed prop is false. the completed filter shows tasks whose completed prop is true. beneath our previous addition, add the following ...
...wing underneath your tasklist constant declaration: const filterlist = filter_names.map(name => ( <filterbutton key={name} name={name}/> )); now we'll replace the three repeated <filterbutton />s in app.js with this filterlist. replace the following: <filterbutton /> <filterbutton /> <filterbutton /> with this: {filterlist} this won't work yet. we've got a bit more work to do first. inter
active filters to make our filter buttons inter
active, we should consider what props they need to utilize. we know that the <filterbutton /> should report whether it is currently pressed, and it should be pressed if its name matches the current value of our filter state. we know that the <filterbutton /> needs a callback to set the
active filter. we can make direct use of our setfilter hook. upda...
Understanding client-side JavaScript frameworks - Learn web development
many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. ...
...our todomvc ember app, adding in the html for it, and then breaking that html structure into components. 3. ember interactivity: events, classes and state at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. along the way, we'll look at using events in ember, creating component classes to contain javascript code to control inter
active features, and setting up a service to keep track of the data state of our app. 4. ember interactivity: footer functionality, conditional rendering now it's time to start tackling the footer functionality in our app. here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been che...
...ly styling to completed todos (i.e. where the checkbox has been checked). we'll also wire up our "clear completed" button. along the way, we'll learn about using conditional rendering in our templates. 5. routing in ember in this article we learn about routing or url-based filtering as it is sometimes referred to. we'll use it to provide a unique url for each of the three todo views — "all", "
active", and "completed". 6. ember resources and troubleshooting our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information. vue tutorials note: vue tutorials last tested in may 2020, with vue 2.6.11. if you need to check your code against our version, you can find a finished version of the ...
...h guides focusing on four frameworks. three of them are very popular and well-established — react/reactdom, ember, and vue — whereas svelte is a comparative newcomer that shows a lot of promise and has gained a lot of recent popularity. there is a variety of reasons for this: they are popular choices that will be around for a while — like with any software tool, it is good to stick with
actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job. they have strong communities and good documentation. it is very important to be able to get help with learning a complex subject, especially when you are just starting out. we don't have the resources to cover all modern frameworks. that list woul...
Gecko info for Windows accessibility vendors
this faq explains how makers of windows screen readers, voice dictation packages and magnification software can support gecko-based software. the base of our support for these products is msaa (microsoft
active accessibility), external readonly dom support, and the keyboard api/user interface. definitions here are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications. ...
...re are some basic definitions that you'll need for this document to make sense: gecko: the rendering engine for firefox, thunderbird, nvu, mozilla seamonkey and other applications. gecko is the internal engine that mozilla uses to render any kind of web content. it supports html, xhtml, cascading style sheets (css) and the document object model (dom). microsoft
active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. if you seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.3. (i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the sou...
...face language the xml-based language used by firefox and mozilla to develop the ui. similar to html in that it can be combined with css and javascript to make powerful applications. contains more desktop-style widgets than html and follows a box layout model, rather than being text-flow based. ajax: asynchronous javascript and xml ajax is a method of building inter
active web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load. data is therefore stored and retrieved dynamically much faster. roles, states and events: please read the msaa documentation on msdn if you are unfamiliar with these. in general we abbre...
...le -- the first state change indicates the document pane is now busy loading. the second state change indicates the document pane has finished. when handling the event, use get_accstate() to check the state_busy flag. when the document has finished loading the busy flag will be cleared. msaa support: iaccessible methods to use msaa with gecko, you'll need the tools and docs that come with the
active accessibility 2.0 sdk tools. the method accessibleobjectfromwindow() will get you the root iaccessible corresponding to the top level window. hold on to this root iaccessible, and use it to walk through the entire tree of iaccessible's. iaccessible methods that we support: get_accparent get_accchildcount get_accchild get_accname get_accvalue get_accdescription get...
Roll your own browser: An embedding how-to
any simple examples of embedding mozilla? there are many examples of products already using gecko for embedding. here's a partial list. the sections marked 'mozilla examples' refer to clients and sample code to be found within the mozilla source tree. linux external projects sashxb: ibm uses mozilla to implement part of their sash development/desktop environment. part of the gnome effort.
activestate's komodo: development environment, based on mozilla's xul. (screenshot) light: very simple non-bloated gtk+ interface, familiar netscape 4.x keyboard shortcuts, context menus, etc. (screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror browser. uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebin...
...eld, menu bar, html area, supports ssl. windows external projects k-meleon browser: the windows answer to galeon. fast ie-look-alike browser, uses ie and ns bookmarking system, fast loading time, privacy features, java support and complete control of the menus and "hotkeys". implemented with mozilla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser. ...
...lla embedding apis. (screenshots) neoplanet browser: a gecko add-on for the neoplanet browser.
activestate's komodo: development environment, based on mozilla's xul. (screenshot) macromedia homesite html editor: internal browser for the homesite studio application is implemented by embedding mozilla. (mozilla blurb) bradsoft's topstyle css builder: implements an internal browser using mozilla
activex embedding control.obsolete since gecko 7.0 nxzilla: a set of libraries that allow mozilla to be used with a nanox server.
activex control: an
activex control allowing for embedding the gecko layout engine.obsolete since gecko 7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory. includes test applications that illustrate how to use it. versions f...
... library that allows you to embed gecko and render pages to memory. includes test applications that illustrate how to use it. versions for windows and mac with linux to follow. mozilla examples mfcembed: standard mozilla embedding example application for win32. basic browser, menus, toolbar, urlbar, html area. winembed: obsoleted by mfcembed. a bare-bones browser with urlbar and html area.
activex control: an
activex control for mozilla using the gecko layout engine. more information at 1 and 2. mac external projects
activestate's komodo: development environment, based on mozilla's xul. (screenshot) marbrow : mac port of x2web (ja, ko) embedding mozilla. mozilla examples ppembed: standard mozilla sample application implemented with metroworks' powerplant. camino: a project...
nsIDownloadManager
read only. cancleanup boolean whether or not there are downloads that can be cleaned up (removed) that is downloads that have completed, have failed or have been canceled. read only. datasource nsird...
...read only. ...
...read only. ...
... information about it, removedownload() removes all knowledge of it. also notifies observers of the "download-manager-remove-download" topic with the download id as the subject to allow any download manager consumers to react to the removal. void removedownload( in unsigned long aid ); parameters aid the unique id of the download. exceptions thrown ns_error_failure the download is
active. removedownloadsbytimeframe() removes all in
active downloads that were started inclusively within the specified time frame. void removedownloadsbytimeframe( in long long abegintime, in long long aendtime ); parameters abegintime the start time to remove downloads by in microseconds. aendtime the end time to remove downloads by in microseconds. removelistener() removes a listene...
nsIFocusManager
setting this to null or to a non-top-level window throws an ns_error_invalid_arg exception. focusedelement nsidomelement the element that is currently focused.
...setting this to null or to a non-top-level window throws an ns_error_invalid_arg exception. focusedelement nsidomelement the element that is currently focused. this will always be an element within th...
...in nsidomwindow awindow); native code only! void windowraised(in nsidomwindow awindow); native code only! void windowshown(in nsidomwindow awindow, in prbool aneedsfocus); native code only! attributes attribute type description
activewindow nsidomwindow the most
active (frontmost) window, or null if no window that is part of the application is
active. setting the
activewindow raises it, and focuses the current child window's current element, if any. setting this to null or to a non-top-level window throws an ns_error_invalid_arg exception. focusedelement nsidomelement the element that is currently focused. this will always be an element within the document loaded in focusedwindow or null if no element in that document is focuse...
... element, if any. setting this to null or to a non-top-level window throws an ns_error_invalid_arg exception. focusedelement nsidomelement the element that is currently focused. this will always be an element within the document loaded in focusedwindow or null if no element in that document is focused. read only. focusedwindow nsidomwindow the child window within the
activewindow that is focused. this will always be
activewindow, a child window of
activewindow or null if no child window is focused. setting the focusedwindow changes the focused window and raises the toplevel window it is in. if the current focus within the new focusedwindow is a frame element, then the focusedwindow will actually be set to the child window and the current element within that set as t...
Animation - Web APIs
the animation interface of the web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source. constructor animation() creates a new animation object instance. properties animation.currenttime the current time value of the animation in milliseconds, whether running or paused. if the animation lacks a timeline, is in
active or hasn't been played yet, its value is null. animation.effect gets and sets the animationeffectreadonly associated with this animation. this will usually be a keyframeeffect object. animation.finished read only returns the current finished promise for this animation. animation.id gets and sets the string used to identify the animation. animation.pending read only indicates whethe...
...ating playback or pausing a running animation. animation.playstate read only returns an enumerated value describing the playback state of an animation. animation.playbackrate gets or sets the playback rate of the animation. animation.ready read only returns the current ready promise for this animation. animation.replacestate returns the replace state of the animation. this will be
active if the animation has been replaced, or persisted if animation.persist() has been invoked on it. animation.starttime gets or sets the scheduled time when an animation's playback should begin. animation.timeline gets or sets the timeline associated with this animation. event handlers animation.oncancel gets and sets the event handler for the cancel event. animation.onfinish gets a...
...s playback should begin. animation.timeline gets or sets the timeline associated with this animation. event handlers animation.oncancel gets and sets the event handler for the cancel event. animation.onfinish gets and sets the event handler for the finish event. animation.onremove allows you to set and run an event handler that fires when the animation is removed (i.e., put into an
active replace state). methods animation.cancel() clears all keyframeeffects caused by this animation and aborts its playback. animation.commitstyles() commits the end styling state of an animation to the element being animated, even after that animation has been removed. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style att...
...ep them. you can see this in action in our simple replace indefinite animations demo. the related javascript features are: animation.commitstyles() for commiting the end styling state of an animation to the element being animated, even after that animation has been removed. animation.onremove for setting and running an event handler that fires when the animation is removed (i.e., put into an
active replace state). animation.persist() for when you explicitly want an animations to be retained. animation.replacestate to return the replace state of the animation. this will be
active if the animation has been removed, or persisted if persist() has been invoked. accessibility concerns blinking and flashing animation can be problematic for people with cognitive concerns such as attention defi...
Document.readyState - Web APIs
the document.readystate property describes the loading state of the document. when the value of this property changes, a readystatechange event fires on the document object. syntax var string = document.readystate; values the readystate of a document can be one of following: loading the document is still loading. ...
...d loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading. complete the document and all sub-resources have finished loading. the state indicates that the load event is about to fire. examples different states of readiness switch (document.readystate) { case "loading": // the document is still loading. break; case "inter
active": // the document has finished loading. we can now access the dom elements. // but sub-resources such as images, stylesheets and frames are still loading. var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. console.log("the first css rule is: " + d...
... element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. ...
... living standard html 5.1the definition of 'document readiness' in that specification. recommendation html...
Document - Web APIs
title of the current document. document.urlread only returns the document location as a string. properties included from documentorshadowroot the document interface includes the following properties defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them directly on the document interface. documentorshadowroot.
activeelementread only returns the element within the shadow tree that has focus. document.fullscreenelementread only the element that's currently in full screen mode for this document. documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another ...
... running, though not nessarilty started. globaleventhandlers.ontransitionstart an eventhandler called when a transitionstart event is sent, indicating that a css transition has started transitioning. globaleventhandlers.onwaiting is an eventhandler representing the code to be called when the waiting event is raised. deprecated properties document.alinkcolor returns or sets the color of
active links in the document body. document.all provides access to all elements in the document — it returns an htmlallcollection rooted at the document node. this is a legacy, non-standard property and should not be used. document.applets read only returns an ordered list of the applets within a document. document.bgcolor gets/sets the background color of the current document. document...
...ure fired when when an element captures a pointer using setpointercapture(). also available via the ongotpointercapture property. lostpointercapture fired when a captured pointer is released. also available via the onlostpointercapture property. pointercancel fired when a pointer event is canceled. also available via the onpointercancel property. pointerdown fired when a pointer becomes
active. also available via the onpointerdown property. pointerenter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. also available via the onpointerenter property. pointerleave fired when a pointer is moved out of the hit test boundaries of an element. also available via the onpointerleave property. pointerlockchange fired when the pointer is ...
...ges coordinates. also available via the onpointermove property. pointerout fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). also available via the onpointerout property. pointerover fired when a pointer is moved into an element's hit test boundaries. also available via the onpointerover property. pointerup fired when a pointer is no longer
active. also available via the onpointerup property. selection events selectionchange fired when the current text selection on a document is changed. also available via the onselectionchange property. selectstart fired when the user begins a new selection. also available via the onselectstart property. touch events touchcancel fired when one or more touch points have been disrupted in a...
EffectTiming.fill - Web APIs
the web animations api's effecttiming dictionary's fill property specifies a fill mode, which defines how the element to which the animation is applied should look when the animation sequence is not
actively running, such as before the time specified by iterationstart or after animation's end time. for example, setting fill to "none" means the animation's effects are not applied to the element if the current time is outside the range of times during which the animation is running, while "forwards" ensures that once the animation's end time has been passed, the element will continue to be drawn in the state it was in at its last rendered frame. note that authors are discouraged from using fill modes to persist the effect of an animation indefinitely. see the alternatives to fill mode...
...t of timing properties including fill. the value of fill corresponds directly to fill in effecttiming objects returned by gettiming() in animationeffect and keyframeeffect. 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). the default is "auto". "none" the animation's effects are only visible while the animation is iterating or its playhead is positioned over an iteration. the animation's effects are not visible when its playstate is pending with a delay, when its playstate is finished, or during its enddelay or delay. in other words, if the animation isn't...
... "forwards" the affected element will continue to be rendered in the state of the final animation framecontinue to be applied to the after the animation has completed playing, in spite of and during any enddelay or when its playstate is finished. ...
... run, what state the element should be in before the animation begins and after it ends, and so forth. here we specify that the animation should take 2000 milliseconds (2 seconds) to complete, should only run once, and that the fill mode should be "none". as defined above, the "none" fill mode means that the element will be rendered in its natural, unaltered condition anytime the animation isn't
actively running. document.getelementbyid("animatebutton").addeventlistener("click", event => { document.getelementbyid("box").animate( boxrotationkeyframes, boxrotationtiming ); }, false); the rest of the code is pretty simple: it adds an event listener to the "animate" button so that when it's clicked by the user, the box is animated by calling element.animate() on it, providing the boxr...
Element: click event - Web APIs
<div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). see this live example for a demonstration. see also safari's docs on making elements clickable and the definition of "clickable element". known workarounds for this bug: set cursor: pointer; on the element or any of its ancestors. add a dummy onclick="voi...
...ent delegation is being used). see this live example for a demonstration. see also safari's docs on making elements clickable and the definition of "clickable element". known workarounds for this bug: set cursor: pointer; on the element or any of its ancestors. add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>. ...
...tion. see also safari's docs on making elements clickable and the definition of "clickable element". known workarounds for this bug: set cursor: pointer; on the element or any of its ancestors. add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>. use a typically inter
active element (e.g., <a>) instead of one that isn't typically inter
active (e.g., <div>). stop using click event delegation. ...
... bug: set cursor: pointer; on the element or any of its ancestors. add a dummy onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>. use a typically inter
active element (e.g., <a>) instead of one that isn't typically inter
active (e.g., <div>). stop using click event delegation. safari mobile considers the following elements to be typically inter
active (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it. examples this example displays the number of consecutive clicks on a <button>. html <butto...
Using IndexedDB - Web APIs
error. if you don't specify anything for the second argument, you get a read-only transaction. since you want to write to it here you need to pass the "readwrite" flag. now that you have a transaction you need to understand its lifetime. transactions are tied very closely to the event loop. if you make a transaction and return to the event loop without using it then the transaction will become in
active. the only way to keep the transaction
active is to make a request on it. 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 callback. if you return to the event loop without extending the transaction then it will become in
active, and so on. as long as there are pending requests the tra...
... transactions can receive dom events of three different types: error, abort, and complete. ...
... transactions can receive dom events of three different types: error, abort, and complete. ...
...; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .note { font-size: smaller; } .destructive { background-color: orange; } .destructive:hover { background-color: #ff8000; } .destructive:
active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 16.0"], ['google chrome', ">= 24.0 (you may need to get google chrome canary), no blob storage support"] ]; var compat = $('#compat'); compat.empty(); compat.append('<ul id="compat-list"></ul>'); compat_envs.foreach(function(val, idx, array) { $('#compat-list').append...
KeyboardEvent - Web APIs
oup and is always encoded with the location dom_key_location_standard. examples include the digits on the numeric keypad, the keypad's enter key, and the decimal point on the keypad. properties this interface also inherits properties of its parents, uievent and event. keyboardevent.altkey read only returns a boolean that is true if the alt ( option or ⌥ on os x) key was
active when the key event was generated. keyboardevent.code read only returns a domstring with the code value of the physical key represented by the event. warning: this ignores the user's keyboard layout, so that if the user presses the key at the "y" position in a qwerty keyboard layout (near the middle of the row above the home row), this will always return "keyy", even if the user has a qwertz k...
...ition in a qwerty keyboard layout (near the middle of the row above the home row), this will always return "keyy", even if the user has a qwertz keyboard (which would mean the user expects a "z" and all the other properties would indicate a "z") or a dvorak keyboard layout (where the user would expect an "f"). keyboardevent.ctrlkey read only returns a boolean that is true if the ctrl key was
active when the key event was generated. keyboardevent.iscomposing read only returns a boolean that is true if the event is fired between after compositionstart and before compositionend. keyboardevent.key read only returns a domstring representing the key value of the key represented by the event. keyboardevent.locale read only returns a domstring representing a locale string indicating the lo...
...language. keyboardevent.location read only returns a number representing the location of the key on the keyboard or other input device. a list of the constants identifying the locations is shown above in keyboard locations. keyboardevent.metakey read only returns a boolean that is true if the meta key (on mac keyboards, the ⌘ command key; on windows keyboards, the windows key (⊞)) was
active when the key event was generated. keyboardevent.repeat read only returns a boolean that is true if the key is being held down such that it is automatically repeating. keyboardevent.shiftkey read only returns a boolean that is true if the shift key was
active when the key event was generated. methods this interface also inherits methods of its parents, uievent and event. keyboardevent.
... { // even though event.key is not 'control' (e.g., 'a' is pressed), // event.ctrlkey may be true if ctrl key is pressed at the same time. alert(`combination of ctrlkey + ${keyname}`); } else { alert(`key pressed ${keyname}`); } }, false); document.addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer
active, // so event.ctrlkey is false. if (keyname === 'control') { alert('control key was released'); } }, false); </script> </head> <body> </body> </html> specifications specification status comment ui eventsthe definition of 'keyboardevent' in that specification. working draft the keyboardevent interface specification went through numerous draft...
ServiceWorkerRegistration - Web APIs
interface of the service worker api represents the service worker registration. you register a service worker to control one or more pages that share the same origin. the lifetime of a service worker registration is beyond that of the serviceworkerregistration objects that represent them within the lifetime of their corresponding service worker clients. the browser maintains a persistent list of
active serviceworkerregistration objects. note: this feature is available in web workers. properties also implements properties from its parent interface, eventtarget. serviceworkerregistration.scope read only returns a unique identifier for a service worker registration. this must be on the same origin as the document that registers the serviceworker. serviceworkerregistration.installing rea...
...service worker registration. this must be on the same origin as the document that registers the serviceworker. serviceworkerregistration.installing read only returns a service worker whose state is installing. this is initially set to null. serviceworkerregistration.waiting read only returns a service worker whose state is installed. this is initially set to null. ...
...orker. serviceworkerregistration.installing read only returns a service worker whose state is installing. this is initially set to null. serviceworkerregistration.waiting read only returns a service worker whose state is installed. this is initially set to null. serviceworkerregistration.
active read only returns a service worker whose state is activated. this is initially set to null. an
active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration. serviceworkerregistration.pushmanager read only ret...
...cope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration. serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an
active subscription, and accessing push permission status. serviceworkerregistration.sync read only returns a reference to the syncmanager interface, which manages background synchronization processes. serviceworkerregistration.index read only returns a reference to the contentindex interface, for managing indexed content for offline viewing. unimplemented properties serviceworkerregistra...
WebGLRenderingContext.getProgramParameter() - Web APIs
eturns a glboolean indicating whether or not the program is flagged for deletion. gl.link_status: returns a glboolean indicating whether or not the last link operation was successful. gl.validate_status: returns a glboolean indicating whether or not the last validation operation was successful. gl.attached_shaders: returns a glint indicating the number of attached shaders to a program. gl.
active_attributes: returns a glint indicating the number of
active attribute variables to a program. gl.
active_uniforms: returns a glint indicating the number of
active uniform variables to a program. when using a webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is
active. ...
... return value returns the requested program information (as specified with pname). ...
... return value returns the requested program information (as specified with pname). ...
...hat specification. ...
Using the Web Animations API - Web APIs
manipulation by javascript. this api was designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects. it is one of the most performant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). with the web animations api, we can move inter
active animations from stylesheets to javascript, separating presentation from behavior. we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from properties to durations. for building custom animation libraries and creating interac...
...e to 4 seconds, like so: alicechange.currenttime = 4000; but while working on this animation, we might change alice’s duration a lot. wouldn’t it be better if we set her currenttime dynamically, so we don’t have to make two updates at a time? we can, in fact, do so by referencing alicechange’s animation.effect property, which returns an object containing all the details of the effect(s)
active on alice: alicechange.currenttime = alicechange.effect.getcomputedtiming().duration / 2; effect lets us access the animation’s keyframes and timing properties — alicechange.effect.getcomputedtiming() points to alice’s timing object (which is of type computedeffecttiming) — this contains her computedeffecttiming.duration. we can divide her duration in half to get the midpoint for her ani...
...run out of cake to eat or empty the bottle. which vignette players are presented with depends on how far along alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. ...
...ore or too small and cannot reach the key to open the door. we can figure out whether she's on the large end or small end of her animation by getting her animation's currenttime and dividing it by her
activeduration: var endgame = function() { // get alice's timeline's playhead location var aliceplayhead = alicechange.currenttime; var alicetimeline = alicechange.effect.getcomputedtiming().
activeduration; // stops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alicetimeline; if (aliceheight <= .333){ // alice got smaller! ... } else if (aliceheight >= .666) { // alice got bigger! ... } else { // alice didn't change significantly ... } } note: getanimations() and e...
Border-radius generator - CSS: Cascading Style Sheets
(elem[i]); } return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe } })(); window.addeventlistener("load", function() { borderradius.init(); }); var borderradius = (function borderradius() { function getelembyid(id) { return document.getelementbyid(id); } /** * shadow dragging */ var previewmousetracking = (function drag() { var
active = false; var lastx = 0; var lasty = 0; var subscribers = []; var init = function init(id) { var elem = getelembyid(id); elem.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return;
active = true; lastx = e.clientx; lasty = e.clienty; docum...
...m.addeventlistener('mousedown', dragstart, false); document.addeventlistener('mouseup', dragend, false); } var dragstart = function dragstart(e) { if (e.button !== 0) return;
active = true; lastx = e.clientx; lasty = e.clienty; document.addeventlistener('mousemove', mousedrag, false); } var dragend = function dragend(e) { if (e.button !== 0) return; if (
active === true) {
active = false; document.removeeventlistener('mousemove', mousedrag, false); } } var mousedrag = function mousedrag(e) { notify(e.clientx - lastx, e.clienty - lasty); lastx = e.clientx; lasty = e.clienty; } var subscribe = function subscribe(callback) { subscribers.push(callback); } var unsubscribe = function unsubscribe(callback) { var index =...
...own ' + 'unit-' + topic; this.container.appendchild(this.select); } unitselector.prototype.setvalue = function setvalue(value) { this.salect.value = value; } var radiuscontainer = function radiuscontainer(node) { var radius = document.createelement('div'); var handle = document.createelement('div'); var x = node.getattribute('data-x'); var y = node.getattribute('data-y'); var
active = false; this.id = node.id; this.node = node; this.radius = radius; this.handle = handle; this.width = 100; this.height = 50; this.size = 0; this.rounded = false; this.unitx = 0; this.unity = 0; this.unitr = 0; this.maxw = 100; this.maxh = 100; this.maxr = 100; this.topic = y + '-' + x; var sliderw = inputslidermanager.getnode(this.topic + '-w'); var sliderh...
...d(this)); if (x === 'left' && y == 'top') handle.classname = 'handle handle-top-left' if (x === 'right' && y == 'top') handle.classname = 'handle handle-top-right'; if (x === 'right' && y == 'bottom') handle.classname = 'handle handle-bottom-right'; if (x === 'left' && y == 'bottom') handle.classname = 'handle handle-bottom-left'; handle.addeventlistener("mousedown", function(e) {
active = true; this.radius.style.display = 'block'; previewmousetracking.subscribe(this.updatecontainer.bind(this)); }.bind(this)); document.addeventlistener("mouseup", function(e) { this.radius.style.display = 'none'; if (
active === true) previewmousetracking.unsubscribe(this.updatecontainer.bind(this)); }.bind(this)); inputslidermanager.subscribe(this.topic + '-w', this.setwi...
align-content - CSS: Cascading Style Sheets
this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
... this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
... this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
... this property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap). ...
HTML5 - Developer guides
r, without the need for a plugin or an external application. offline & storage offline resources: the application cache firefox fully supports the html5 offline resource specification. most others have offline resource support at some level. online and offline events firefox 3 supports whatwg online and offline events, which let applications and extensions detect whether or not there's an
active internet connection, as well as to detect when the connection goes up and down. whatwg client-side session and persistent storage (aka dom storage) client-side session and persistent storage allows web applications to store structured data on the client side. indexeddb indexeddb is a web standard for the storage of significant amounts of structured data in the browser and for high performance...
...webgl brings 3d graphics to the web by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements. svg an xml-based format of vectorial images that can directly be embedded in the html. performance and integration web workers allows delegation of javascript evaluation to background threads, allowing these activities to prevent slowing down inter
active events. xmlhttprequest level 2 allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. this is the technology behind ajax. jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance. history api allows the manipulation of the browser his...
...hronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. this is the technology behind ajax. jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance. history api allows the manipulation of the browser history. this is especially useful for pages loading inter
actively new information. the contenteditable attribute: transform your website to a wiki! html5 has standardized the contenteditable attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications. focus management in...
...the contenteditable attribute: transform your website to a wiki! html5 has standardized the contenteditable attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications. focus management in html the new html5
activeelement and hasfocus attributes are supported. web-based protocol handlers you can now register web applications as protocol handlers using the navigator.registerprotocolhandler() method. requestanimationframe allows control of animations rendering to obtain optimal performance. fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displa...
<a>: The Anchor element - HTML: Hypertext Markup Language
the html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address. content within each <a> should indicate the link's destination. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. attributes this element's attributes include the global attributes. downloadhtml5 prompts the user to save the linked url instead of navigating to it. can be used with or without a value: without a value, the browser will suggest a filename/extension, generated from various sources: the content-dispositi...
...ues. note: use the global attribute id instead. revobsolete since html5 specified a reverse link; the opposite of the rel attribute. deprecated for being very confusing. shapeobsolete since html5 the shape of the hyperlink’s region in an image map. note: use the <area> element for image maps instead. properties content categories flow content, phrasing content, inter
active content, palpable content. permitted content transparent, containing either flow content (excluding inter
active content) or phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements. implicit aria ...
...y useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious. webaim: "skip navigation" links how-to: use skip navigation links mdn / understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 size and proximity size inter
active elements, like links, should provide an area large enough that it is easy to activate them. this helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. a minimum size of 44×44 css pixels is recommended. text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is ...
...es and those using imprecise inputs such as a touchscreen. a minimum size of 44×44 css pixels is recommended. text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated. understanding success criterion 2.5.5: target size target size and 2.5.5 quick test: large touch targets proximity inter
active elements, like links, placed in close visual proximity should have space separating them. spacing helps people with motor control issues, who may otherwise accidentally activate the wrong inter
active content. spacing may be created using css properties like margin. hand tremors and the giant-button-problem specifications specification status comment referrer pol...
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
each embedded browsing context has its own session history and document. the browsing context that embeds the others is called the parent browsing context. the topmost browsing context — the one with no parent — is usually the browser window, represented by the window object. ...
... each embedded browsing context has its own session history and document. the browsing context that embeds the others is called the parent browsing context. the topmost browsing context — the one with no parent — is usually the browser window, represented by the window object. ...
......
...e title's value should concisely describe the embedded content: <iframe title="wikipedia page for avocados" src="https://en.wikipedia.org/wiki/avocado"></iframe> without this title, they have to navigate into the <iframe> to determine what its embedded content is. this context shift can be confusing and time-consuming, especially for pages with multiple <iframe>s and/or if embeds contain inter
active content like video or audio. specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added the referrerpolicy attribute. html living standardthe definition of '<iframe>' in that specification. living standard html5the definition of '<iframe>'...
<label> - HTML: Hypertext Markup Language
associating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. ...
... associating a <label> with an <input> element offers some major advantages: the label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. ...
..., and so can be styled in much the same way as a <span> or <a> element. you can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read. examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns inter
active content don't place inter
active elements such as anchors or buttons inside a label. doing so makes it difficult for people to activate the form input associated with the label. don't <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the <a href="terms-and-conditions.html">terms and conditions</a> </label> do <label for="tac"> <input id="tac" typ...
...our-name" name="your-name" type="text"> </label> buttons an <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. doing so may actually interfere with how assistive technology parses the button input. the same applies for the <button> element. technical summary content categories flow content, phrasing content, inter
active content, form-associated element, palpable content. permitted content phrasing content, but no descendant label elements. no labelable elements other than the labeled control are allowed. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding...
<video>: The Video Embed element - HTML: Hypertext Markup Language
the above example shows simple usage of the <video> element. ...
... the above example shows simple usage of the <video> element. ...
... the above example shows simple usage of the <video> element. ...
...s format (webvtt) webaim: captions, transcripts, and audio descriptions mdn understanding wcag, guideline 1.2 explanations understanding success criterion 1.2.1 | w3c understanding wcag 2.0 understanding success criterion 1.2.2 | w3c understanding wcag 2.0 technical summary content categories flow content, phrasing content, embedded content. if it has a controls attribute: inter
active content and palpable content. permitted content if the element has a src attribute: zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> or <video> else: zero or more <source> elements, followed by zero or more <track> elements, followed by transparent content that contains no media elements–that is no <audio> ...
HTML elements reference - HTML: Hypertext Markup Language
r experience. embedded content in addition to regular multimedia content, html can include a variety of other content, even if it's not always easy to interact with. element description <embed> the html <embed> element embeds external content at the specified point in the document. this content is provided by an external application or other source of inter
active content such as a browser plug-in. <iframe> the html inline frame element (<iframe>) represents a nested browsing context, embedding another html page into the current one. <object> the html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. <param> the ht...
...list> the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. <fieldset> the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form. <form> the html <form> element represents a document section containing inter
active controls for submitting information. <input> the html <input> element is used to create inter
active controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. <label> the html <label> element represents a caption for an item in a user interface. ...
... task, typically displayed as a progress bar. <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 feedback form. inter
active elements html offers a selection of elements which help to create inter
active user interface objects. element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. <dialog> the html <dialog> element represents a dialog box or other i...
... <menu> the html <menu> element represents a group of commands that a user can perform or activate. ...
Content negotiation - HTTP
s each of the representations, have a specific url. how a specific representation is chosen when the resource is called is determined by content negotiation and there are several ways of negotiating between the client and the server. the determination of the best suited representation is made through one of two mechanisms: specific http headers by the client (server-driven negotiation or pro
active negotiation), which is the standard way of negotiating a specific kind of resource. the 300 (multiple choices) or 406 (not acceptable) http response codes by the server (agent-driven negotiation or re
active negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. ...
...these headers describe the preferred choice of the user. the server uses them as hints and an internal algorithm chooses the best content to serve to the client. ...
...ser agent runs on (for example, if it is a desktop computer or a mobile device). even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks: the server doesn't have total knowledge of the browser. even with the client hints extension, it has not a complete knowledge of the capabilities of the browser. unlike re
active content negotiation where the client makes the choice, the server choice is always somewhat arbitrary. the information by the client is quite verbose (http/2 header compression mitigates this problem) and a privacy risk (http fingerprinting) as several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex. the accept header ...
...equest. this is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy concern. from the beginnings of http, the protocol allowed another negotiation type: agent-driven negotiation or re
active negotiation. in this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. the user is presented the resources and choose the one to use. unfortunately, the http standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. beside...
Performance budgets - Web Performance
quantity-based (e.g. amount of js files/total image size). rule-based (e.g. ...
... quantity-based (e.g. amount of js files/total image size). rule-based (e.g. pagespeed index, lighthouse score). their primary goal is to prevent regressions, but they can provide insights to forecast trends (i.e. on september, 50% of the budget was spent in a week). ...
...ent regressions, but they can provide insights to forecast trends (i.e. on september, 50% of the budget was spent in a week). additionally, it can uncover development needs (i.e. a large library with smaller alternatives is often picked to solve a common problem). how do i define a performance budget? a budget should include 2 levels: warning. error. the warning level allows you to be pro
active and plan any tech debt, while not blocking development or deploys. the error level is an upper bound limit, where changes will have a negative and noticeable impact. in order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into ...
...an upper bound limit, where changes will have a negative and noticeable impact. in order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into file-size budgets. a default baseline to reduce bounce rate is to achieve time to inter
active under 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user behavior. (i.e. how fast can users start reading), which will inform file specific budgets (e.g. fon...
Media - Progressive web apps (PWAs)
es css has some special properties for devices that support a user interface, like computer displays. these properties dynamically change the appearance of content as the user works with the interface. there are five special selectors: selector selects e:hover any e element that has the pointer over it e:focus any e element that has keyboard focus e:
active the e element that is involved in the current user action e:link any e element that is a hyperlink to a url that the user has not visited recently e:visited any e element that is a hyperlink to a url that the user has visited recently note: the information that can be obtained from the :visited selector is restricted in gecko 2.0. see privacy and the : visited s...
...fy these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. ...
...ke any other attributes, by using square brackets: [disabled] or [readonly]. ...
...; color:#black; border:2px outset #cec; padding: 5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:
active, .green-button.
active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button
active">click me</button></td> </tr> <tr style="line-height:25%;"> <td> </td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>
active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focu...
Content Scripts - Archive of obsolete content
this complete add-on illustrates all of these principles. its "main.js" attaches a content script to the current tab using the tabs module. in this case the content script is passed in as a string. the content script simply replaces the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = 'document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.
activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific url pattern. tabs: exports a tab object for working with a browser tab. the tab object includes an attach() function to attach a content script to the tab. page-worker: lets y...
...sages: 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. ...
...script a message called "my-addon-message", and listens for a response called "my-script-response": //main.js var tabs = require("sdk/tabs"); var buttons = require("sdk/ui/button/action"); var self = require("sdk/self"); buttons.actionbutton({ id: "attach-script", label: "attach the script", icon: "./icon-16.png", onclick: attachscript }); function attachscript() { var worker = tabs.
activetab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.on("my-script-response", function(response) { console.log(response); }); worker.port.emit("my-addon-message", "message from the add-on"); } // content-script.js self.port.on("my-addon-message", handlemessage); function handlemessage(message) { alert(message); self.port.emit("my-script-respons...
XUL Migration Guide - Archive of obsolete content
the jetpack wiki's collection of third party modules. accessing tabbrowser this example uses the action button api, which is only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. ...
... only available from firefox 29 onwards. the tabs/utils module gives you direct access to the tabbrowser object and the xul tab objects it contains. ...
...= require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").get
activetab(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: highlight
activetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require(). this is useful, because it means that if a malicious web page is able to inject code into your add-on's context, it is only able to use the apis you have i...
context-menu - Archive of obsolete content
ser's tabs, since tabs aren't related to the page or the node the user clicked to open the menu. the page context first of all, you may not need to specify a context at all. when a top-level item does not specify a context, the page context applies. an item that is in a submenu is visible unless you specify a context. the page context occurs when the user invokes the context menu on a non-inter
active portion of the page. try right-clicking a blank spot in this page, or on text. make sure that no text is selected. the menu that appears should contain the items "back", "forward", "reload", "stop", and so on. this is the page context. the page context is appropriate when your item acts on the page as a whole. it does not occur when the user invokes the context menu on a link, image, or other no...
...n("context", function (node) {' + ' console.log(node.nodename);' + ' return true;' + '});' }); the content script is executed for every page that a context menu is shown for. it will be executed the first time it is needed (i.e. when the context menu is first shown and all of the declarative contexts for your item are current) and then remains
active until you destroy your context menu item or the page is unloaded. handling menu item clicks in addition to using content scripts to listen for the "context" event as described above, you can use content scripts to handle item clicks. when the user clicks your menu item, an event named "click" is emitted in the item's content script. therefore, to handle an item click, listen for the "click" ev...
...nless your content script is extremely simple and consists only of a static string, don't use contentscript: if you do, you may have problems getting your add-on approved on amo. instead, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. ...
Implementing the widget - Archive of obsolete content
dget should activate or deactivate the annotator. on a right-click, the widget should display a list of all the annotations the user has created. because the widget's click event does not distinguish left and right mouse clicks, we'll use a content script to capture the click events and send the corresponding message back to our add-on. the widget will have two icons: one to display when it's
active, one to display when it's in
active. so there are three files we'll need to create: the widget's content script and its two icons. inside the data subdirectory create another subdirectory widget. we'll keep the widget's files here. this hierarchy isn't mandatory; you could just keep them all under data. but it seems tidier this way. the widget's content script the widget's content script just ...
...it creates the widget and responds to messages from the widget's content script by toggling its activation state. since we don't have any code to display annotations yet, we just log the right-click events to the console. now from the annotator directory type cfx run. you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, a...
...get's content script by toggling its activation state. since we don't have any code to display annotations yet, we just log the right-click events to the console. now from the annotator directory type cfx run. you should see the widget in the add-on bar: left- and right-clicks should produce the appropriate debug output, and a left-click should also change the widget icon to signal that it is
active. next we'll add the code to create annotations. ...
Enhanced Extension Installation - Archive of obsolete content
these include: the application profile directory <profile>/extensions/ the application install directory <application>/extensions/ any location specified in a text file with a {guid} name placed in one of the above locations, useful for develop...
...- the user requests an action through the ui while the application is running and metadata is written (tobeuninstalled, tobedisabled, tobeenabled) and a .autoreg file created in the profile so that on the subsequent startup the extension system's startup routine can remove files (in the uninstall case) and write a new extensions.ini file listing the directories for the currently "
active" items. ("
active" items are items that are enabled.) a whole new world install locations we have several targets for where items can be installed. these include: the application profile directory <profile>/extensions/ the application install directory <application>/extensions/ any location specified in a text file with a {guid} name placed in one of the above locations, useful for developing extensions at...
...e already effectively generalized the concept of an install location, we can make this set configurable by applications and extensions. to this end, we scan the category extension-install-locations as the extension system is started (after profile initialization) and add these to our internal set. extension metadata the following files are now used to hold metadata: <profile>/extensions.ini -
active items this file contains a list of
active extension directories (i.e. directories to extensions that are enabled only), to be used by the xredirprovider during startup to locate components, preferences and chrome manifests. the format here is similar to firefox 1.0 except there is no longer a count value that needs to be kept in sync with the number of lines... the file is written simply as ext...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
z-image-region css property is used. here are some examples of how the css for a toolbarbutton would look like on the 3 major platforms. this assumes that you've set the class xs-hw-toolbarbutton to all of your buttons. windows: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. ...
...="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. ...
...size="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0px, 16px, 16px, 0px); } linux: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. ...
Source code directories overview - Archive of obsolete content
source code for the qt toolkit, a c class library which runs on x-windows on unix, windows 95, windows 98 and window nt 4.0. photon contains source code for photon, a microkernel windowing system used in several real-time operating systems from qnx software systems ltd. seamonkey seamonkey is the development name for the mozilla browser suite. accessible contains code to support microsoft
active accessibility and sun's atk accessibility api for linux. browser contains the code for firefox. this will be covered below. build contains scripts (usually perl) and programs used by the mozilla build team for building and managing the mozilla code base. these programs coordinate the running of makefiles and the creation of the dist directory. calendar contains the code for the various mozilla...
...lds and text areas throughout the product. the editor is designed like a "browser window with editing features" with extra classes for editing text and managing undo/redo. embedding contains c interfaces and code for generic high-level browser functions (e.g. forward, back, history). the [#seamonkey-webshell webshell] code wraps these interfaces according to the particular platform and way (e.g.
activex) that is being supported. extensions contains c interfaces, c code, xul and javascript code for various add-ins that are related to browsing. these include: cookies, irc, wallet, dom inspector, p3p, schema validation, spellchecker, transformiix, typeaheadfind, javascript debugger, xforms, etc. gfx contains c interfaces and code for platform independent drawing and imaging. it can be used to dr...
... code serves to manipulate the individual content that it contains. for example, a scrolling view will find out the scroll bar positions and tell its content where to draw according the scroll bar thumbs. webshell contains c interfaces, c code, linux shell scripts and other files for embedding mozilla in other programs on various different platforms in various different ways (e.g. as plug-in, as
activex component, as xpcom classes). widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes. xpcom contains the low-level c interfaces, c code, c code, a bit of assembly code and command line tools for implementing the basic machinery of xpcom components (which stands for "cross platform component object model"). xpcom is t...
jspage - Archive of obsolete content
atform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.
activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; brows...
...getelementsbyclassname)?19:18);}}},browser||{});browser.platform[browser.platform.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new
activexobject("msxml2.xmlhttp"); },function(){return new
activexobject("microsoft.xmlhttp");});};browser.features.xhr=!!(browser.request());browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new
activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0...
...send:function(a){var b=this.get("send"); b.send({data:this,url:a||b.options.url});return this;}});request.html=new class({extends:request,options:{update:false,append:false,evalscripts:true,filter:false},processhtml:function(c){var b=c.match(/<body[^>]*>([\s\s]*?)<\/body>/i); c=(b)?b[1]:c;var a=new element("div");return $try(function(){var d="<root>"+c+"</root>",g;if(browser.engine.trident){g=new
activexobject("microsoft.xmldom"); g.async=false;g.loadxml(d);}else{g=new domparser().parsefromstring(d,"text/xml");}d=g.getelementsbytagname("root")[0];if(!d){return null;}for(var f=0,e=d.childnodes.length; f<e;f++){var h=element.clone(d.childnodes[f],true,true);if(h){a.grab(h);}}return a;})||a.set("html",c);},success:function(d){var c=this.options,b=this.response; b.html=d.stripscripts(function(e){b.j...
Mozilla Application Framework in Detail - Archive of obsolete content
ollections of images and css which can augment or replace your current ui elements. xul provides an excellent answer for organizations with heterogeneous computing environments. customized xul applications with significant business logic can be written once, and used on the range of platforms that exist within the organization. in addition, if the organization maintains sophisticated, inter
active websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications. in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets. don't feel limited by the widgets that the framework already contains! xbl (extensible binding language) allows you to expand your library of in...
...is easily embeddable and is open source, it and the rich web applications it supports will be usable on any supported platform or device. this will dramatically reduce the cost and complexity of developing and distributing rich web applications and full-functionality browsing devices that run them. by meeting the needs of developers and companies who are working to provide consumers with new inter
active applications, solutions and services, gecko will become a key catalyst for new growth and innovation and for delivering anytime, anywhere access to millions of new users. as the heart of a browser, the browser engine software component is responsible for interpreting and rendering the graphics, text and script on the web. with gecko, mozilla has cleanly separated the browser engine component from...
... embeddable: gecko's modular architecture enables developers to add or remove modules with little effort, fitting the software to the available hardware and adjusting functionality to match product requirements. gecko is implemented as a collection of xpcom components that can be easily added or removed. flexible programming interfaces such as the web shell api, the java wrapper api and the gecko
activex control make gecko easily embeddable into applications and devices. full browser functionality: gecko allows any desktop application as well as new devices, products and appliances to be web-enabled, with complete browser functionality. supported standards and features include data transport protocols, multilingual character data, image data, java and plugins. open source: gecko represents the...
Supporting private browsing mode - Archive of obsolete content
enabled. the theme looks different in this scenario. to determine whether or not the browser is permanently in private browsing mode, you can look at the privatebrowsingmode attribute on the document root. its value is "permanent" if private browsing is permanently enabled for the session, "temporary" if private browsing is temporarily enabled, or not defined at all if private browsing mode isn't
active. let docroot = document.documentelement; if (docroot.hasattribute("privatebrowsingmode")) { // private browsing mode is enabled } if (docroot.getattribute("privatebrowsingmode") == "temporary") { // private browsing mode is temporary } if (docroot.getattribute("privatebrowsingmode") == "permanent") { // private browsing mode is permanent for this session } turning private browsing on an...
...private browsing for plug-in authors plug-ins can detect whether or not private browsing mode is in eff...
...ivate browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvprivatemodebool variable. see supporting private browsing in plugins for details. amo policy and private browsing in order to publicly list an add-on on addons.mozilla.org, the add-on must properly respect private browsing mode by not recording sensitive data while private browsing mode is
active. this is a new policy that is just being implemented (as of february, 2010). note: during the transition period as this policy is put into effect, there is some leeway as well as a grace period. see this blog post by ehsan akhgari for details on the transition period. the following categories define what's considered "sensitive" data: the urls of pages the user has visited. the domains of...
Using Breakpoints in Venkman - Archive of obsolete content
n in figure 1, for example, uses the variable newsign to figure out what image to use for the fish. when you set a breakpoint at line 81, you can start animation on the web page in the browser window and see venkman stop execution as it enters the onflipx function. stopped there, venkman displays the value of the newsign variable as "1" in the local variables view. using breakpoints and the inter
active view, you can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code. for more information about the sorts of actions you can take in venkman when you're at a breakpoint, see the debugging basics section of the introductory venkman article. clearing breakpoints to clear the brea...
... if the breakpoint script generates an exception, venkman assumes you made a mistake and stops execution after displaying the exception. if you would like to see what your code does when exceptions are thrown at it, check "pass exceptions to caller", and thrown an exception from the breakpoint script. the log result checkbox tells venkman you want the result of the script to show up in the inter
active session view. when used with the continue regardless of result option, the breakpoint can be used as a simple log message. the number of times the breakpoint has been hit is passed in as a parameter to the breakpoint script. to reset the count, enter a 0 in the "trigger count" field. meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using ...
... facility called meta comments. meta comments are specially formatted comments that pull in the script named after the comment and specify how to treat the output of that script. the following meta comment types are available: the //@jsd_log comment will insert a breakpoint which is set to execute the script that follows without stopping. the result of the evaluation will be logged to the inter
active session. the //@jsd_break comment will insert a breakpoint which is set to execute the script that follows and stop if the result is true. the //@jsd_eval command will insert a breakpoint which is set to execute the script that follows without stopping and without logging the result. these meta comments can be used to insert debug-only code in your scripts with zero impact on production cod...
Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey
activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed colo...
... equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image in
activetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menu
active min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple n...
...kertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sort
active sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
Trees and Templates - Archive of obsolete content
case) is used to set the direction in which the column will be sorted by default. three values are possible: ascending the data is displayed is ascending order. descending the data is displayed is descending order. natural the data is displayed in natural order, which means the order the data is stored in the rdf datasource. ...
...isplayed in natural order, which means the order the data is stored in the rdf datasource. the final attribute, sort
active should be set to true for one column, the one that you would like to be sorted by default. the following example changes the columns in the earlier example to incorporate the extra features: <treecols> <treecol id="name" label="name" flex="1" primary="true" sort
active="true" sortdirection="ascending" sort="rdf:http://home.netscape.com/nc-rdf#name"/> <splitter/> <treecol id="date" label="date" flex="1" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treecols> persisting column state one additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. to do ...
...ons. to do this, we use the persist attribute on each treecol element. there are five attributes of columns that need to be persisted, to save the column width, the column order, whether the column is visible, which column is currently sorted and the sort direction. the following example shows a sample column: <treecol id="date" label="date" flex="1" persist="width ordinal hidden sort
active sortdirection" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> more details about the persist attribute will be described in the later section. additional rule attributes there are two additional attributes that can be added to the rule element that allow it to match in certain special circumstances. both are boolean attributes. iscontainer if this attr...
dialog - Archive of obsolete content
moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonaccesskeyaccept type: string the access key to use for the "accept" button. buttonaccesskeycancel type: string the access key to use for the "cancel" button. b...
...moreover this hides separator between titlebar and window contents. ...
...ndows (which however might or might not change soon, see bug 738797 and bug 1037225). defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter key is pressed. this should be set to one of the same values as those for the buttons attribute. in
activetitlebarcolor type: color string specify background color of the window's titlebar when it is in
active (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. title type: string the text to appear in the title bar of the window. properties buttons type: comma-separated list of the values below a comma-separated list of but...
prefwindow - Archive of obsolete content
moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonalign type: string the value of the align attribute for the box containing the buttons. buttondir type: string the value of the dir attribute for t...
...moreover this hides separator between titlebar and window contents. ...
...ndows (which however might or might not change soon, see bug 738797 and bug 1037225). defaultbutton type: string normally this attribute should not be set, but if it is, it specifies the default button in the dialog. typically, this means that the button will be activated when the enter key is pressed. this should be set to one of the same values as those for the buttons attribute. in
activetitlebarcolor type: color string specify background color of the window's titlebar when it is in
active (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. lastselected type: string set this to the id of the last selected pane. it will be opened by default the next time the preferences dialog is opened. onbeforeaccept ty...
treecol - Archive of obsolete content
on about the column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...xul tutorial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sort
active, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...e may still contain nested rows, although no indication will be given to the user. the attribute also controls whether the column picker allows the user to deselect this column. sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property. the property will usually be the same as that of the cell label. sort
active type: boolean this should be set to true for the column which should be sorted by default. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. nat...
Building XULRunner with Python - Archive of obsolete content
ten based on experiences with accessibility projects. see also xulrunner. or, if you are interested in working with xulrunner with python on linux, see mark lise's post with the python extensions enabled xulrunner provides python script access to the dom and xpcom in addition to the usual java script. this gives access to python features and modules and builds on mark hammond's pyxpcom work from
active state. xpcom components can also be created in python. currently (mar 07) python is not enabled by default so a custom build of mozilla is needed. this page provides instructions in the hope of eliminating much trial and error. you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibili...
...ies a release build that is not particularly suitable for debugging xulrunner itself. it uses the trunk (or latest) code in cvs so may be unstable. ...
...articularly suitable for debugging xulrunner itself. it uses the trunk (or latest) code in cvs so may be unstable. ...
Theme changes in Firefox 3.5 - Archive of obsolete content
ows in your theme, e.g. under the autoscroll icon or the identity panel. if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow css property to none on the affected element. browser.xul bug 463189 added a new attribute on the xul window element of browser.xul named browsingmode. ...
...the autoscroll icon or the identity panel. if you don't want the shadow, you can turn it off by setting the new -moz-window-shadow css property to none on the affected element. browser.xul bug 463189 added a new attribute on the xul window element of browser.xul named browsingmode. the value of this attribute is normal when the private browsing mode is in
active, and private when it's
active. ...
...wsing mode is in
active, and private when it's
active. this attribute can be used to style different parts of the browser window inside the private browsing mode. see this blog post for an example. supporting 3.5 features video/audio player: controlbar has to be styled (chrome://global/skin/media/videocontrols.css) shadow effect for disabled text using text-shadow. greying menus of in
active windows:
active windows get attribute '
active="true"'. to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([
active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tabbrowserbar. see private browsing for theme designers for details. nati...
Archive of obsolete content
of an xml document must be read from the javascript interpreter (like for web-apps languages or settings xml documents, for example). in these cases jxon could represent the most practical way. list of former mozilla-based applications the following is a list of all known applications that at one point used mozilla technologies or that are no longer being
actively maintained. list of mozilla-based applications the following is a list of all known
active applications that are built using mozilla technologies. this list is likely to be incomplete since we think there are many dark matter projects that we don't know about. if you have information about a new project or extra information about an existing ...
...s using workers in extensions this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface. ...
... standards project windows media in netscape netscape 7.1 has the ability to load the microsoft® windows media player™ as an
activex control, and thus developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer. netscape 7.1 will work with both the windows media player 6.4
activex control as well as versions 7 through 9. this article explains how to embed the windows media player
activex control in web pages to support netscape 7.1, how to control the windows media player
activex control using javascript and provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. xquery x...
Mobile touch controls - Game development
game — it can be controlled by two fingers, the left one moving the ship and the right one controlling the ship's gun. there's no multitouch or gestures — everything is handled by single pointer inputs. you can add more pointers to the game by using; this.game.input.addpointer up to ten pointers can be managed simultaneously. the most recently used pointer is available in the this.game.input.
activepointer object — the most recent finger
active on the screen. if you need to access a specific pointer, they are all available at, this.game.input.pointer1this.game.input.pointer2, etc. they are assigned dynamically, so if you put three fingers on the screen, then, pointer1pointer2, and pointer3 will be
active. removing the second finger, for example, won't affect the other two, and setting it ...
...ame.input.pointer1this.game.input.pointer2, etc. they are assigned dynamically, so if you put three fingers on the screen, then, pointer1pointer2, and pointer3 will be
active. 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. you can quickly get the coordinates of the most recently
active pointer via the this.game.input.x and this.game.input.y variables. input events instead of using the pointers directly it is also possible to listen for this.game.input events, like ondown, onup, ontap and onhold: this.game.input.ondown.add(itemtouched, this); function itemtouched(pointer) { // do something } the itemtouched() function will be executed when the ondown event is dispatched...
... way you'll be able to attach an event to any object in the game, like the player's ship, and react to the actions performed by the user. 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. implementation the easiest way to add an inter
active object that will listen for user input is to create a button: var buttonenclave = this.add.button(10, 10, 'logo-enclave', this.clickenclave, this); this one is formed in the mainmenu state — it will be placed ten pixels from the top left corner of the screen, use the logo-enclave image, and execute the clickenclave() function when it is touched. this will work on mobile and desktop out of the...
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
ver. you can also toggle voiceover on and off with fn+command + f5. voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
... voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
...plays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. ...
Getting started with CSS - Learn web development
color: red; } save your html and css files and reload the page in a web browser. the level one heading at the top of the document should now be red. if that happens, congratulations — you have successfully applied some css to an html document. if that doesn't happen, carefully check that you've typed everything correctly. you can continue to work in styles.css locally, or you can use our inter
active editor below to continue with this tutorial. the inter
active editor acts as if the css in the first panel is linked to the html document, just as we have with our document above. styling html elements by making our heading red we have already demonstrated that we can target and style an html element. we do this by targeting an element selector — this is a selector that directly matches an htm...
... directly matches an html element name. to target all paragraphs in the document you would use the selector p. to turn all paragraphs green you would use: p { color: green; } you can target multiple selectors at once, by separating the selectors with a comma. if i want all paragraphs and all list items to be green my rule looks like this: p, li { color: green; } try this out in the inter
active editor below (edit the code boxes), or in your local css document. changing the default behavior of elements when we look at a well-marked up html document, even something as simple as our example, we can see how the browser is making the html readable by adding some default styling. headings are large and bold and our list has bullets. this happens because browsers have internal stylesheets...
...nge the way it looks. a good example is our <ul>, an unordered list. it has list bullets, and if i decide i don't want those bullets i can remove them like so: li { list-style-type: none; } try adding this to your css now. the list-style-type property is a good property to look at on mdn to see which values are supported. take a look at the page for list-style-type and you will find an inter
active example at the top of the page to try some different values in, then all allowable values are detailed further down the page. looking at that page you will discover that in addition to removing the list bullets you can change them — try changing them to square bullets by using a value of square. adding a class so far we have styled elements based on their html element names. this works as lo...
Example 3 - Learn web development
ss="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // 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')...
...nction (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) {
activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); }); result ...
Example 4 - Learn web development
ss="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // 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')...
...reach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) {
activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); }); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.t...
Example 5 - Learn web development
<li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
...dding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // 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')...
...ion (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) {
activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } ...
Advanced text formatting - Learn web development
<dd>in drama, where a character shares a comment only with the audience for humorous or dramatic effect. this is usually a feeling, thought, or piece of additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl>
active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field. you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to s...
...html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote> <p>the quote element — <code><q></code> — is <q cite="/docs/web/html/element/q">intended for short quotations that don't require paragraph breaks.</q> -- <a href="/docs/web/html/element/q"> <cite>mdn q page</cite></a>.</p> citations are styled in italic font by default.
active learning: who said that? time for another
active learning example! in this example we'd like you to: turn the middle paragraph into a blockquote, which includes a cite attribute. turn "the need to eliminate negative self talk" in the third paragraph into an inline quote, and include a cite attribute. wrap the title of each source in <cite> tags and turn each one into a link to that source. ...
...when the term is hovered over): note: there is another element, <acronym>, which basically does the same thing as <abbr>, and was intended specifically for acronyms rather than abbreviations. this however has fallen into disuse — it wasn't supported in browsers as well as <abbr>, and <abbr> has such a similar function that it was considered pointless to have both. just use <abbr> instead.
active learning: marking up an abbreviation for this simple
active learning assignment, we'd like you to simply mark up an abbreviation. you can use our sample below, or replace it with one of your own. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a...
Getting started with HTML - Learn web development
ntent of the element. in this example, it is the paragraph text. the closing tag: this is the same as the opening tag, except that it includes a forward slash before the element name. this marks where the element ends. failing to include a closing tag is a common beginner error that can produce peculiar results. the element is the opening tag, followed by content, followed by the closing tag.
active learning: creating your first html element edit the line below in the input area by wrapping it with the tags <em> and </em>. to open the element, put the opening tag <em> at the start of the line. to close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake,...
...nt. in this example, the class attribute is an identifying name used to target the element with style information. an attribute should have: a space between it and the element name. (for an element with more than one attribute, the attributes should be separated by spaces too.) the attribute name, followed by an equal sign. an attribute value, wrapped with opening and closing quote marks.
active learning: adding attributes to an element another example of an element is <a>. this stands for anchor. an anchor can make the text it encloses into a hyperlink. anchors can take a number of attributes, but several are as follows: href: this attribute's value specifies the web address for the link. for example: href="https://www.mozilla.org/". title: the title attribute specifies extra infor...
...later. <title></title>: the <title> element. this sets the title of the page, which is the title that appears in the browser tab the page is loaded in. the page title is also used to describe the page when it is bookmarked. <body></body>: the <body> element. this contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.
active learning: adding some features to an html document if you want to experiment with writing some html on your local computer, you can: copy the html page example listed above. create a new file in your text editor. paste the code into the new text file. save the file as index.html. note: you can also find this basic html template on the mdn learning area github repo. you can now open th...
HTML table advanced features and accessibility - Learn web development
d the table in greater detail. a caption is placed directly beneath the <table> tag. note: the summary attribute can also be used on the <table> element to provide a description — this is also read out by screenreaders. we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read by sighted users (it doesn't appear on the page.)
active learning: adding a caption let's try this out, revisiting an example we first met in the previous article. open up your language teacher's school timetable from the end of html table basics, or make a local copy of our timetable-fixed.html file. add a suitable caption for the table. save your code and open it in a browser to see what it looks like. note: you can find our version on githu...
...licitly if you don't specify it in your code. to check this, open up one of your previous examples that doesn't include <tbody> and look at the html code in your browser developer tools — you will see that the browser has added this tag for you. you might wonder why you ought to bother including it at all — you should, because it gives you more control over your table structure and styling.
active learning: adding table structure let's put these new elements into action. first of all, make a local copy of spending-record.html and minimal-table.css in a new folder. try opening it in a browser — you'll see that it looks ok, but it could stand to be improved. the "sum" row that contains a summation of the spent amounts seems to be in the wrong place, and there are some details missing ...
...="location haircut">hairdresser</td> <td headers="date haircut">12/09</td> <td headers="evaluation haircut">great idea</td> <td headers="cost haircut">30</td> </tr> ... </tbody> note: this method creates very precise associations between headers and data cells but it uses a lot more markup and does not leave any room for errors. the scope approach is usually enough for most tables.
active learning: playing with scope and headers for this final exercise, we'd like you to first make local copies of items-sold.html and minimal-table.css, in a new directory. now try adding in the appropriate scope attributes to make this table more appropriate. finally, try making another copy of the starter files, and this time make the table more accessible using id and headers attributes. n...
HTML table basics - Learn web development
to write, maintain, and debug. tables are not automatically responsive: when you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element. tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
active learning: creating your first table we've talked table theory enough, so, let's dive into a practical example and build up a simple table. first of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine. the content of every table is enclosed by these two tags : <table></table>. add these inside the body of your html. the smallest contai...
... 5 owner mother-in-law me me sister-in-law eating habits eats everyone's leftovers nibbles at food hearty eater will eat till he explodes the problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. if the column and row headings stood out in some way, it would be much better.
active learning: table headers let's have a go at improving this table. first, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. the html contains the same dogs example as you saw above. to recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). this works in e...
...would just be applied to the first column. if we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this: <colgroup> <col style="background-color: yellow" span="2"> </colgroup> just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.
active learning: colgroup and col now it's time to have a go yourself. below you can see the timetable of a languages teacher. on friday she has a new class teaching dutch all day, but she also teaches german for a few periods on tuesday and thursdays. she wants to highlight the columns containing the days she is teaching. recreate the table by following the steps below. first, make a local copy...
Manipulating documents - Learn web development
on the same level in the dom tree. for example, img and p are siblings in the above example. text node: a node containing a text string. it is useful to familiarize yourself with this terminology before working with the dom, as a number of the code terms you'll come across make use of them. you may have also come across them if you have studied css (e.g. descendant selector, child selector).
active learning: basic dom manipulation to start learning about dom manipulation, let's begin with a practical example. take a local copy of the dom-example.html page and the image that goes along with it. add a <script></script> element just above the closing </body> tag. to manipulate an element inside the dom, you first need to select it and store a reference to it inside a variable. inside you...
...rite it into your html and not use javascript. it is more complex than html, and creating your content with javascript also has other issues attached to it (such as not being readable by search engines). in the next couple of sections we will look at a couple of more practical uses of dom apis. note: you can find our finished version of the dom-example.html demo on github (see it live also).
active learning: getting useful information from the window object so far we've only really looked at using node and document features to manipulate documents, but there is no reason why you can't get data from other sources and use it in your ui. you just have to make sure your data is in the right format; javascript makes it easier than many other languages, being weakly typed — for example numbers...
...ndow.onresize event handler and rerun our sizing code each time it changes. add the following to the bottom of your code: window.onresize = function() { winwidth = window.innerwidth; winheight = window.innerheight; div.style.width = winwidth + 'px'; div.style.height = winheight + 'px'; } note: if you get stuck, have a look at our finished window resize example (see it live also).
active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button. when you add an item to the input and press the button: the item should appear in the list. each item should be given a button that can be pressed to delete th...
Arrays - Learn web development
is: let removeditem = myarray.pop(); myarray; removeditem; unshift() and shift() work in exactly the same way as push() and pop(), respectively, except that they work on the beginning of the array, not the end. first unshift() — try the following commands: myarray.unshift('edinburgh'); myarray; now shift(); try these! let removeditem = myarray.shift(); myarray; removeditem;
active learning: printing those products! let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. in the editable example below there are comments containing numbers — each of these marks a place where you have to add something to the code. they are as follows: below the // number 1 comment ...
...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. as new objects are created and added...
... 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. as new objects are created and added to the array, older ones can be deleted from the array to maintain the desired number. in this example we're going to show a much si...
Working with JSON - Learn web development
format very much resembles javascript object literal format. you can include the same basic data types inside json as you can in a standard javascript object — strings, numbers, arrays, booleans, and other object literals. ...
... "heat immunity", "inferno", "teleportation", "interdimensional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article. for example: superheroes.hometown superheroes['
active'] to access data further down the hierarchy, you simply have to chain the required property names and array indexes together. for example, to access the third superpower of the second hero listed in the members list, you'd do this: superheroes['members'][1]['powers'][2] first we have the variable name — superheroes. inside that we want to access the members property, so we use ["members"...
...is working correctly). you can validate json using an application like jsonlint. json can actually take the form of any data type that is valid for inclusion inside json, not just arrays or objects. so for example, a single string or number would be a valid json object. unlike in javascript code in which object properties may be unquoted, in json only quoted strings may be used as properties.
active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a website. getting started to begin with, make local copies of our heroes.html and style.css files. the latter contains some simple css to style our page, while the former contains some very simple body html: <header> </header> <section> </section> plus a <script> el...
Test your skills: Object basics - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...em should be an object containing the following members: name: a string representing the name of the album. released: a number representing the year the album was released. include at least two albums in the albums array. once you've done this, you should then write a string to the variable bandinfo, which will contain a small biography detailing their name, nationality, years
active, and style, and the title and release date of their first album. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. object basics 3 finally for our object basics assessment, we want you to return to the cat object literal from task #1. we want you to rewrite the greeting() method s...
..., for example. describe how you'd make it more dry? if you are not sure, then don't worry — this is what we'll be looking at in future articles in the series! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Aprender y obtener ayuda - Learn web development
utube is an obvious one, with channels such as mozilla layout land, mozilladeveloper, and google chromedevelopers providing many useful videos. many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. there is no right and wrong answer here. ...
...u what you prefer to learn from. there is no right and wrong answer here. inter
active code playgrounds you might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. this is also a reasonable approach, and some learning sites tend to favor it. codecademy for example is a learning site where the tutorials mainly consist of inter
active code editors where you have to directly write code and see if the desired result was achieved. many mdn web docs reference pages provide inter
active examples too, where you can alter the code and see how the live result changes. and there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like jsbin, codepen, or glitch. in fact, you'll be cal...
......
Ember app structure and componentization - Learn web development
now we need to break up our html code into dynamic components; later we'll turn it into a fully int...
...a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> </section> the rendered output should now be as follows: this looks pretty complete, but remember that this is only a static prototype. now we need to break up our html code into dynamic components; later we'll turn it into a fully inter
active app. looking at the code next to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-...
...<button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> footer.hbs should be updated to contain the following: <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">
active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate components, like so: <section class="todoapp"> <h1>todos</h1> <header /> <todolist /> <footer /> </section> with these changes made, ru...
Getting started with Svelte - Learn web development
ng application. nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power. less code means less kb to download, parse, execute, and keep hanging around in memory. highly inter
active pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive. onboarding people with basic web development knowledge: svelte has a shallow learning curve. web developers with basic html, css, and ja...
...4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created. variables declared (or imported) at the top level are 'visible' from the component's markup. top-level variables is the way svelte handles the component state, and they are re
active by default. we will explain in detail what this means later on. <script> export let name; </script> svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). this is one example of svelte extending javascript syntax to make it more useful, while keeping it familiar. the marku...
... to download the files without cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. you can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. degit won't create a local git repo, it will just download the files of the specified folder. using the svelte repl a repl (read–eval–print loop) is an inter
active environment that allows you to enter commands and immediately see the results — many programming languages provide a repl. svelte's repl is much more than that. it's an online tool that allows you to create complete apps, save them online, and share with others. it's the easiest way to start playing with svelte from any machine, without having to install anything. it is also widely used by sv...
Mozilla accessibility architecture
nd the architecture of mozilla's accessibility api module, which provides support for platform accessibility apis. accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus. mozilla supports two accessibility apis: microsoft
active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix. we do not currently support the carbon accessibility model for apple's os x. please note, the documentation for implementing an msaa server has moved. you may also wish to read gecko info for windows accessibility vendors, a primer for vendors of 3rd party accessibility software, on how msaa clients can utilize ge...
...n nodes within them, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...
...m, and consequently fire the appropriate accessible event. this happens in the handleevent() method. note: this chart is not complete, consult the handleevent() method to see the rest. ...
Accessible Toolkit Checklist
cessibility built-in. these toolkits wrap the widgets implemented by the os with a consistent api for each platform. since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft
active accessibility (msaa) api support for custom controls. however, be aware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does. there will be custom and owner drawn controls -- there always are. for exa...
...eckboxes for listboxes, use owner drawn list items to show a different highlight color when the list is not focused. if you don't the list focus will not be apparent, and screen readers may read the selected list item when they shouldn't. for unfocused lists, use a lighter color highlight to show a non-focused state. for autocomplete lists, use the system color offset by 1, so that it looks
active but the list items don't get echoed while they user's trying to simply type and edit. msaa support, including accessible selection, selectable, multiselectable and extselectable states, and statechange events for checkbox children trees when a tree view is tabbed to, select the first item if nothing else is already selected up/down arrow key navigation left ...
... support for this) shift+f10 or context menu key to bring up context menu for current item (on os x ctrl+space is used to bring up context menu). space bar toggles checkboxes the enter key should activate an item if double clicking would do so msaa support, including accessible selection, exposing current level and position in list, alternative text for informative or inter
active images, selectable, multiselectable and extselectable states, statechange events for expanding/collapsing and toggling of checkbox children. note, you can use the accessible description to expose the current tree view level and position, such as "l3, 6 of 9" in order to provide ease of access for the user. the "l" and "of" will be parsed out by the assistive technology, so don't localize it. ...
mozbrowserfindchange
type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
.... bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties:
active a boolean indicating whether a search is currently
active (true), or not (false.) searchstring a domstring representing the string that is currently being searched for. searchlimit a number indicating the maximum number of searches that can be returned. numberofmatches a number indicating the number of matches returned by the search.
activematchordinal a number indicating the position of the currently highlighted search result, e.g. 3 out of 5. ...
... can be returned. numberofmatches a number indicating the number of matches returned by the search.
activematchordinal a number indicating the position of the currently highlighted search result, e.g. 3 out of 5. ...
Localization content best practices
are not displayed in the ui but used by tools like screen readers. there is an established format for localization comments: it's important to follow the format as closely as possible, since there are a number of automated tools that parse these comments for easier access and use by localizers. dtd files <!-- localization note (entity name): {{privacy}} will be replaced at run-time by an
active link. the string 'privacy-link' will be used as text for this link. --> properties files # localization note(privacy-text): {{privacy}} will be replaced at run-time by an #
active link. the string 'privacy-link' will be used as text for this link. privacy-text = by proceeding you accept the {{privacy}}. privacy-link = privacy terms file-wide comments should use the same format, they should b...
...e name of the certification authority signing the certificate. generalsiteidentity=this website is owned by %1$s\nthis has been verified by %2$s avoid concatenations, use placeholders instead consider this string: tos-text = by proceeding you accept the tos-link = terms of services most developers would consider this a good solution and display the concatenation of tos-text+tos-link, with an
active link on the second part. unfortunately, this won't work at all: you need at least a third string to place after the link, without that some languages won't be able to create a natural sounding sentence. a much more flexible solution would be: # localization note(tos-text): {{link}} will be replaced at run-time # by an
active link. string with id 'tos-link' will be used as text # for this link...
...xternal">privacy terms</a>.</p> in this case, you shouldn't put the url inside the localization string, unless you need it to be localizable. if you change the url, you're going to need a new string id; the same goes for the anchor's attributes, or the paragraph markup. instead, you should use the following strings # localization note(privacy-text): {{link}} will be replaced at run-time # by an
active link. string with id 'privacy-link' will be used as text # for this link. privacy-text = by proceeding you accept the {{link}}. privacy-link = privacy terms and then replace {{link}} at run-time with the link. don't hardcode characters typically white spaces, commas, or other separators (":", "|"). if you need a trailing white space in a string, use the unicode character \u0020 (that's usuall...
Power profiling overview
the part of the package outside the cores is called the uncore or system agent. it includes various components including the l3 cache, memory controller, and, for processors that have one, the integrated gpu. ram is separate from the processor. c-states intel processors have aggressive power-saving features. the first is the ability to switch frequently (thousands of times per second) between
active and idle states, and there are actually several different kinds of idle states. these different states are called c-states. c0 is the
active/busy state, where instructions are being executed. the other states have higher numbers and reflect increasing deeper idle states. the deeper an idle state is, the less power it uses, but the longer it takes to wake up from. note: the acpi standard specifi...
...r it uses, but the longer it takes to wake up from. note: the acpi standard specifies four states, c0, c1, c2 and c3. intel maps these to processor-specific states such as c0, c1, c2, c6 and c7. and many tools report c-states using the latter names. the exact relationship is confusing, and chapter 13 of the intel optimization manual has more details. the important thing is that c0 is always the
active state, and for the idle states a higher number always means less power consumption. the other thing to note about c-states is that they apply both to cores and the entire package — i.e. if all cores are idle then the entire package can also become idle, which reduces power consumption even further. the fraction of time that a package or core spends in an idle c-state is called the c-state re...
...mber always means less power consumption. the other thing to note about c-states is that they apply both to cores and the entire package — i.e. if all cores are idle then the entire package can also become idle, which reduces power consumption even further. the fraction of time that a package or core spends in an idle c-state is called the c-state residency. this is a misleading term — the
active state, c0, is also a c-state — but one that is nonetheless common. intel processors have model-specific registers (msrs) containing measurements of how much time is spent in different c-states, and tools such as powermetrics (mac), powertop and turbostat (linux) can expose this information. a wakeup occurs when a core or package transitions from an idle state to the
active state. this happens...
sslerr.html
sion 2 is disabled in the local client's configuration. ssl_error_bad_mac_read -12273 "ssl received a record with an incorrect message authentication code." this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity. if this occurs frequently on a server, an
active attack (such as the "million question" attack) may be underway against the server. ssl_error_bad_mac_alert -12272 "ssl peer reports incorrect message authentication code." the remote system has reported that it received a message with a bad message authentication code from the local system. this may indicate that an attack on that server is underway. ssl_error_...
..._padding -12264 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding information in it. this usually indicates that the client and server have failed to come to agreement on the set of keys used to encrypt the application data and to check message integrity. if this occurs frequently on a server, an
active attack (such as the "million question" attack) may be underway against the server. ssl_error_rx_record_too_long -12263 "ssl received a record that exceeded the maximum permissible length." this generally indicates that the remote peer system has a flawed implementation of ssl, and is violating the ssl specification. ssl_error_tx_record_too_long -12262...
...neration function. on a server socket, indicates a failure of one of the following: (a) to unwrap the pre-master secret from the clientkeyexchange message, (b) to derive the master secret from the premaster secret, (c) to derive the mac secrets, cryptographic keys, and initialization vectors from the master secret. if encountered repeatedly on a server socket, this can indicate that the server is
actively under a "million question" attack. ssl_error_decompression_failure -12177 "ssl received a compressed record that could not be decompressed." sec error codes table 8.2 security error codes defined in secerr.h constant value description sec_error_io -8192 an i/o error occurred during authentication; or an error occurred during crypto...
Rhino shell
invoking the shell java org.mozilla.javascript.tools.shell.main [options] script-filename-or-url [script-arguments] where options are: -e script-source executes script-source as a javascript script. -f script-filename-or-url reads script-filename-or-url content and execute it as a javascript script. -opt optlevel / -o optlevel optimizes at level optlevel, which must be -1 or an integer between 0 and 9. see rhino optimization for more details. -version versionnumber specifies the language version to compile with. ...
...alize(object, filename) serialize the given object to the specified file. spawn(functionorscript) run the given function or script in a different thread. sync(function) creates a synchronized function (in the sense of a java synchronized method) from an existing function. the new function synchronizes on the this object of its invocation. quit() quit shell. the shell will also quit in inter
active mode if an end-of-file character is typed at the prompt. version([number]) get or set javascript version number. if no argument is supplied, the current version number is returned. if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 140, 150, 160 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.7 respectively. examples invocation here the s...
...of 100, 110, 120, 130, 140, 150, 160 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6 or 1.7 respectively. examples invocation here the shell is invoked three times from the command line. (the system command prompt is shown as $.) the first invocation executes a script specified on the command line itself. the next invocation has no arguments, so the shell goes into inter
active mode, reading and evaluating each line as it is typed in. finally, the last invocation executes a script from a file and accesses arguments to the script itself. $ java org.mozilla.javascript.tools.shell.main -e "print('hi')" hi $ java org.mozilla.javascript.tools.shell.main js> print('hi') hi js> 6*7 42 js> function f() { return a; } js> var a = 34; js> f() 34 js> quit() $ cat echo.js for (i ...
JS_THREADSAFE
n this jscontext. most jsapi callback functions are always called from within a request. these callbacks are (unreliably!) documented with the words "provides request", like this: name type description cx jscontext * the context in which the event ocurred. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). in particular, jsnative callbacks provide a request. this means that any potentially long-running operation in a native must be bracketed with calls to js_suspendrequest() and js_resumerequest(). jsbool socket_recv(jscontext *cx, unsigned int argc, jsval *vp) { ... rc = js_suspendrequest(cx); read_size = re...
...e-threaded jsapi programs. but in multithreaded programs, if you break the rules, your program is more likely to crash. this is because in single-threaded programs, a random call into the jsapi is actually pretty unlikely to trigger gc, especially if the calling thread has not been using up a lot of memory. in a multithreaded program, even if the calling thread has been idle, other threads may be
active or may call js_gc(). the above rules mean that at any given moment, there can be either (a) multiple threads in
active requests, or (b) one thread doing gc and all requests suspended. when one thread calls js_gc or otherwise finds that garbage collection is necessary, it must wait for all other threads that are in requests to pause before garbage collection can occur. to keep this wait time to a...
...sts to pause before garbage collection can occur. to keep this wait time to a minimum, applications must avoid long-running requests. the recommended technique in spidermonkey 1.8 and later is to periodically call js_yieldrequest from an operation callback. sharing data among threads "data can be marshaled across the process boundary through a process known as smuggling." --mr. bunny's guide to
activex even in js_threadsafe builds, threads cannot safely share objects or strings. instead, data must be copied when it is sent from one thread to another. use js_writestructuredclone to transform data into a flat array of bytes that can be safely written to disk, sent to another process or even another machine, or just passed to another thread. then use js_readstructuredclone on the other side to ...
WebReplayRoadmap
powerful platform for implementing debugging and analysis features. we would like to use web replay to radically improve not just the debugging experience but the entire web development experience. to that end, this document will be revised over time as we find new and better ways of helping developers. time travel features more features are planned for the timeline, as described below. retro
active console logging console logging is one of the primary tools most developers use to debug a page. seeing messages in the console provides a simple and intuitive view into the order in which events have happened. without time travel, using the console requires repeatedly updating the source or the debugger's log points, reloading, and reproducing the bug. this is time consuming, especially when...
... primary tools most developers use to debug a page. seeing messages in the console provides a simple and intuitive view into the order in which events have happened. without time travel, using the console requires repeatedly updating the source or the debugger's log points, reloading, and reproducing the bug. this is time consuming, especially when the bug only reproduces intermittently. retro
active console logging offers a large improvement to this workflow. the bug only needs to be reproduced in a recording tab once, and then console logs can be added which apply throughout the entire recording. this is based on the logpoints feature in the debugger, which can be enabled with the devtools.debugger.features.log-points preference. set a breakpoint and right click on it to change it to a l...
...nd where a function is called, the callees at a call site, where some data in an object came from or where it is used, or what type a value has. these questions can be answered by analyzing one or more recordings to study their behavior in detail. if the debugger could perform this analysis then it could show this information to developers and help them understand the app even when they are not
actively debugging a particular recording. static type integration (not yet implemented) static type systems like flow and typescript are great and really useful for managing an app's codebase, but they are unsound by design, and it is pretty easy to satisfy the type system and yet have different types in practice. a recording can be analyzed for the types that appear in practice. these can be compa...
Gecko events
is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape...
... is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no e...
...es event_asynch_hide an object is hidden -- this is a layout occurance and is thus asynchronous is supported: yes event_asynch_significant_change an object had a significant layout change which could affect the type of accessible object -- this is a layout occurance and is thus asynchronous is supported: yes event_
active_decendent_changed the
active descendant of a component has changed. the
active descendant is used in objects with transient children. is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has ch...
AT APIs Support
t build of firefox or any other gecko-based product to be up to dated: firefox recent builds thunderbird recent builds seamonkey recent builds determining if accessibility is enabled in a firefox accessibility is enabled on windows and linux platforms by default. as well you might find helpful the about:accessibilityenabled firefox extension. supported at apis at apis terms microsoft
active accessibility (msaa) an api devised by microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. if you seriously need to understand msaa, you'll need to read the docs on msdn and play with the sample apps and code that come with msaa sdk 1.3. (i recommend sdk 1.3 because the msaa sdk 2.0 doesn't come with the source code t...
... supports it. if you seriously need to understand at-spi, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. please note that the web docs are sometimes out of date, and the latest at-spi is available on cvs. universal access (ua) universal access (ua) is the apple's accessibility framework. windows platform we support msaa (microsoft
active accessibility) and iaccessible2 on windows. also we expose ms com interfaces isimpledom* to provide an access to dom tree. iaccessible2 is a set of interfaces that overlay the msaa (iaccessible) and dom (isimpledom*) interface support. any object that supports iaccessible will also support iaccessible2 and possibly any of the other ia2 interfaces. linux/unix platform we support atk/at-spi inte...
... in other browsers. here is a list of firefox keyboard shortcuts. test tools here you will find a list of tools to test accessibility gecko-based applications. msaa msaa sdk tools - version 1.3 is recommended instead of 2.0 because it includes source code for the tools iaccessible2 accessibility probe -- includes msaa support as well atk/at-spi accerciser - inter
active python accessibility explorer for the gnome desktop gecko dom inspector has an ability to test gecko accessibility layer, supports base features. firebug screen readers here's a list of screen readers we are oriented to in the first place. windows platform jaws windows eyes nvda linux/unix platform orca os x platform voiceover c...
PyXPCOM
with pyxpcom, a developer can talk to xpcom or embed gecko from a python application. pyxpcom is similar to javaxpcom (java-xpcom bridge) or xpconnect (javascript-xpcom bridge). mozilla defines many external interfaces available to embeddors and component developers. ...
...nent with python. getting to know pyxpcom pyxpcom is a bridging technology between xpcom and python. this article gives you a head start to pyxpcom. note: the links to part ii and iii of this series are broken and i cannot find them on the ibm site. please update this page if/when the links can be found. ...
... the links can be found. history pyxpcom was initially developed by
activestate tool corporation, and came out of their komodo project. current releases are now integrated with the mozilla build system. other resources pythonext - extension that provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (
activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom. related topics xpcom pydom: replace javascript with python python-spidermonkey ...
Language bindings
ents.utils.waivexrays(), restoring xray vision for the caller.components.utils.waivexrayswaives xray vision for an object, giving the caller a transparent wrapper to the underlying object.javaxpcomjavaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface. javaxpcom is not
actively maintained.plxpcomplxpcom (perl xpcom) provides language bindings letting you use xpcom from perl code. the resources here provide information about this language binding and how to use it.pyxpcompyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface. pyxpcom is ...
...ly maintained.plxpcomplxpcom (perl xpcom) provides language bindings letting you use xpcom from perl code. the resources here provide information about this language binding and how to use it.pyxpcompyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface. pyxpcom is
actively used in
activestate komodo products, for example.rbxpcomrbxpcom (ruby cross-platform com) provides bindings between the popular ruby programming language and xpcom. you can find additional information using the resource links below.xpconnectxpconnect is a bridge between javascript and xpcom. with xpconnect, you can use xpcom components from javascript code, and interact with javascript objects ...
... ...
IAccessibleText
ter</li> the caretoffset for "two" would be 2, matching the "o" the caret position/offset is that of the character logically following it, for example to the right of it in a left to right language. [propget] hresult caretoffset( [out] long offset ); parameters offset the returned offset is relative to the text() represented by this object. return value s_false if the caret is not currently
active on this object, that is the caret is located on some other object. the returned offset value will be -1. s_ok. characterextents() returns the bounding box of the specified position. the virtual character after the last character of the represented text(), that is the one at position length is a special case. it represents the current input position and will therefore typically be queried by at mo...
...es accessing data out of process or from other threads. servers only need to save the last inserted block of text() and a scope of the entire application is adequate. [propget] hresult newtext( [out] ia2textsegment newtext ); parameters newtext the text() that was just inserted. return value s_false if there is nothing to return, [out] value is null. s_ok. nselections() returns the number of
active non-contiguous selections. [propget] hresult nselections( [out] long nselections ); parameters nselections missing description return value s_ok. offsetatpoint() returns the text() position for the specified screen position. given a point return the zero-based index of the character under that point. the same functionality could be achieved by using the bounding boxes for each character as r...
...er offset - the offset of the character just past the last character of the string. coordinatetype specifies whether the coordinates are relative to the screen or the parent object. x defines the x coordinate. y defines the y coordinate. return value e_invalidarg if bad [in] passed. s_false if the object is already at the specified location. s_ok. selection() returns the character offsets of nth
active text() selection. [propget] hresult selection( [in] long selectionindex, [out] long startoffset, [out] long endoffset ); parameters selectionindex index of selection (0 based). startoffset 0 based offset of first selected character. endoffset 0 based offset of one past the last selected character. return value e_invalidarg if bad [in] passed, [out] values are 0s. s_false if there is noth...
nsIApplicationCacheService
note: this method should propagate the entry to other application caches with the same opportu...
...best able to serve the resource indicated by the key parameter. createapplicationcache() creates a new, empty application cache for the specified cache group. nsiapplicationcache createapplicationcache( in acstring group ); parameters group the cache group for which to create an application cache. return value the newly-created nsiapplicationcache. ...
...e group. nsiapplicationcache createapplicationcache( in acstring group ); parameters group the cache group for which to create an application cache. return value the newly-created nsiapplicationcache. deactivategroup() deactivates the currently
active cache object for the specified cache group. void deactivategroup( in acstring group ); parameters group the cache group to deactivate. get
activecache() returns the currently
active cache object for a cache group. nsiapplicationcache get
activecache( in acstring group ); parameters group the cache group for which to return an application cache. return value the currently
active cache object for the cache group. getapplicationcache() returns the nsiapplicationcache object for the specified client id. nsiapplicationcache getapplicationca...
nsIDocShell
ore using any other character set during page loads. note: prior to gecko 12.0, this attribute was part of a separate nsidoccharsetinfo interface. hasfocus boolean tells the docshell that it now has focus or has lost focus. obsolete since gecko 1.9.2 historyid unsigned long long the id of the docshell in the session history. read only. is
active boolean indicates whether or not the docshell is currently
active. an
active docshell is one that is currently visible, which means it's not a good candidate for optimizations such as image frame discarding. docshells are
active if this is true, which is the default state. note: starting in gecko 8.0, is
active is false for documents in minimized windows. is...
...true if the docshell is currently executing the onload handler. read only. isinunload boolean find out whether the docshell is currently in the middle of a page transition (after the onunload event has fired, but before the new document has been set up) read only. isoffscreenbrowser boolean if true, this docshell is not visible in the traditional sense, but is being
actively rendered to the screen (such as by being painted to a canvas), and should be treated accordingly. layouthistorystate nsilayouthistorystate loadedtransindex long keeps track of the previous shtransaction index and the current shtransaction index at the time that the doc shell begins to load. used for contentviewer eviction. read only. loadtype unsign...
... constants secion. awindowtarget window target for the load. atypehint a hint as to the content-type of the resulting data. may be null or empty if no hint. apostdatastream post data stream (if posting) aheadersstream stream containing "extra" request headers. aloadflags flags to modify load behaviour. flags are defined in nsiwebnavigation. ashentry
active session history entry (if loading from sh) firstparty true if this is the master top-level document. adocshell if the load was succesfully initiated, this receives the nsidocshell that actually performed the load. arequest the new channel created for the load. isbeingdestroyed() boolean isbeingdestroyed(); parameters none. return value returns true if the docshell is bei...
nsIWindowWatcher
embedding/components/windowwatcher/public/nsiwindowwatcher.idlscriptable this interface is the keeper of gecko/dom windows. it maintains a list of open top-level windows, and allows some operations on them. inherits from: nsisupports last changed in gecko 0.9.6 usage notes: this component has an
activewindow property. clients may expect this property to be always current, so to properly integrate this component the application will need to keep it current by setting the property as the
active window changes. this component should not keep a (xpcom) reference to any windows; the implementation will claim no ownership. windows must notify this component when they are created or destroyed, so only a weak reference is kept. note that there is no interface for such notifications (not a publi...
... methods...
... string afeatures, in nsisupports aarguments); void registernotification(in nsiobserver aobserver); void setwindowcreator(in nsiwindowcreator creator); void unregisternotification(in nsiobserver aobserver); attributes attribute type description
activewindow nsidomwindow the watcher serves as a global storage facility for the current
active (front most non-floating-palette-type) window, storing and returning it on demand. users must keep this attribute current, including after the topmost window is closed. this attribute will be null if the
active window is not an nsidomwindow; for example, if the
active window is an alert. methods getchromeforwindow() retrieve the chrome window mapped to the given dom window. nsiwindowwatc...
nsIXULTemplateBuilder
ent the nsixultemplateresult interface, allowing the result objects from each iteration to be used directly as the reference points for the next iteration. when using multiple queries, each may generate results with the same id. more than one of these results may match one of the rules in their respective queries, however only the result for the earliest matching query in the template becomes the
active match and generates output. the addresult, removeresult, replaceresult and resultbindingchanged methods may be called by the query processor to indicate that the set of valid results has changed, such that a different query may match. if a different match would become
active, the content for the existing match is removed and the content for the new match is generated. a query processor is not req...
...node aquerynode ); parameters aresult the result to add. aquerynode the query to which the result applies. errors throws ns_error_null_pointer if aresult or aquerynode is null. removeresult() informs the template builder that a result no longer applies. the builder will call the remove content generated for the result, if any. if a different query would then match instead, it will become the
active match. this method will have no effect if the result isn't known to the builder. void removeresult( in nsixultemplateresult aresult ); parameters aresult the result to remove errors throws ns_error_null_pointer if aresult is null replaceresult() inform the template builder that one result should be replaced with another. both the old result (aoldresult) and the new result (anewresult) must ...
...l apply. the builder will resynchronize any variables that are referenced in the action body. void resultbindingchanged( in nsixultemplateresult aresult ); parameters aresult the result to change errors throws ns_error_null_pointer if aresult is null getresultforid() returns the result for a given id. only one such result is returned and is always the result with that id associated with the
active match. this method will return null is there is no result for the id. nsixultemplateresult getresultforid( in astring aid ); parameters aid the id to return the result for return value the result for the given id. getresultforcontent() retrieves the result corresponding to a generated element, or null is there isn't one. nsixultemplateresult getresultforcontent( in nsidomelement aelement );...
Events
-message a message gets sent compose-window-close a compose window gets closed compose-window-init a compose window has been opened compose-window-reopen a cached compose window has been reopened. no load event is fired in this case. folders event name event type fired when... msgcreatedbview on
activecreatedview on
activemessagesloaded the
active messages in the folder have been loaded oncreatedview a folder view has been created, but not yet shown. if custom column handlers need to do something, this is likely the event you are looking for. ondestroyingview the current folder view is being destroyed. ondisplayingfolder a f...
...something, this is likely the event you are looking for. ondestroyingview the current folder view is being destroyed. ...
...looking for. ondestroyingview the current folder view is being destroyed. ...
Zombie compartments
untime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (website) compartments, these compartments are also listed in more detail in the explicit allocations section. ...
...i.e. running the garbage collector, with the corresponding about:memory button will help. zombie compartments sometimes, due to bugs in firefox, the add-on sdk and/or add-ons, compartments are created that are never destroyed. these are a particular kind of memory leak, and they cause firefox's memory usage to increase gradually over time, slowing it down and making it more likely to crash. re
active checking if you look at about:memory and you see a compartment for www.foo.com, but you closed your last www.foo.com tab a while ago, there's a good chance you're seeing a zombie compartment. follow these steps to make a more conclusive diagnosis. restart the browser. open the page that you think might cause a zombie compartment. open about:memory in another tab to confirm that the relevan...
...'s no need to take a screenshot). see bug 669545 for an example. if the zombie compartment is caused by an add-on, please mark the bug as also blocking bug 700547. it really is best to follow these instructions. in particular, if you have multiple tabs open it's easy to mis-identify whether a compartment should still be alive. if you only have about:memory open, things are much simpler. pro
active checking of add-ons it's not uncommon for add-ons to cause zombie compartments, see bug 700547 for examples. follow these steps to do some basic checking of an add-on. create a new profile. install and enable the add-on. restart the browser. browse one or more pages and do something that exercises the add-on. for example, for an add-on that remembers passwords, visit a site that requires...
Debugger.Object - Firefox Developer Tools
t is callable, call it with the giventhis value andargument values, and return a completion value describing how the call completed.this should be a debuggee value, or { asconstructor: true } to invoke the referent as a constructor, in which case spidermonkey provides an appropriate this value itself. eachargument must be a debuggee value. all extant handler methods, breakpoints, and so on remain
active during the call. if the referent is not callable, throw a typeerror. this function follows the invocation function conventions. apply(this,arguments) if the referent is callable, call it with the giventhis value and the argument values inarguments, and return a completion value describing how the call completed.this should be a debuggee value, or { asconstructor: true } to invokefunction as a c...
...etion value describing how the call completed.this should be a debuggee value, or { asconstructor: true } to invokefunction as a constructor, in which case spidermonkey provides an appropriate this value itself.arguments must either be an array (in the debugger) of debuggee values, or null or undefined, which are treated as an empty array. ...
...this function follows the invocation function conventions. if the referent is not a global object, throw a typeerror exception. codeis interpreted as strict mode code when it contains a use strict directive. this evaluation is semantically equivalent to executing statements at the global level, not an indirect eval. ...
Debugger - Firefox Developer Tools
mbly sources will be available in binary form. the webassembly text generation will be disabled. collectcoverageinfo a boolean value indicating whether code coverage should be enabled inside each debuggee of this debugger instance. changing this flag value will recompile all jit code to add or remove code coverage instrumentation. changing this flag when any frame of the debuggee is currently
active on the stack will produce an exception. setting this to true enables code coverage instrumentation, which can be accessed via the debugger.script getoffsetscoverage function. in some cases, the code coverage might expose information which pre-date the modification of this flag. code coverage reports are monotone, thus one can take a snapshot when the debugger is enabled, and output the differen...
...nce is debugging. if the designated global is already a debuggee, this has no effect. return this debugger’s debugger.object instance referring to the designated global. the valueglobal may be any of the following: a global object. an html5 windowproxy object (an “outer window”, in firefox terminology), which is treated as if the window object of the browsing context’s
active document (the “inner window”) were passed. a cross-compartment wrapper of an object; we apply the prior rules to the wrapped object. a debugger.object instance belonging to this debugger instance; we apply the prior rules to the referent. any other sort of value is treated as a typeerror. (note that each rule is only applied once in the process of resolving a giveng...
... not a proper debuggee value, throw a typeerror instead. static methods of the debugger object the functions described below are not called with a this value. iscompilableunit(source) given a string of source code, designated bysource, return false if the string might become a valid javascript statement with the addition of more lines. otherwise return true. the intent is to support inter
active compilation - accumulate lines in a buffer until iscompilableunit is true, then pass it to the compiler. source metadata generated from file: js/src/doc/debugger/debugger.md watermark: sha256:03b36132885e046a5f213130ba22b1139b473770f7324b842483c09ab7665f7c changeset: e91b2c85aacd ...
Debugger.Object - Firefox Developer Tools
, call it with the giventhis value andargument values, and return a completion value describing how the call completed.this should be a debuggee value, or { asconstructor: true } to invoke the referent as a constructor, in which case spidermonkey provides an appropriate this value itself. eachargument must be a debuggee value. all extant handler methods, breakpoints, watchpoints, and so on remain
active during the call. if the referent is not callable, throw a typeerror. this function follows the invocation function conventions. apply(this,arguments) if the referent is callable, call it with the giventhis value and the argument values inarguments, and return a completion value describing how the call completed.this should be a debuggee value, or { asconstructor: true } to invokefunction as...
...escribing how the call completed.this should be a debuggee value, or { asconstructor: true } to invokefunction as a constructor, in which case spidermonkey provides an appropriate this value itself.arguments must either be an array (in the debugger) of debuggee values, or null or undefined, which are treated as an empty array. ...
...this function follows the invocation function conventions. if the referent is not a global object, throw a typeerror exception. codeis interpreted as strict mode code when it contains a use strict directive. ifcode is not strict mode code, then variable declarations incode affect the referent global object. ...
Page inspector keyboard shortcuts - Firefox Developer Tools
command windows macos linux select the element under the mouse and cancel picker mode click click click select the element under the mouse and stay in picker mode shift+click shift+click shift+click html pane these shortcuts work while you're in the inspector's html pane. ...
... command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move...
... command windows macos linux move to the previous element in the breadcrumbs bar left arrow left arrow left arrow move to the next element in the breadcrumbs bar right arrow right arrow right arrow fo...
Console messages - Firefox Developer Tools
he web console help developers find potential or actual vulnerabilities in their sites. 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. the complete list of security messages is as follows: message details blocked loading mixed
active content the page contained mixed
active content: that is, the main page was served over https, but asked the browser to load "
active content", such as scripts, over http. the browser blocked this
active content. see mixed content for more details. blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked ...
...see mixed content for more details. ...
...more details. blocked loading mixed display content the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "display content", such as images, over http. the browser blocked this display content. see mixed content for more details. loading mixed (insecure)
active content on a secure page the page contained mixed
active content: that is, the main page was served over https, but asked the browser to load "
active content", such as scripts, over http. the browser loaded this
active content. see mixed content for more details. loading mixed (insecure) display content on a secure page the page contained mixed display content: that is, the main page was served over https, but asked the browser to load "dis...
Animation.replaceState - Web APIs
persisted: the animation has been explicitly persisted by invoking animation.persist() on it. ...
... persisted: the animation has been explicitly persisted by invoking animation.persist() on it. ...
...r the mouse moves. the event handler sets up an animation that animates the <div> element to the position of the mouse pointer. this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the handler. this will be
active for each animation by default, or persisted if the persist() call is uncommented. specifications specification status comment web animationsthe definition of 'animation.replacestate' in that specification. working draft ...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2...
...'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define cl...
...n1, 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 ? 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '15px sans-serif'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle =
active ? 'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate c...
Element.insertAdjacentElement() - Web APIs
visualization of position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and has an element parent. ...
...position names <!-- beforebegin --> <p> <!-- afterbegin --> foo <!-- beforeend --> </p> <!-- afterend --> note: the beforebegin and afterend positions work only if the node is in a tree and has an element parent. ...
....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); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <div> elements inside a container. when one is clicked, it becomes selected and you can then press the insert before and insert after buttons to insert new divs before or after the selec...
HTMLElement: animationcancel event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.
active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('
active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.conta...
... applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.contains('
active'); if (
active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationend event - Web APIs
n-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.
active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.query...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('
active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.conta...
... applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.contains('
active'); if (
active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.
active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('
active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.conta...
... applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.contains('
active'); if (
active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.
active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.q...
...xtcontent}'animation started' `; }); animation.addeventlistener('animationiteration', () => { iterationcount++; animationeventlog.textcontent = `${animationeventlog.textcontent}'animation iterations: ${iterationcount}' `; }); animation.addeventlistener('animationend', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation ended'`; animation.classlist.remove('
active'); applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.conta...
... applyanimation.textcontent = "activate animation"; }); animation.addeventlistener('animationcancel', () => { animationeventlog.textcontent = `${animationeventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('
active'); animationeventlog.textcontent = ''; iterationcount = 0; let
active = animation.classlist.contains('
active'); if (
active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status comment css animations working draft initial definition ...
KeyboardEvent.getModifierState() - Web APIs
the value must be one of the keyboardevent.key values which represent modifier keys, or the string "accel" . this is case-sensitive. modifier keys on internet explorer ie9 uses "scroll" for "scrolllock" and "win" for "os". ...
... supported "capslock" during led for ⇪ caps lock turned on not supported while capslock is locked "control" either ctrl key or altgr key pressed ctrl key pressed control key pressed menu key pressed. ctrl key, control key or menu key pressed. "fn" not supported function key is pressed, but we're not sure what key makes the modifier state
active. fn key on mac keyboard doesn't cause this
active. "fnlock" not supported "hyper" not supported "meta" not supported meta key pressed ⌘ command key pressed not supported ⊞ windows logo key or command key pressed "numlock" during led for num lock turned on a key on numpad pressed not supported while numlock is locked ...
...ier key for the shortcut key is pressed. for example, on windows, pressing ctrl key may make it return true. however, on mac, pressing ⌘ command key may make it return true. note that which modifier key makes it return true depends on platforms, browsers, and user settings. for example, firefox users can customize this with a pref, "ui.key.accelkey". example // ignore if following modifier is
active. if (event.getmodifierstate("fn") || event.getmodifierstate("hyper") || event.getmodifierstate("os") || event.getmodifierstate("super") || event.getmodifierstate("win") /* hack for ie */) { return; } // also ignore if two or more modifiers except shift are
active. if (event.getmodifierstate("control") + event.getmodifierstate("alt") + event.getmodifierstate("meta") > 1)...
KeyboardEvent.key - Web APIs
and the key property value is set to the string shift. as we keep holding this key, the keydown event does not continue to fire repeatedly because it does not produce a character key. when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to the string @ for the u.s keyboard type and " for the uk keyboard type, because of the
active modifier shift key. the beforeinput and input events are fired next because a character key has been produced. as we release the key 2, a keyup event is fired and the key property will maintain the string values @ and " for the different keyboard layouts respectively. as we finally release the shift key, another keyup event is fired for it, and the key attribute value remains shift. case 2 wh...
... and the key property value is set to be the string shift. as we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key. when key 2 is pressed, another keydown event is fired for this new key press, and the key property value for the event is set to be the string @ for the u.s keyboard type and " for the uk keyboard type, because of the
active modifier shift key. the beforeinput and inputbeforeinput and input events are fired next because a character key has been produced. as we keep holding the key, the keydown event continues to fire repeatedly and the keyboardevent.repeat property is set to true. the beforeinput and input events are fired repeatedly as well. as we release the shift key, a keyup event is fired for it, and the key at...
...to fire repeatedly and the keyboardevent.repeat property is set to true. the beforeinput and input events are fired repeatedly as well. as we release the shift key, a keyup event is fired for it, and the key attribute value remains shift. at this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer
active. the same goes for the inputevent.data property of the beforeinput and input events. as we finally release the key 2, a keyup event is fired but the key property will be set to the string value 2 for both keyboard layouts because the modifier shift key is no longer
active. example this example uses eventtarget.addeventlistener() to listen for keydown events. when they occur, the key's value is...
MediaRecorder.start() - Web APIs
you can record the entire duration of the media into a single blob (or until you call requestdata()), or you can specify the number of milliseconds to record at a time. then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is in
active, start() sets the state to recording, then begins capturing media from the input stream. a blob is created and the data is collected in it until the time slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded dat...
...e slice period elapses or the source media ends. each time a blob is filled up to that point (the timeslice duration or the end-of-media, if no slice duration was provided), a dataavailable event is sent to the mediarecorder with the recorded data. if the source is still playing, a new blob is created and recording continues into that, and so forth. when the source stream ends, state is set to in
active and data gathering stops. a final dataavailable event is sent to the mediarecorder, followed by a stop event. note: if the browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event. syntax mediarecorder.start(timeslice) parameters ...
... immediately are thrown as dom exceptions. all other errors are reported through error events sent to the mediarecorder object. you can implement the onerror event handler to respond to these errors. invalidmodificationerror the number of tracks on the stream being recorded has changed. you can't add or remove tracks while recording media. invalidstateerror the mediarecorder is not in the in
active state; you can't start recording media if it's already being recorded. see the state property. notsupportederror the media stream you're attempting to record is in
active, or one or more of the stream's tracks is in a format that can't be recorded using the current configuration. securityerror the mediastream is configured to disallow recording. this may be the case, for example, with sources ...
Multi-touch interaction - Web APIs
rget3"); } pointer down the pointerdown event is fired when a pointer (mouse, pen/stylus or touch point on a touchscreen) makes contact with the contact surface. the event's state must be cached, in case this down event is part of a multi-touch interaction. 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. function pointerdown_handler(ev) { // the pointerdown event signals the start of a touch interaction. // save this event for later processing (this could be part of a // multi-touch interaction) and update the background color push_event(ev); if (logevents) log("pointerdown: name = " +...
... function update_background(ev) { // change background color based on the number of simultaneous touches/pointers // currently down: // white - target element has no touch points i.e. no pointers down // yellow - one pointer down // pink - two pointers dow...
... function update_background(ev) { // change background color based on the number of simultaneous touches/pointers // currently down: // white - target element has no touch points i.e. no pointers down // yellow - one pointer down // pink - two pointers down // lightblue - three or ...
RTCPeerConnection.createOffer() - Web APIs
x apromise = mypeerconnection.createoffer([options]); mypeerconnection.createoffer(successcallback, failurecallback, [options]) parameters options optional an rtcofferoptions dictionary providing options requested for the offer. rtcofferoptions dictionary the rtcofferoptions dictionary is used to customize the offer created by this method. icerestart optional to restart ice on an
active connection, set this to true. this will cause the returned offer to have different credentials than those already in place. if you then apply the returned offer, ice will restart. specify false to keep the same credentials and therefore not restart ice. the default is false. offertoreceiveaudio optional (legacy) a legacy boolean option which used to control whether or not to offer to the remote...
...d to send audio data, even if the local side will not be sending audio data. the default behavior is to offer to receive audio only if the local side is sending audio, not otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing audio transceivers to exclude reception (i.e. set to either "sendonly" or "in
active"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive audio that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to control whether or not to accept incoming audio. offertoreceivevideo optional (legacy) a legacy...
...d to send video data, even if the local side will not be sending video data. the default behavior is to offer to receive video only if the local side is sending video, not otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing video transceivers to exclude reception (i.e. set to either "sendonly" or "in
active"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive video that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to control whether or not to accept incoming video. voiceactivitydetection optional some codecs an...
RTCRtpTransceiver.currentDirection - Web APIs
transceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and...
...he other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. ...
...tive1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. [1] to determine if a sender has at least one
active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its
active property set to true, the sender has an
active encoding. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.curren...
RTCRtpTransceiver.direction - Web APIs
transceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and...
...he other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. ...
...tive1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. [1] to determine if a sender has at least one
active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its
active property set to true, the sender has an
active encoding. exceptions when setting the value of direction, the following exceptions can occur: invalidstateerror either the receiver's rtcpeerconnection is closed or the ...
RTCRtpTransceiverDirection - Web APIs
transceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and...
...he other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is
active1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. ...
...tive1. does not offer to receive rtp data and will not do so. "recvonly" does not offer to send rtp data, and will not do so. offers to receive rtp data, and will do so if the other peer offers. "in
active" does not offer to send rtp data, and will not do so. does not offer to receive rtp data and will not do so. [1] to determine if a sender has at least one
active encoding, the user agent gets its parameters using rtcrtpsender.getparameters(), then looks at the parameters' encodings property; if any of the listed encodings has its
active property set to true, the sender has an
active encoding. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiverdirecti...
ServiceWorkerContainer - Web APIs
ker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations. most importantly, it exposes the serviceworkercontainer.register() method used to register service workers, and the serviceworkercontainer.controller property used to determine whether or not the current page is
actively controlled. properties serviceworkercontainer.controller read only returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.
active). this property returns null during a force-refresh request (shift + refresh) or if there is no
active worker. serviceworkercontainer.ready read only provides a way of delaying code execution until a...
...perties serviceworkercontainer.controller read only returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.
active). this property returns null during a force-refresh request (shift + refresh) or if there is no
active worker. serviceworkercontainer.ready read only provides a way of delaying code execution until a service worker is
active. it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistration associated with the current page has an serviceworkerregistration.
active worker. once that condition is met, it resolves with the serviceworkerregistration. events controllerchange occurs when the document's associated serviceworkerregistration acquires a new
active worker. also a...
...flow of messages being dispatched from a service worker to pages under its control (e.g. sent via client.postmessage()). this can be used to react to sent messages earlier, even before that page's content has finished loading. examples the example below first checks to see if the browser supports service workers. if supported, the code registers the service worker and determines if the page is
actively controlled by the service worker. if it isn't, it prompts the user to reload the page so the service worker can take control. the code also reports any registration failures. if ('serviceworker' in navigator) { // register a service worker hosted at the root of the // site using the default scope. navigator.serviceworker.register('/sw.js').then(function(registration) { console.log('s...
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
syntax serviceworkerglobalscope.skipwaiting().then(function() { //do something }); returns a promise that immediately resolves with undefined. ...
... syntax serviceworkerglobalscope.skipwaiting().then(function() { //do something }); returns a promise that immediately resolves with undefined. ...
...oint during the service worker's execution, it will only have an effect if there's a newly installed service worker that might otherwise remain in the waiting state. therefore, it's common to call self.skipwaiting() from inside of an installevent handler. the following example causes a newly installed service worker to progress into the activating state, regardless of whether there is already an
active service worker. self.addeventlistener('install', function(event) { // the promise that skipwaiting() returns can be safely ignored. self.skipwaiting(); // perform any other actions required for your // service worker to install, potentially inside // of event.waituntil(); }); specifications specification status comment service workersthe definition of 'skipw...
ServiceWorkerGlobalScope - Web APIs
api represents the global execution context of a service worker. developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. an
active service worker is automatically restarted to respond to events, such as serviceworkerglobalscope.onfetch or serviceworkerglobalscope.onmessage. additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventt...
...ssociated with the service worker. serviceworkerglobalscope.registration read only contains the serviceworkerregistration object that represents the service worker's registration. serviceworkerglobalscope.caches read only contains the cachestorage object associated with the service worker. events activate occurs when a serviceworkerregistration acquires a new serviceworkerregistration.
active worker. also available via the serviceworkerglobalscope.onactivate property. contentdelete occurs when an item is removed from the content index. also available via the serviceworkerglobalscope.oncontentdelete property. fetch occurs when a fetch() is called. also available via the serviceworkerglobalscope.onfetch property. install occurs when a serviceworkerregistration acquires a new s...
...ggered when a call to syncmanager.register is made from a service worker client page. the attempt to sync is made either immediately if the network is available or as soon as the network becomes available. also available via the serviceworkerglobalscope.onsync property. methods serviceworkerglobalscope.skipwaiting() allows the current service worker registration to progress from waiting to
active state while service worker clients are using it. serviceworkerglobalscope implements workerglobalscope — which implements windoworworkerglobalscope. therefore it also has the following property available to it: globalfetch.fetch() starts the process of fetching a resource. this returns a promise that resolves to the response object representing the response to your request. this algorithm...
Service Worker API - Web APIs
on, it is activated. 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. it is only activated when there are no longer any pages loaded that are still using the old service worker. as soon as there are no more pages to be loaded, the new service worker activates (becoming the
active worker). activation can happen sooner using serviceworkerglobalscope.skipwaiting() and existing pages can be claimed by the
active worker using clients.claim(). you can listen for the installevent; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage api, and placing assets inside it that you'll want for running...
...fe cycle. cachestorage represents the storage for cache objects. it provides a master directory of all the named caches that a serviceworker can access, and maintains a mapping of string names to corresponding cache objects. client represents the scope of a service worker client. a service worker client is either a document in a browser context or a sharedworker, which is controlled by an
active worker. clients represents a container for a list of client objects; the main way to access the
active service worker clients at the current origin. extendableevent extends the lifetime of the install and activate events dispatched on the serviceworkerglobalscope, as part of the service worker lifecycle. this ensures that any functional events (like fetchevent) are not dispatched to the s...
...rstate associated with its serviceworker's state. syncevent the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker. syncmanager provides an interface for registering and listing sync registrations. windowclient represents the scope of a service worker client that is a document in a browser context, controlled by an
active worker. this is a special type of client object, with some additional methods and properties available. specifications specification status comment service workers working draft initial definition. ...
TextTrack.mode - Web APIs
current mode. the text track mode is one of the values listed below, under text track mode constants. text track mode constants the text track mode—sometimes identified using the idl enum texttrackmode—must be one of the following values: disabled the text track is currently disabled. while the track's presence is exposed in the dom, the user agent is otherwise ignoring it. no cues are
active, no events are being fired, and the user agent won't attempt to obtain the track's cues. this is the default value, unless the text track has the default boolean attribute is specified, in which case the default is showing. hidden the text track is currently
active but the cues aren't being displayed. if the user agent hasn't tried to obtain the track's cues yet, it will do so soon (thereby pop...
...es. this is the default value, unless the text track has the default boolean attribute is specified, in which case the default is showing. hidden the text track is currently
active but the cues aren't being displayed. if the user agent hasn't tried to obtain the track's cues yet, it will do so soon (thereby populating the track's texttrack.cues property). the user agent is keeping a list of the
active cues (in the track's
activecues property) and events are being fired at the corresponding times, even though the text isn't being displayed. showing the text track is currently enabled and is visible. ...
...this is the default value if the text track's default boolean attribute is specified. ...
Touch events - Web APIs
he touch surface. the interaction ends when the fingers are removed from the surface. during this interaction, an application receives touch events during the start, move, and end phases. touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. the touchevent interface encapsulates all of the touchpoints that are currently
active. the touch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the browser viewport. definitions surface the touch-sensitive surface. this may be a screen or trackpad. touch point a point of contact with the surface. this may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus. interfaces ...
...art:" + i + "."); } } this calls event.preventdefault() to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). then we get the context and pull the list of changed touch points out of the event's touchevent.changedtouches property. after that, we iterate over all the touch objects in the list, pushing them onto an array of
active touchpoints and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4-pixel radius circle will show up neatly. drawing as the touches move each time one or more fingers move, a touchmove event is delivered, resulting in our handlemove() function being called. its responsibility in this example is to update the cached touch information and to draw a line...
...ns this example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear. selecting a color for each touch to make each touch's drawing look different, the colorfortouch() function is used to pick a color based on the touch's unique identifier. this identifier is an opaque number, but we can at least rely on it differing between the currently-
active touches. function colorfortouch(touch) { var r = touch.identifier % 16; var g = math.floor(touch.identifier / 3) % 16; var b = math.floor(touch.identifier / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; console.log("color for touch with identifier " + touch.ide...
WebGL2RenderingContext.uniformBlockBinding() - Web APIs
uniformblockbinding a gluint specifying the binding point to which to bind the uniform block. return value none. ...
... uniformblockbinding a gluint specifying the binding point to which to bind the uniform block. return value none. ...
... uniformblockbinding a gluint specifying the binding point to which to bind the uniform block. return value none. ...
WebGL2RenderingContext - Web APIs
webgl2renderingcontext.bindbufferbase() binds a given webglbuffer to a given binding point (target) at a given index. webgl2renderingcontext.bindbufferrange() binds a range of a given webglbuffer to a given binding point (target) at a given index. webgl2renderingcontext.getuniformindices() retrieves the indices of a number of uniforms within a webglprogram. ...
...inds a given webglbuffer to a given binding point (target) at a given index. webgl2renderingcontext.bindbufferrange() binds a range of a given webglbuffer to a given binding point (target) at a given index. webgl2renderingcontext.getuniformindices() retrieves the indices of a number of uniforms within a webglprogram. webgl2renderingcontext.get
activeuniforms() retrieves information about
active uniforms within a webglprogram. ...
...point (target) at a given index. webgl2renderingcontext.getuniformindices() retrieves the indices of a number of uniforms within a webglprogram. webgl2renderingcontext.get
activeuniforms() retrieves information about
active uniforms within a webglprogram. webgl2renderingcontext.getuniformblockindex() retrieves the index of a uniform block within a webglprogram. webgl2renderingcontext.get
activeuniformblockparameter() retrieves information about an
active uniform block within a webglprogram. webgl2renderingcontext.get
activeuniformblockname() retrieves the name of the
active uniform block at a given index within a webglprogram. webgl2renderingcontext.uniformblockbinding() assigns binding points for
active uniform blocks. vertex array objects methods for working with webglvertexarr...
WebRTC connectivity - Web APIs
another user, a special description is created called an offer. this description includes all the information about the caller's proposed configuration for the call. the recipient then responds with an answer, which is a description of their end of the call. in this way, both devices share with one another the information needed in order to exchange media data. this exchange is handled using inter
active connectivity establishment (ice, a protocol which lets two devices use an intermediary to exchange offers and answers even if the two devices are separated by network address translation (nat). each peer, then, keeps two descriptions on hand: the local description, describing itself, and the remote description, describing the other end of the call. the offer/answer process is performed both whe...
...e whose ip address is local to the remote peer. the stun server then replies to the initiator's request with a candidate whose ip address is unrelated to the remote peer. relay a relay candidate is generated just like a server reflexive candidate ("srflx"), but using turn instead of stun. tcp candidate types tcp candidates (that is, candidates whose protocol is tcp) can be of these types:
active the transport will try to open an outbound connection but won't receive incoming connection requests. this is the most common type, and the only one that most user agents will gather. passive the transport will receive incoming connection attempts but won't attempt a connection itself. so the transport will try to simultaneously open a connection with its peer. choosing a candidate pair t...
...ust don't work out. for example, when renegotiating a connection—for example, to adapt to changing hardware or network configurations—it's possible that negotiation could reach a dead end, or some form of error might occur that prevents negotiation at all. there may be permissions issues or other problems as well, for that matter. ice rollbacks when renegotiating a connection that's already
active and a situation arises in which the negotiation fails, you don't really want to kill the already-running call. after all, you were most likely just trying to upgrade or downgrade the connection, or to otherwise make adaptations to an ongoing session. aborting the call would be an excessive reaction in that situation. instead, you can initiate an ice rollback. a rollback restores the sdp offer (a...
WebRTC API - Web APIs
ffer/answer negotiation process it describes and of the sdp descriptor of the session. rtcstatsreport provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling rtcpeerconnection.getstats(). details about using webrtc statistics can be found in webrtc statistics api. rtcicecandidate represents a candidate inter
active connectivity establishment (ice) server for establishing an rtcpeerconnection. rtcicetransport represents information about an ice transport. rtcpeerconnectioniceevent represents events that occur in relation to ice candidates with the target, usually an rtcpeerconnection. only one event is of this type: icecandidate. rtcrtpsender manages the encoding and transmission of data for a mediastr...
...used for each. ...
...use webrtc, there are several protocols, listed under resources. see also mediadevices mediastreamevent mediastreamconstraints mediastreamtrack messageevent mediastream media capture and streams api firefox multistream and renegotiation for jitsi videobridge peering through the webrtc fog with socketpeer inside the party bus: building a web app with multiple live video streams + inter
active graphics web media technologies ...
ARIA: application role - Accessibility
browse mode. the application role is designed to provide a means for widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and focus modes for interacting with web content. associated wai-aria roles, states, and properties document, article used to indicate parts of the application that should be treated as normal web content aria-
activedescendant used to manage focus inside the application. aria-label used to provide the name of the application or purpose of the widget that is being exposed. aria-describedby used to indicate the idref of an element that contains additional instructions for navigating or operating this element. aria-roledescription used to give the application a more descriptive role text for screen reader...
...action is completely under the web author's control and can be anything associated with the particular widget being implemented. 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 feedback via an aria live region to communicate the position and overlap status with other objects. focus is being managed via aria-
activedescendant. the tab , space and enter keys, as well as escape , must be handled by the application. the one exception is if focus is set to a standard widget inside the application that supports keyboard navigation from the browser, for example an input element. required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for ...
...as escape , must be handled by the application. the one exception is if focus is set to a standard widget inside the application that supports keyboard navigation from the browser, for example an input element. required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-
activedescendant is used to manage the focus inside the application container. set in response to keyboard or other application events that change focus or point of interaction. the application role does not have a related html widget and thus is completely free form. the author of the application must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside some...
ARIA: grid role - Accessibility
while it does not imply a specific visual presentation, it implies a relationship among elements. uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that are important t...
...se surface factors that are important to consider in keyboard interaction design. see aria authoring practices for more details cell elements have the role gridcell, unless they are a row or column header. then the elements are rowheader and columnheader, respectively. cell elements need to be owned by elements with a row role. rows can be grouped using rowgroups. if the grid is used as an inter
active widget, keyboard interactions need to be implemented. associated aria roles, states, and properties roles treegrid (subclass) if a grid has columns that can expanded or collapsed, a treegrid can be used. row a row inside the grid. rowgroup a group containing one or multiple rows. states and properties aria-level indicates the hierarchical level of the grid within other structu...
...grid but not change the value or values of the grid, the aria-readonly should be set to true. the default value is false. for many use cases, an html table element is sufficient as it and its elements already include many aria roles. keyboard interactions when a keyboard user encounters a grid, they navigate the rows and columns using the left, right, top and down keys. to activate the inter
active component, they will use the return and space keys. key action → moves focus one cell to the right. if focus is on the right-most cell in the row, focus does not move. ← moves focus one cell to the left. if focus is on the left-most cell in the row, focus does not move. ↓ moves focus one cell down. if focus is on the bottom cell in the co...
ARIA: row role - Accessibility
ls. a row can contain a number of attributes clarifying the row's role, including aria-colindex, aria-level, aria-rowindex, and aria-selected. if the row is within a treegrid, rows can include the aria-expanded attribute, using the attribute to indicate the present status. this is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present. to create an inter
active widget that has a tabular structure, use the grid pattern instead. if the interaction provides for the selection state of individual cells, if left to right and top to botton navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead. note: using the native html tab...
...tes, and properties context roles role="rowgroup" an optional contextual row parent, it establishes a relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row, it identifies the row as being part of a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element. role="grid" one of the three possible contexts (along with table and treegrid) in which you'll find a row, it identifies the row as being part of a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element. role="treegrid" si...
... collapsed. aria-expended="undefined" or the attribute is missing: the row is neither expandable nor collapsible. if the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author should reference the container by using the aria-controls attribute. aria-selected state only relevant if the row is in an inter
active container, such as a grid or treegrid, but not relevant if the row is in a table. the aria-selected attribute can take one of three values, or be omitted: aria-selected="true: row is currently selected aria-selected="false": row is not currently selected. aria-selected="undefined" or the attribute is missing: the row is not selectable. aria-colindex attribute the aria-colindex at...
ARIA: table role - Accessibility
the table value of the aria role attribute identifies the element containing the role as having a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element. <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </div> <div role="row" ...
...span> <span role="cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells. the cells are not focusable or selectable, though widgets within individual cells of the table can be inter
active. using a native html table element whenever possible is strongly encouraged. if a table maintains a selection state, has two-dimensional navigation, or allows the user to rearrange cell order use grid or treegrid instead. to create an aria table, add role="table" to the container element. within that container, each row has role="row" set and contains child cells. each cell has a role of eith...
...et to the position of a cell within the row or column, respectively. if the table includes cells that span multiple rows or multiple columns, then aria-rowspan or aria-colspan should be included as well. realize, it is much simpler to simply use the <table> element, along with all the related semantic elements and attributes that are all supported by all assistive technologies. to create an inter
active widget that has a tabular structure, use the grid pattern instead. if the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead. note: using a native html table...
ARIA: button role - Accessibility
xample</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 newnameinput = document.getelementbyid('newname'); let name = newnameinput.value; newnameinput.value = ''; // clear the te...
... <span role="button" tabindex="0" aria-pressed="false" onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
...if the button role is added to an element that is not focusable by itself (such as <span>, <div> or <p>) then, the tabindex attribute has to be used to make the button focusable. warning: be careful when marking up links with the button role. buttons are expected to be triggered using the space or enter key, while links are expected to be triggered using the enter ke...
ARIA: dialog role - Accessibility
additionally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met. labeling even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled. the label given to the dialog will provide contextual information for the inter
active controls inside the dialog. in other words, the dialog's label acts like a grouping label for the controls inside it (similar to how a <legend> element provides a grouping label for the controls inside a <fieldset> element). if a dialog already has a visible title bar, the text inside that bar can be used to label the dialog itself. the best way to achieve this is by using the aria-labelledby at...
...sed to title the dialog. aria-describedby use this attribute to describe the contents of the dialog. possible effects on user agents and assistive technology when the dialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api. when the dialog is correctly labeled and focus is moved to an element (often an inter
active element, such as a button) inside the dialog, screen readers should announce the dialog's accessible role, name and optionally description, along with announcing the focused element. note: opinions may differ on how assistive technology should handle this technique, and the order of announcements may differ depending on the assistive technolgy used. the information provided above is one of thos...
... specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'alert' in that specification. recommendation screen reader support coming soon ...
ARIA: textbox role - Accessibility
"txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element. ...
... aria-autocomplete attribute indicates whether and how the user's input into the field could trigger display of a prediction of the intended value. ...
...hen aria-multiline is false or not used), the return or enter key submits the form. in a multi-line use (when aria-multiline is true), return or enter key inserts a line break. javascript features all features associated with any and all properties and states must be maintained, and forms submission on enter or return on a single line textbox needs to be handled. focus event handler and aria-
activedescendent attribute if you are implementing a composite widget, such as a combobox composed of a text box and a listbox, you need to manage the aria-
activedescendent attribute using a handler. before using this technique, ensure that the browsers you need to target currently support it. see the specification of aria-descendent for further information. it is a better practice to use an <input>...
Text labels and names - Accessibility
e maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live inter
active example. see also <area> h24: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal dialog asking the user to make a choice or respond to an action being taken), give it a descriptive label or name, so that assistive technology users can easily discover what its purpose is. a di...
... see also <fieldset> <legend> form elements must be labeled all elements within a form must have a <label> that identifies its purpose. this applies to all types of <input> items, as well as <button>, <output>, <select>, <textarea>, <progress> and <meter> elements, as well as any element with the switch aria role. the form element ...
...ts. this includes svg images, <img>, <canvas>, <map>, and <area> elements, as well as <input> elements where type=image and <object> elements where the type starts with image/. the typical way to do this is with the alt attribute. be sure that the description conveys what is shown in the image. example <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> inter
active elements must be labeled if an element is intended for users to interact with it, it should have a label. inter
active elements include links (<a>), form elements, buttons, and any element that has a handler for mouse or keyboard events. the way to label an element depends on its type: for form elements, use a <label>; for links, buttons and clickable elements, the text content of the element typ...
:empty - CSS: Cascading Style Sheets
"box"> <p><!-- i will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. ...
...rowsers because of the non-collapsible whitespace and elements around this comment. --></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 inter
active content that is empty. ...
...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 inter
active content that is empty. all inter
active content must have an accessible name, which is created by providing a text value for the inter
active control's parent element (anchors, buttons, etc.). accessible names expose the inter
active control to the accessibility tree, an api that communicates information useful for assistive technologies. the text that provides the inter
active control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parseable by assistive technology. ...
-ms-high-contrast - CSS: Cascading Style Sheets
sible by dynamically replacing foreground and background colors with a user-specified theme. for web content, theme colors are mapped to content types. this media feature applies to bitmap media types. it does not accept min/max prefixes. syntax the -ms-high-contrast media feature is specified as one of the following values. values none ... no longer supported as of microsoft edge 18.
active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation. black-on-white indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation. white-on-black indicates that the subsequent styling rules will be applied when the syst...
...e applied when the system is placed in high contrast mode with a white-on-black color variation. formal syntax syntax not found in db! examples the following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively. @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. the availab...
... html markup over modifying content using css2 system color keywords. this helps keep the content more predictable. specifications not part of any standard. remarks as of microsoft edge 18, -ms-high-contrast: none is no longer supported. microsoft edge versions 18 and higher will be using the forced-colors media feature instead, but the forced-colors media feature specification is still being
actively worked on. the -ms-high-contrast media feature works with the -ms-high-contrast-adjust property. the -ms-high-contrast media feature was introduced in windows 8. ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
l-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko 52 (removed in bug 1306214); use currentcolor instead. ...
...rtext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-
active -moz-mac-chrome-in
active -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz...
...ree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-in
active ::-moz-xul-anonymous-block at-rules @-moz-document media features -moz-mac-graphite-theme -moz-maemo-classic -moz-device-pixel-ratio -moz-os-version -moz-scrollbar-end-backward -moz-scrollbar-end-forward -moz-scrollbar-start-backward -moz-scrollbar-start-forward -moz-scrollbar-thumb-proportional -moz-touch-enabled -moz-windows-accent-color-in-titlebar -moz-windows-classi...
align-self - CSS: Cascading Style Sheets
the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
... the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
... the property doesn't apply to block-level boxes, or to table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. ...
<angle> - CSS: Cascading Style Sheets
syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. ...
... syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. ...
... syntax the <angle> data type consists of a <number> followed by one of the units listed below. as with all dimensions, there is no space between the unit literal and the number. ...
animation-direction - CSS: Cascading Style Sheets
it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
animation-duration - CSS: Cascading Style Sheets
it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
animation-fill-mode - CSS: Cascading Style Sheets
it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
animation-name - CSS: Cascading Style Sheets
it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
animation-play-state - CSS: Cascading Style Sheets
resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence. ...
... resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence. ...
... resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence. ...
animation-timing-function - CSS: Cascading Style Sheets
it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
... it is often convenient to use the shorthand property animation to set all animation properties at once. ...
backface-visibility - CSS: Cascading Style Sheets
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. ...
... 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. ...
... 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. ...
background-blend-mode - CSS: Cascading Style Sheets
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. ...
... 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. ...
... 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. ...
background-origin - CSS: Cascading Style Sheets
note that background-origin is ignored when background-attachment is fixed. ...
... note that background-origin is ignored when background-attachment is fixed. ...
... note that background-origin is ignored when background-attachment is fixed. ...
background-position-x - CSS: Cascading Style Sheets
the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
background-position-y - CSS: Cascading Style Sheets
the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
background-repeat - CSS: Cascading Style Sheets
by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). ...
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). ...
... by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). ...
background-size - CSS: Cascading Style Sheets
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. ...
... 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. ...
... 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. ...
<basic-shape> - CSS: Cascading Style Sheets
syntax the <basic-shape> data type is defined with one of the basic shape functions listed below. when creating a shape, the reference box is defined by each property that uses <basic-shape> values. ...
... syntax the <basic-shape> data type is defined with one of the basic shape functions listed below. when creating a shape, the reference box is defined by each property that uses <basic-shape> values. ...
... syntax the <basic-shape> data type is defined with one of the basic shape functions listed below. when creating a shape, the reference box is defined by each property that uses <basic-shape> values. ...
border-bottom-style - CSS: Cascading Style Sheets
note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
border-bottom - CSS: Cascading Style Sheets
as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. ...
... as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. ...
... as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. ...
border-collapse - CSS: Cascading Style Sheets
when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
... when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
... when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
border-image-slice - CSS: Cascading Style Sheets
the slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. ...
... the slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. ...
... the slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. ...
border-image-source - CSS: Cascading Style Sheets
the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. ...
... the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. ...
... the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. ...
border-image-width - CSS: Cascading Style Sheets
if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
... if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
... if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
border-image - CSS: Cascading Style Sheets
note: you should specify a separate border-style in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. ...
... note: you should specify a separate border-style in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. ...
... note: you should specify a separate border-style in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. ...
border-left-style - CSS: Cascading Style Sheets
note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
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. ...
... 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. ...
... 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. ...
border-right-style - CSS: Cascading Style Sheets
note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
... note: the specification doesn't define how borders of different styles connect in the corners. ...
border-top-left-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. ...
... the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. ...
... the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. ...
border-top-right-radius - CSS: Cascading Style Sheets
the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. ...
... the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. ...
... the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. ...
border-top-style - CSS: Cascading Style Sheets
the specification doesn't define how borders of different styles connect in the corners. ...
... the specification doesn't define how borders of different styles connect in the corners. ...
... the specification doesn't define how borders of different styles connect in the corners. ...
clear - CSS: Cascading Style Sheets
when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. the non-floated block's top margin collapses. ...
... when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. the non-floated block's top margin collapses. ...
... when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. the non-floated block's top margin collapses. ...
column-rule - CSS: Cascading Style Sheets
it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color. ...
... it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color. ...
... it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color. ...
counter-increment - CSS: Cascading Style Sheets
note: the counter's value can be reset to an arbitrary number using the counter-reset css property. ...
... note: the counter's value can be reset to an arbitrary number using the counter-reset css property. ...
... note: the counter's value can be reset to an arbitrary number using the counter-reset css property. ...
counter-reset - CSS: Cascading Style Sheets
note: the counter's value can be increased or decreased using the counter-increment css property. ...
... note: the counter's value can be increased or decreased using the counter-increment css property. ...
... note: the counter's value can be increased or decreased using the counter-increment css property. ...
empty-cells - CSS: Cascading Style Sheets
this property has an effect only when the border-collapse property is separate. ...
... this property has an effect only when the border-collapse property is separate. ...
... this property has an effect only when the border-collapse property is separate. ...
brightness() - CSS: Cascading Style Sheets
syntax brightness(amount) parameters amount the brightness of the result, specified as a <number> or a <percentage>. a value under 100% darkens the image, while a value over 100% brightens it. ...
... syntax brightness(amount) parameters amount the brightness of the result, specified as a <number> or a <percentage>. a value under 100% darkens the image, while a value over 100% brightens it. ...
... syntax brightness(amount) parameters amount the brightness of the result, specified as a <number> or a <percentage>. a value under 100% darkens the image, while a value over 100% brightens it. ...
drop-shadow() - CSS: Cascading Style Sheets
a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. note: this function is somewhat similar to the box-shadow property. ...
... a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. note: this function is somewhat similar to the box-shadow property. ...
... a drop shadow is effectively a blurred, offset version of the input image's alpha mask, drawn in a specific color and composited below the image. note: this function is somewhat similar to the box-shadow property. ...
sepia() - CSS: Cascading Style Sheets
syntax sepia(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely sepia, while a value of 0% leaves the input unchanged. ...
... syntax sepia(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely sepia, while a value of 0% leaves the input unchanged. ...
... syntax sepia(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely sepia, while a value of 0% leaves the input unchanged. ...
flex-basis - CSS: Cascading Style Sheets
note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. ...
... note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. ...
... note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. ...
flex-direction - CSS: Cascading Style Sheets
note that the values row and row-reverse are affected by the directionality of the flex container. ...
... note that the values row and row-reverse are affected by the directionality of the flex container. ...
... note that the values row and row-reverse are affected by the directionality of the flex container. ...
flex-wrap - CSS: Cascading Style Sheets
see using css flexible boxes for more properties and information. ...
... see using css flexible boxes for more properties and information. ...
... see using css flexible boxes for more properties and information. ...
font-family - CSS: Cascading Style Sheets
values are separated by commas to indicate that they are alternatives. the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. ...
... values are separated by commas to indicate that they are alternatives. the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. ...
... values are separated by commas to indicate that they are alternatives. the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. ...
font-style - CSS: Cascading Style Sheets
italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. ...
... italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. ...
... italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. ...
font - CSS: Cascading Style Sheets
as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
... as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
... as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
height - CSS: Cascading Style Sheets
the min-height and max-height properties override height. ...
... the min-height and max-height properties override height. ...
... the min-height and max-height properties override height. ...
ime-mode - CSS: Cascading Style Sheets
it was introduced by microsoft with internet explorer 5 as a proprietary extension: -ms-ime-mode attribute | imemode property. note: in general, it's not appropriate for a public web site to change the ime mode. ...
... if it was previously set by legacy code. syntax the ime-mode property is specified using one of the keyword values listed below. values auto no change is made to the current input method editor state. this is the default. normal the ime state should be normal; this value can be used in a user style sheet to override the page's setting. this value is not supported by internet explorer.
active the input method editor is initially
active; text entry is performed through it unless the user specifically dismisses it. not supported on linux. in
active the input method editor is initially in
active, but the user may activate it if they wish. not supported on linux. disabled the input method editor is disabled and may not be activated by the user. description unlike internet explorer, ...
...put[type=password] { ime-mode: auto !important; } the mac version of gecko 1.9 (firefox 3) can't recover the previous state of the ime when a field for which it is disabled loses focus, so mac users may get grumpy when you use the disabled value. formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | normal |
active | in
active | disabled examples disabling input method support this example disables input method support for a form field. in the past, this was commonly used on fields that entered data into databases which didn't support extended character sets. <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended ch...
justify-items - CSS: Cascading Style Sheets
the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. ...
... the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. ...
... the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. ...
justify-self - CSS: Cascading Style Sheets
the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. ...
... the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. ...
... the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. ...
list-style-image - CSS: Cascading Style Sheets
note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
... note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
... note: this property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
margin-bottom - CSS: Cascading Style Sheets
this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
margin-left - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
... the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
... the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
margin-right - CSS: Cascading Style Sheets
the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
... the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
... the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
margin-top - CSS: Cascading Style Sheets
this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
margin - CSS: Cascading Style Sheets
the top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>. note: margins create extra space around an element. in contrast, padding creates extra space within an element. ...
... the top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>. note: margins create extra space around an element. in contrast, padding creates extra space within an element. ...
... the top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>. note: margins create extra space around an element. in contrast, padding creates extra space within an element. ...
max-height - CSS: Cascading Style Sheets
max-height overrides height, but min-height overrides max-height. ...
... max-height overrides height, but min-height overrides max-height. ...
... max-height overrides height, but min-height overrides max-height. ...
max-width - CSS: Cascading Style Sheets
max-width overrides width, but min-width overrides max-width. ...
... max-width overrides width, but min-width overrides max-width. ...
... max-width overrides width, but min-width overrides max-width. ...
min-height - CSS: Cascading Style Sheets
the element's height is set to the value of min-height whenever min-height is larger than max-height or height. ...
... the element's height is set to the value of min-height whenever min-height is larger than max-height or height. ...
... the element's height is set to the value of min-height whenever min-height is larger than max-height or height. ...
min-width - CSS: Cascading Style Sheets
the element's width is set to the value of min-width whenever min-width is larger than max-width or width. ...
... the element's width is set to the value of min-width whenever min-width is larger than max-width or width. ...
... the element's width is set to the value of min-width whenever min-width is larger than max-width or width. ...
opacity - CSS: Cascading Style Sheets
syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). ...
... syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). ...
... syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). ...
outline-style - CSS: Cascading Style Sheets
it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
... it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
... it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
outline-width - CSS: Cascading Style Sheets
it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
... it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
... it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
overflow-wrap - CSS: Cascading Style Sheets
note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. ...
... note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. ...
... note: in contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing. ...
padding-bottom - CSS: Cascading Style Sheets
an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
padding-left - CSS: Cascading Style Sheets
an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
padding-right - CSS: Cascading Style Sheets
an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
padding-top - CSS: Cascading Style Sheets
an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
... an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
padding - CSS: Cascading Style Sheets
an element's padding area is the space between its content and its border. note: padding creates extra space within an element. in contrast, margin creates extra space around an element. ...
... an element's padding area is the space between its content and its border. note: padding creates extra space within an element. in contrast, margin creates extra space around an element. ...
... an element's padding area is the space between its content and its border. note: padding creates extra space within an element. in contrast, margin creates extra space around an element. ...
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. ...
... the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. ...
... the perspective-origin and perspective properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed. ...
position - CSS: Cascading Style Sheets
syntax the position property is specified as a single keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. ...
... syntax the position property is specified as a single keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. ...
... syntax the position property is specified as a single keyword chosen from the list of values below. values static the element is positioned according to the normal flow of the document. ...
scroll-behavior - CSS: Cascading Style Sheets
note that any other scrolls, such as those performed by the user, are not affected by this property. when this property is specified on the root element, it applies to the viewport instead. ...
... note that any other scrolls, such as those performed by the user, are not affected by this property. when this property is specified on the root element, it applies to the viewport instead. ...
... note that any other scrolls, such as those performed by the user, are not affected by this property. when this property is specified on the root element, it applies to the viewport instead. ...
scroll-padding-block - CSS: Cascading Style Sheets
the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
scroll-padding-inline - CSS: Cascading Style Sheets
the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
scroll-padding - CSS: Cascading Style Sheets
the scroll-padding-* properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding-* properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
... the scroll-padding-* properties define offsets for the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. ...
scroll-snap-type - CSS: Cascading Style Sheets
specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. ...
... specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. ...
... specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent. ...
shape-image-threshold - CSS: Cascading Style Sheets
any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. ...
... any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. ...
... any pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. ...
shape-margin - CSS: Cascading Style Sheets
the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. ...
... the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. ...
... the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. ...
text-decoration-line - CSS: Cascading Style Sheets
when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
... when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
... when setting multiple line-decoration properties at once, it may be more convenient to use the text-decoration shorthand property instead. ...
text-decoration-skip-ink - CSS: Cascading Style Sheets
text-decoration-skip-ink is not part of the text-decoration shorthand. ...
... text-decoration-skip-ink is not part of the text-decoration shorthand. ...
... text-decoration-skip-ink is not part of the text-decoration shorthand. ...
text-decoration - CSS: Cascading Style Sheets
text decorations are drawn across descendant text elements. ...
... text decorations are drawn across descendant text elements. ...
... text decorations are drawn across descendant text elements. ...
text-emphasis - CSS: Cascading Style Sheets
the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. ...
... the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. ...
... the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. ...
text-indent - CSS: Cascading Style Sheets
horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. ...
... horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. ...
... horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. ...
text-overflow - CSS: Cascading Style Sheets
the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. ...
... the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. ...
... the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. ...
rotate3d() - CSS: Cascading Style Sheets
in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation. ...
... in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation. ...
... in 3d space, rotations have three degrees of liberty, which together describe a single axis of rotation. ...
rotateX() - CSS: Cascading Style Sheets
the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatex(a) is equivalent to rotate3d(1, 0, 0, a). ...
rotateY() - CSS: Cascading Style Sheets
the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatey(a) is equivalent to rotate3d(0, 1, 0, a). ...
rotateZ() - CSS: Cascading Style Sheets
the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). ...
... the axis of rotation passes through an origin, defined by the transform-origin css property. note: rotatez(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). ...
skew() - CSS: Cascading Style Sheets
this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. ...
skewX() - CSS: Cascading Style Sheets
this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction. ...
skewY() - CSS: Cascading Style Sheets
this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. ...
... this transformation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction. ...
transform-style - CSS: Cascading Style Sheets
if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
... if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
... if flattened, the element's children will not exist on their own in the 3d-space. as this property is not inherited, it must be set for all non-leaf descendants of the element. ...
transform - CSS: Cascading Style Sheets
if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. ...
... if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. ...
... if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. ...
transition-delay - CSS: Cascading Style Sheets
the delay may be zero, positive, or negative: a value of 0s (or 0ms) will begin the transition effect immediately. a positive value will delay the start of the transition effect for the given length of time. ...
... the delay may be zero, positive, or negative: a value of 0s (or 0ms) will begin the transition effect immediately. a positive value will delay the start of the transition effect for the given length of time. ...
... the delay may be zero, positive, or negative: a value of 0s (or 0ms) will begin the transition effect immediately. a positive value will delay the start of the transition effect for the given length of time. ...
transition-duration - CSS: Cascading Style Sheets
you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. ...
... you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. ...
... you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. ...
transition-property - CSS: Cascading Style Sheets
note: the set of properties that can be animated is subject to change. as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results. ...
... note: the set of properties that can be animated is subject to change. as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results. ...
... note: the set of properties that can be animated is subject to change. as such, you should avoid including any properties in the list that don't currently animate, as someday they might, causing unexpected results. ...
transition-timing-function - CSS: Cascading Style Sheets
this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. this acceleration curve is defined using one <timing-function> for each property to be transitioned. ...
... this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. this acceleration curve is defined using one <timing-function> for each property to be transitioned. ...
... this, in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration. this acceleration curve is defined using one <timing-function> for each property to be transitioned. ...
var() - CSS: Cascading Style Sheets
the var() function cannot be used in property names, selectors or anything else besides property values. ...
... the var() function cannot be used in property names, selectors or anything else besides property values. ...
... the var() function cannot be used in property names, selectors or anything else besides property values. ...
vertical-align - CSS: Cascading Style Sheets
the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
... the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
... the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
visibility - CSS: Cascading Style Sheets
to both hide an element and remove it from the document layout, set the display property to none instead of using visibility. ...
... to both hide an element and remove it from the document layout, set the display property to none instead of using visibility. ...
... to both hide an element and remove it from the document layout, set the display property to none instead of using visibility. ...
white-space - CSS: Cascading Style Sheets
note: to make words break within themselves, use overflow-wrap, word-break, or hyphens instead. ...
... note: to make words break within themselves, use overflow-wrap, word-break, or hyphens instead. ...
... note: to make words break within themselves, use overflow-wrap, word-break, or hyphens instead. ...
width - CSS: Cascading Style Sheets
the min-width and max-width properties override width. ...
... the min-width and max-width properties override width. ...
... the min-width and max-width properties override width. ...
z-index - CSS: Cascading Style Sheets
for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context. ...
... for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context. ...
... for a positioned box (that is, one with any position other than static), the z-index property specifies: the stack level of the box in the current stacking context. ...
Getting Started - Developer guides
allow you to do the following: make requests to the server without reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality. this is where xmlhttprequest comes in. its predecessor originated in internet explorer as an
activex object called xmlhttp. then, mozilla, safari, and other browsers followed, implementing an xmlhttprequest object that supported the methods and properties of microsoft's original
activex object. meanwhile, microsoft implemented xmlhttprequest as well. // old compatibility code, no longer needed. if (window.xmlhttprequest) { // mozilla, safari, ie7+ ... httprequest = new xmlhttprequest(); } ...
...xmlhttp. then, mozilla, safari, and other browsers followed, implementing an xmlhttprequest object that supported the methods and properties of microsoft's original
activex object. meanwhile, microsoft implemented xmlhttprequest as well. // old compatibility code, no longer needed. if (window.xmlhttprequest) { // mozilla, safari, ie7+ ... httprequest = new xmlhttprequest(); } else if (window.
activexobject) { // ie 6 and older httprequest = new
activexobject("microsoft.xmlhttp"); } note: for illustration purposes, the above is a somewhat simplified version of the code to be used for creating an xmlhttp instance. for a more realistic example, see step 3 of this article. after making a request, you will receive a response back. at this stage, you need to tell the xmlhttp request object ...
...rocessing it. if (httprequest.readystate === xmlhttprequest.done) { // everything is good, the response was received. } else { // not ready yet. } the full list of the readystate values is documented at xmlhttprequest.readystate and is as follows: 0 (uninitialized) or (request not initialized) 1 (loading) or (server connection established) 2 (loaded) or (request received) 3 (inter
active) or (processing request) 4 (complete) or (request finished and response is ready) next, check the http response status codes of the http response. the possible codes are listed at the w3c. in the following example, we differentiate between a successful and unsuccessful ajax call by checking for a 200 ok response code. if (httprequest.status === 200) { // perfect! } else { // there was...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
content categories flow content, heading content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, heading content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, heading content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
<area> - HTML: Hypertext Markup Language
content categories flow content, phrasing content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. ...
... content categories flow content, phrasing content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. ...
... content categories flow content, phrasing content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. ...
<aside>: The Aside element - HTML: Hypertext Markup Language
content categories flow content, sectioning content, palpable content. permitted content flow content. ...
... content categories flow content, sectioning content, palpable content. permitted content flow content. ...
... content categories flow content, sectioning content, palpable content. permitted content flow content. ...
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
the text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example). ...
... the text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example). ...
... the text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example). ...
<br>: The Line Break element - HTML: Hypertext Markup Language
as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. ...
... as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. ...
... as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. ...
<col> - HTML: Hypertext Markup Language
<col> allows styling columns using css, but only a few properties will have an effect on the column (see the css 2.1 specification for a list). content categories none. ...
... <col> allows styling columns using css, but only a few properties will have an effect on the column (see the css 2.1 specification for a list). content categories none. ...
... <col> allows styling columns using css, but only a few properties will have an effect on the column (see the css 2.1 specification for a list). content categories none. ...
<data> - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
content categories flow content, phrasing content. permitted content either phrasing content or zero or more <option> elements. ...
... content categories flow content, phrasing content. permitted content either phrasing content or zero or more <option> elements. ...
... content categories flow content, phrasing content. permitted content either phrasing content or zero or more <option> elements. ...
<dd>: The Description Details element - HTML: Hypertext Markup Language
content categories none. permitted content flow content. tag omission the start tag is required. ...
... content categories none. permitted content flow content. tag omission the start tag is required. ...
... content categories none. permitted content flow content. tag omission the start tag is required. ...
<em>: The Emphasis element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. ...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. ...
... as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. ...
... as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. ...
<figcaption>: The Figure Caption element - HTML: Hypertext Markup Language
content categories none. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories none. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. ...
... content categories none. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. ...
<footer> - HTML: Hypertext Markup Language
content categories flow content, palpable content. ...
... content categories flow content, palpable content. ...
... content categories flow content, palpable content. ...
<header> - HTML: Hypertext Markup Language
content categories flow content, palpable content. ...
... content categories flow content, palpable content. ...
... content categories flow content, palpable content. ...
<hgroup> - HTML: Hypertext Markup Language
content categories flow content, heading content, palpable content. permitted content one or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h6>. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, heading content, palpable content. permitted content one or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h6>. tag omission none, both the starting and ending tag are mandatory. ...
... content categories flow content, heading content, palpable content. permitted content one or more <h1>, <h2>, <h3>, <h4>, <h5>, and/or <h6>. tag omission none, both the starting and ending tag are mandatory. ...
<input type="email"> - HTML: Hypertext Markup Language
the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. ...
... the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. ...
... the input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted. ...
<input type="image"> - HTML: Hypertext Markup Language
value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. ...
... value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. ...
... value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. ...
<input type="reset"> - HTML: Hypertext Markup Language
you should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). ...
... you should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). ...
... you should usually avoid including reset buttons in your forms. they're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button). ...
<input type="search"> - HTML: Hypertext Markup Language
value a domstring representing the value contained in the search field. ...
... value a domstring representing the value contained in the search field. ...
... value a domstring representing the value contained in the search field. ...
<input type="week"> - HTML: Hypertext Markup Language
the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. ...
... the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. ...
... the control's user interface varies from browser to browser; cross-browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time. ...
<ins> - HTML: Hypertext Markup Language
content categories phrasing content or flow content. permitted content transparent. ...
... content categories phrasing content or flow content. permitted content transparent. ...
... content categories phrasing content or flow content. permitted content transparent. ...
<legend> - HTML: Hypertext Markup Language
content categories none. permitted content phrasing content and headings (h1–h6 elements). tag omission none, both the starting and ending tag are mandatory. ...
... content categories none. permitted content phrasing content and headings (h1–h6 elements). tag omission none, both the starting and ending tag are mandatory. ...
... content categories none. permitted content phrasing content and headings (h1–h6 elements). tag omission none, both the starting and ending tag are mandatory. ...
<mark>: The Mark Text element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, labelable content, palpable content. permitted content phrasing content, but there must be no <progress> element among its descendants. ...
... content categories flow content, phrasing content, labelable content, palpable content. permitted content phrasing content, but there must be no <progress> element among its descendants. ...
... content categories flow content, phrasing content, labelable content, palpable content. permitted content phrasing content, but there must be no <progress> element among its descendants. ...
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
<sub>: The Subscript element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
<sup>: The Superscript element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. ...
<tbody>: The Table Body element - HTML: Hypertext Markup Language
the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. ...
... the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. ...
... the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. ...
<th> - HTML: Hypertext Markup Language
content categories none. permitted content flow content, but with no header, footer, sectioning content, or heading content descendants. tag omission the start tag is mandatory. ...
... content categories none. permitted content flow content, but with no header, footer, sectioning content, or heading content descendants. tag omission the start tag is mandatory. ...
... content categories none. permitted content flow content, but with no header, footer, sectioning content, or heading content descendants. tag omission the start tag is mandatory. ...
<tr>: The Table Row element - HTML: Hypertext Markup Language
to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. ...
... to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. ...
... to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. ...
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
the html <track> element is used as a child of the media elements, <audio> and <video>. it lets you specify timed text tracks (or time-based data), for example to automatically handle subtitles. the tracks are formatted in webvtt format (.vtt files) — web video text tracks. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories none permitted content none, it is an empty element. tag omission as it is a void element, the start tag must be present and the end tag must not be present. permitted parents a media element, <audio> or <video>. im...
... this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement. ...
...event is also sent to the htmltrackelement. ...
<wbr> - HTML: Hypertext Markup Language
content categories flow content, phrasing content. ...
... content categories flow content, phrasing content. ...
... content categories flow content, phrasing content. ...
contenteditable - HTML: Hypertext Markup Language
the attribute must take one of the following values: true or an empty string, which indicates that the element is editable. false, which indicates that the element is not editable. ...
... the attribute must take one of the following values: true or an empty string, which indicates that the element is editable. false, which indicates that the element is not editable. ...
... the attribute must take one of the following values: true or an empty string, which indicates that the element is editable. false, which indicates that the element is not editable. ...
data-* - HTML: Hypertext Markup Language
all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property gives access to them. ...
... all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property gives access to them. ...
... all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property gives access to them. ...
tabindex - HTML: Hypertext Markup Language
the tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the tab key, hence the name). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. it accepts an integer as a value, with different results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with javascript or visually by clicking with the mouse. it's mostly useful to create accessible widgets with javascript. a negative value is useful when you have...
...e content. instead, write the document with the elements in a logical sequence. if you set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too. check out this fiddle to understand the scrolling effects of tabindex. accessibility concerns avoid using the tabindex attribute in conjunction with non-inter
active content to make something intended to be inter
active focusable by keyboard input. an example of this would be using a <div> element to describe a button, instead of the <button> element. inter
active components authored using non-inter
active elements are not be listed in the accessibility tree. this prevents assistive technology from being able to navigate to and manipulate those components. the ...
...these elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by aria. ...
constructor - JavaScript
syntax constructor([arguments]) { ... } description a constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object. ...
... syntax constructor([arguments]) { ... } description a constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object. ...
... syntax constructor([arguments]) { ... } description a constructor enables you to provide any custom initialization that must be done before any other methods can be called on an instantiated object. ...
extends - JavaScript
syntax class childclass extends parentclass { ... } description the extends keyword can be used to subclass custom classes as well as built-in objects. the .prototype of the extension must be an object or null. ...
... syntax class childclass extends parentclass { ... } description the extends keyword can be used to subclass custom classes as well as built-in objects. the .prototype of the extension must be an object or null. ...
... syntax class childclass extends parentclass { ... } description the extends keyword can be used to subclass custom classes as well as built-in objects. the .prototype of the extension must be an object or null. ...
static - JavaScript
syntax static methodname() { ... ...
... syntax static methodname() { ... ...
... syntax static methodname() { ... ...
Array.prototype.reduceRight() - JavaScript
see also array.prototype.reduce() for left-to-right. ...
... see also array.prototype.reduce() for left-to-right. ...
... see also array.prototype.reduce() for left-to-right. ...
Array.prototype.concat() - JavaScript
syntax const new_array = old_array.concat([value1[, value2[, ...[, valuen]]]]) parameters valuen optional arrays and/or values to concatenate into a new array. ...
... syntax const new_array = old_array.concat([value1[, value2[, ...[, valuen]]]]) parameters valuen optional arrays and/or values to concatenate into a new array. ...
... syntax const new_array = old_array.concat([value1[, value2[, ...[, valuen]]]]) parameters valuen optional arrays and/or values to concatenate into a new array. ...
Array.prototype.copyWithin() - JavaScript
syntax arr.copywithin(target[, start[, end]]) parameters target zero-based index at which to copy the sequence to. if negative, target will be counted from the end. if target is at or greater than arr.length, nothing will be copied. ...
... syntax arr.copywithin(target[, start[, end]]) parameters target zero-based index at which to copy the sequence to. if negative, target will be counted from the end. if target is at or greater than arr.length, nothing will be copied. ...
... syntax arr.copywithin(target[, start[, end]]) parameters target zero-based index at which to copy the sequence to. if negative, target will be counted from the end. if target is at or greater than arr.length, nothing will be copied. ...
Array.prototype.entries() - JavaScript
syntax array.entries() return value a new array iterator object. ...
... syntax array.entries() return value a new array iterator object. ...
... syntax array.entries() return value a new array iterator object. ...
Array.prototype.every() - JavaScript
syntax arr.every(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
... syntax arr.every(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
... syntax arr.every(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
Array.prototype.fill() - JavaScript
syntax arr.fill(value[, start[, end]]) parameters value value to fill the array with. (note all elements in the array will be this exact value.) start optional start index, default 0. ...
... syntax arr.fill(value[, start[, end]]) parameters value value to fill the array with. (note all elements in the array will be this exact value.) start optional start index, default 0. ...
... syntax arr.fill(value[, start[, end]]) parameters value value to fill the array with. (note all elements in the array will be this exact value.) start optional start index, default 0. ...
Array.prototype.find() - JavaScript
if you need the index of the found element in the array, use findindex(). if you need to find the index of a value, use array.prototype.indexof(). ...
... if you need the index of the found element in the array, use findindex(). if you need to find the index of a value, use array.prototype.indexof(). ...
... if you need the index of the found element in the array, use findindex(). if you need to find the index of a value, use array.prototype.indexof(). ...
Array.prototype.findIndex() - JavaScript
see also the find() method, which returns the value of an array element, instead of its index. ...
... see also the find() method, which returns the value of an array element, instead of its index. ...
... see also the find() method, which returns the value of an array element, instead of its index. ...
Array.prototype.keys() - JavaScript
syntax arr.keys() return value a new array iterator object. ...
... syntax arr.keys() return value a new array iterator object. ...
... syntax arr.keys() return value a new array iterator object. ...
Array.prototype.lastIndexOf() - JavaScript
syntax arr.lastindexof(searchelement[, fromindex]) parameters searchelement element to locate in the array. ...
... syntax arr.lastindexof(searchelement[, fromindex]) parameters searchelement element to locate in the array. ...
... syntax arr.lastindexof(searchelement[, fromindex]) parameters searchelement element to locate in the array. ...
Array.prototype.map() - JavaScript
syntax let new_array = arr.map(function callback( currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters callback function that is called for every element of arr. ...
... syntax let new_array = arr.map(function callback( currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters callback function that is called for every element of arr. ...
... syntax let new_array = arr.map(function callback( currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters callback function that is called for every element of arr. ...
Array.prototype.pop() - JavaScript
syntax arrname.pop() return value the removed element from the array; undefined if the array is empty. description the pop method removes the last element from an array and returns that value to the caller. ...
... syntax arrname.pop() return value the removed element from the array; undefined if the array is empty. description the pop method removes the last element from an array and returns that value to the caller. ...
... syntax arrname.pop() return value the removed element from the array; undefined if the array is empty. description the pop method removes the last element from an array and returns that value to the caller. ...
Array.prototype.reverse() - JavaScript
syntax a.reverse() return value the reversed array. description the reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. ...
... syntax a.reverse() return value the reversed array. description the reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. ...
... syntax a.reverse() return value the reversed array. description the reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. ...
Array.prototype.some() - JavaScript
syntax arr.some(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
... syntax arr.some(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
... syntax arr.some(callback(element[, index[, array]])[, thisarg]) parameters callback a function to test for each element, taking three arguments: element the current element being processed in the array. ...
Array.prototype.splice() - JavaScript
syntax let arrdeleteditems = array.splice(start[, deletecount[, item1[, item2[, ...]]]]) parameters start the index at which to start changing the array. if greater than the length of the array, start will be set to the length of the array. ...
... syntax let arrdeleteditems = array.splice(start[, deletecount[, item1[, item2[, ...]]]]) parameters start the index at which to start changing the array. if greater than the length of the array, start will be set to the length of the array. ...
... syntax let arrdeleteditems = array.splice(start[, deletecount[, item1[, item2[, ...]]]]) parameters start the index at which to start changing the array. if greater than the length of the array, start will be set to the length of the array. ...
ArrayBuffer.isView() - JavaScript
syntax arraybuffer.isview(value) parameters value the value to be checked. return value true if the given argument is one of the arraybuffer views; otherwise, false. ...
... syntax arraybuffer.isview(value) parameters value the value to be checked. return value true if the given argument is one of the arraybuffer views; otherwise, false. ...
... syntax arraybuffer.isview(value) parameters value the value to be checked. return value true if the given argument is one of the arraybuffer views; otherwise, false. ...
ArrayBuffer.prototype.slice() - JavaScript
syntax arraybuffer.slice(begin[, end]) parameters begin zero-based byte index at which to begin slicing. end optional byte index before which to end slicing. ...
... syntax arraybuffer.slice(begin[, end]) parameters begin zero-based byte index at which to begin slicing. end optional byte index before which to end slicing. ...
... syntax arraybuffer.slice(begin[, end]) parameters begin zero-based byte index at which to begin slicing. end optional byte index before which to end slicing. ...
Atomics.isLockFree() - JavaScript
syntax atomics.islockfree(size) parameters size the size in bytes to check. ...
... syntax atomics.islockfree(size) parameters size the size in bytes to check. ...
... syntax atomics.islockfree(size) parameters size the size in bytes to check. ...
BigInt.prototype.toString() - JavaScript
syntax bigintobj.tostring([radix]) parameters radixoptional optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified bigint object. ...
... syntax bigintobj.tostring([radix]) parameters radixoptional optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified bigint object. ...
... syntax bigintobj.tostring([radix]) parameters radixoptional optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified bigint object. ...
BigInt.prototype.valueOf() - JavaScript
syntax bigintobj.valueof() return value a bigint representing the primitive value of the specified bigint object. ...
... syntax bigintobj.valueof() return value a bigint representing the primitive value of the specified bigint object. ...
... syntax bigintobj.valueof() return value a bigint representing the primitive value of the specified bigint object. ...
Boolean() constructor - JavaScript
syntax new boolean([value]) parameters value optional the initial value of the boolean object. ...
... syntax new boolean([value]) parameters value optional the initial value of the boolean object. ...
... syntax new boolean([value]) parameters value optional the initial value of the boolean object. ...
DataView.prototype.buffer - JavaScript
description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the dataview is constructed and cannot be changed. ...
... description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the dataview is constructed and cannot be changed. ...
... description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the dataview is constructed and cannot be changed. ...
DataView.prototype.byteLength - JavaScript
description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
... description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
... description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
DataView.prototype.byteOffset - JavaScript
description the byteoffset property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
... description the byteoffset property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
... description the byteoffset property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when an dataview is constructed and cannot be changed. ...
DataView.prototype.getUint8() - JavaScript
syntax dataview.getuint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data. return value an unsigned 8-bit integer number. ...
... syntax dataview.getuint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data. return value an unsigned 8-bit integer number. ...
... syntax dataview.getuint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data. return value an unsigned 8-bit integer number. ...
DataView.prototype.setBigInt64() - JavaScript
syntax dataview.setbigint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
... syntax dataview.setbigint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
... syntax dataview.setbigint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
DataView.prototype.setBigUint64() - JavaScript
syntax dataview.setbiguint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
... syntax dataview.setbiguint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
... syntax dataview.setbiguint64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to store the data from. value the value to set as a bigint. ...
DataView.prototype.setInt8() - JavaScript
syntax dataview.setint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
... syntax dataview.setint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
... syntax dataview.setint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
DataView.prototype.setUint16() - JavaScript
syntax dataview.setuint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
... syntax dataview.setuint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
... syntax dataview.setuint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
DataView.prototype.setUint32() - JavaScript
syntax dataview.setuint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
... syntax dataview.setuint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
... syntax dataview.setuint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. ...
DataView.prototype.setUint8() - JavaScript
syntax dataview.setuint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
... syntax dataview.setuint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
... syntax dataview.setuint8(byteoffset, value) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. return value undefined. ...
Date.prototype.getFullYear() - JavaScript
syntax dateobj.getfullyear() return value a number corresponding to the year of the given date, according to local time. description the value returned by getfullyear() is an absolute number. ...
... syntax dateobj.getfullyear() return value a number corresponding to the year of the given date, according to local time. description the value returned by getfullyear() is an absolute number. ...
... syntax dateobj.getfullyear() return value a number corresponding to the year of the given date, according to local time. description the value returned by getfullyear() is an absolute number. ...
Date.prototype.getMilliseconds() - JavaScript
syntax dateobj.getmilliseconds() return value a number, between 0 and 999, representing the milliseconds for the given date according to local time. ...
... syntax dateobj.getmilliseconds() return value a number, between 0 and 999, representing the milliseconds for the given date according to local time. ...
... syntax dateobj.getmilliseconds() return value a number, between 0 and 999, representing the milliseconds for the given date according to local time. ...
Date.prototype.getMonth() - JavaScript
syntax dateobj.getmonth() return value an integer number, between 0 and 11, representing the month in the given date according to local time. 0 corresponds to january, 1 to february, and so on. ...
... syntax dateobj.getmonth() return value an integer number, between 0 and 11, representing the month in the given date according to local time. 0 corresponds to january, 1 to february, and so on. ...
... syntax dateobj.getmonth() return value an integer number, between 0 and 11, representing the month in the given date according to local time. 0 corresponds to january, 1 to february, and so on. ...
Date.prototype.getUTCDay() - JavaScript
syntax dateobj.getutcday() return value an integer number corresponding to the day of the week for the given date, according to universal time: 0 for sunday, 1 for monday, 2 for tuesday, and so on. ...
... syntax dateobj.getutcday() return value an integer number corresponding to the day of the week for the given date, according to universal time: 0 for sunday, 1 for monday, 2 for tuesday, and so on. ...
... syntax dateobj.getutcday() return value an integer number corresponding to the day of the week for the given date, according to universal time: 0 for sunday, 1 for monday, 2 for tuesday, and so on. ...
Date.prototype.getUTCMonth() - JavaScript
syntax dateobj.getutcmonth() return value an integer number, between 0 and 11, corresponding to the month of the given date according to universal time. 0 for january, 1 for february, 2 for march, and so on. ...
... syntax dateobj.getutcmonth() return value an integer number, between 0 and 11, corresponding to the month of the given date according to universal time. 0 for january, 1 for february, 2 for march, and so on. ...
... syntax dateobj.getutcmonth() return value an integer number, between 0 and 11, corresponding to the month of the given date according to universal time. 0 for january, 1 for february, 2 for march, and so on. ...
Date.prototype.setTime() - JavaScript
syntax dateobj.settime(timevalue) parameters timevalue an integer representing the number of milliseconds since 1 january 1970, 00:00:00 utc. ...
... syntax dateobj.settime(timevalue) parameters timevalue an integer representing the number of milliseconds since 1 january 1970, 00:00:00 utc. ...
... syntax dateobj.settime(timevalue) parameters timevalue an integer representing the number of milliseconds since 1 january 1970, 00:00:00 utc. ...
Date.prototype.toUTCString() - JavaScript
syntax dateobj.toutcstring() return value a string representing the given date using the utc time zone. ...
... syntax dateobj.toutcstring() return value a string representing the given date using the utc time zone. ...
... syntax dateobj.toutcstring() return value a string representing the given date using the utc time zone. ...
Function.prototype.apply() - JavaScript
syntax func.apply(thisarg, [ argsarray]) parameters thisarg the value of this provided for the call to func. ...
... syntax func.apply(thisarg, [ argsarray]) parameters thisarg the value of this provided for the call to func. ...
... syntax func.apply(thisarg, [ argsarray]) parameters thisarg the value of this provided for the call to func. ...
Infinity - JavaScript
description infinity is a property of the global object. ...
... description infinity is a property of the global object. ...
... description infinity is a property of the global object. in other words, it is a variable in global scope. ...
Intl.Collator.prototype.compare() - JavaScript
syntax collator.compare(string1, string2) parameters string1 string2 the strings to compare against each other. ...
... syntax collator.compare(string1, string2) parameters string1 string2 the strings to compare against each other. ...
... syntax collator.compare(string1, string2) parameters string1 string2 the strings to compare against each other. ...
Intl.Collator.supportedLocalesOf() - JavaScript
syntax intl.collator.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. ...
... syntax intl.collator.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. ...
... syntax intl.collator.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. ...
Intl.DateTimeFormat.prototype.format() - JavaScript
syntax datetimeformat.format(date) parameters date the date to format. description the format getter formats a date into a string according to the locale and formatting options of this intl.datetimeformat object. ...
... syntax datetimeformat.format(date) parameters date the date to format. description the format getter formats a date into a string according to the locale and formatting options of this intl.datetimeformat object. ...
... syntax datetimeformat.format(date) parameters date the date to format. description the format getter formats a date into a string according to the locale and formatting options of this intl.datetimeformat object. ...
Intl.DisplayNames() constructor - JavaScript
syntax new intl.displaynames([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. ...
... syntax new intl.displaynames([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. ...
... syntax new intl.displaynames([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. ...
Intl.DisplayNames.prototype.of() - JavaScript
syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "region", code should be either an iso-3166 two letters region code, or a three digits un m49 geographic regions. ...
... syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "region", code should be either an iso-3166 two letters region code, or a three digits un m49 geographic regions. ...
... syntax displaynames.of(code); parameters code the code to provide depends on the type: if the type is "region", code should be either an iso-3166 two letters region code, or a three digits un m49 geographic regions. ...
Intl.DisplayNames - JavaScript
constructor intl.displaynames() creates a new intl.displaynames object. ...
... constructor intl.displaynames() creates a new intl.displaynames object. ...
... constructor intl.displaynames() creates a new intl.displaynames object. ...
Intl.Locale.prototype.maximize() - JavaScript
syntax locale.maximize() return value a locale instance whose basename property returns the result of the add likely subtags algorithm executed against locale.basename. ...
... syntax locale.maximize() return value a locale instance whose basename property returns the result of the add likely subtags algorithm executed against locale.basename. ...
... syntax locale.maximize() return value a locale instance whose basename property returns the result of the add likely subtags algorithm executed against locale.basename. ...
Intl.Locale.prototype.minimize() - JavaScript
syntax locale.minimize() return value a locale instance whose basename property returns the result of the remove likely subtags algorithm executed against locale.basename. ...
... syntax locale.minimize() return value a locale instance whose basename property returns the result of the remove likely subtags algorithm executed against locale.basename. ...
... syntax locale.minimize() return value a locale instance whose basename property returns the result of the remove likely subtags algorithm executed against locale.basename. ...
Intl.NumberFormat.prototype.format() - JavaScript
syntax numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. ...
... syntax numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. ...
... syntax numberformat.format(number) parameters number a number or bigint to format. description the format getter function formats a number into a string according to the locale and formatting options of this numberformat object. ...
Intl.RelativeTimeFormat.prototype.format() - JavaScript
syntax relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. ...
... syntax relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. ...
... syntax relativetimeformat.format(value, unit) parameters value numeric value to use in the internationalized relative time message. unit unit to use in the relative time internationalized message. ...
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
syntax relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized relative time message. ...
... syntax relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized relative time message. ...
... syntax relativetimeformat.formattoparts(value, unit) parameters value numeric value to use in the internationalized relative time message. ...
Intl.getCanonicalLocales() - JavaScript
syntax intl.getcanonicallocales(locales) parameters locales a list of string values for which to get the canonical locale names. ...
... syntax intl.getcanonicallocales(locales) parameters locales a list of string values for which to get the canonical locale names. ...
... syntax intl.getcanonicallocales(locales) parameters locales a list of string values for which to get the canonical locale names. ...
Map.prototype[@@iterator]() - JavaScript
syntax mymap[symbol.iterator] return value the map iterator function, which is the entries() function by default. ...
... syntax mymap[symbol.iterator] return value the map iterator function, which is the entries() function by default. ...
... syntax mymap[symbol.iterator] return value the map iterator function, which is the entries() function by default. ...
Map.prototype.clear() - JavaScript
syntax mymap.clear(); return value undefined. ...
... syntax mymap.clear(); return value undefined. ...
... syntax mymap.clear(); return value undefined. ...
Map.prototype.entries() - JavaScript
syntax mymap.entries() return value a new map iterator object. ...
... syntax mymap.entries() return value a new map iterator object. ...
... syntax mymap.entries() return value a new map iterator object. ...
Map.prototype.has() - JavaScript
syntax mymap.has(key) parameters key the key of the element to test for presence in the map object. return value true if an element with the specified key exists in the map object; otherwise false. ...
... syntax mymap.has(key) parameters key the key of the element to test for presence in the map object. return value true if an element with the specified key exists in the map object; otherwise false. ...
... syntax mymap.has(key) parameters key the key of the element to test for presence in the map object. return value true if an element with the specified key exists in the map object; otherwise false. ...
Map.prototype.keys() - JavaScript
syntax mymap.keys() return value a new map iterator object. ...
... syntax mymap.keys() return value a new map iterator object. ...
... syntax mymap.keys() return value a new map iterator object. ...
Map.prototype.set() - JavaScript
syntax mymap.set(key, value) parameters key the key of the element to add to the map object. value the value of the element to add to the map object. return value the map object. ...
... syntax mymap.set(key, value) parameters key the key of the element to add to the map object. value the value of the element to add to the map object. return value the map object. ...
... syntax mymap.set(key, value) parameters key the key of the element to add to the map object. value the value of the element to add to the map object. return value the map object. ...
Map.prototype.size - JavaScript
description the value of size is an integer representing how many entries the map object has. a set accessor function for size is undefined; you can not change this property. ...
... description the value of size is an integer representing how many entries the map object has. a set accessor function for size is undefined; you can not change this property. ...
... description the value of size is an integer representing how many entries the map object has. a set accessor function for size is undefined; you can not change this property. ...
Map.prototype.values() - JavaScript
syntax mymap.values() return value a new map iterator object. ...
... syntax mymap.values() return value a new map iterator object. ...
... syntax mymap.values() return value a new map iterator object. ...
Math.abs() - JavaScript
syntax math.abs(x) parameters x a number. ...
... syntax math.abs(x) parameters x a number. ...
... syntax math.abs(x) parameters x a number. return value the absolute value of the given number. ...
Math.atan2() - JavaScript
syntax math.atan2(y, x) parameters y the y coordinate of the point. ...
... syntax math.atan2(y, x) parameters y the y coordinate of the point. ...
... syntax math.atan2(y, x) parameters y the y coordinate of the point. ...
Math.cbrt() - JavaScript
syntax math.cbrt(x) parameters x a number. return value the cube root of the given number. ...
... syntax math.cbrt(x) parameters x a number. return value the cube root of the given number. ...
... syntax math.cbrt(x) parameters x a number. return value the cube root of the given number. ...
Math.ceil() - JavaScript
syntax math.ceil(x) parameters x a number. return value the smallest integer greater than or equal to the given number. ...
... syntax math.ceil(x) parameters x a number. return value the smallest integer greater than or equal to the given number. ...
... syntax math.ceil(x) parameters x a number. return value the smallest integer greater than or equal to the given number. ...
Math.clz32() - JavaScript
syntax math.clz32(x) parameters x a number. return value the number of leading zero bits in the 32-bit binary representation of the given number. description "clz32" is short for countleadingzeroes32. ...
... syntax math.clz32(x) parameters x a number. return value the number of leading zero bits in the 32-bit binary representation of the given number. description "clz32" is short for countleadingzeroes32. ...
... syntax math.clz32(x) parameters x a number. return value the number of leading zero bits in the 32-bit binary representation of the given number. description "clz32" is short for countleadingzeroes32. ...
Math.cos() - JavaScript
syntax math.cos(x) parameters x the angle in radians for which to return the cosine. return value the cosine of the given number. ...
... syntax math.cos(x) parameters x the angle in radians for which to return the cosine. return value the cosine of the given number. ...
... syntax math.cos(x) parameters x the angle in radians for which to return the cosine. return value the cosine of the given number. ...
Math.cosh() - JavaScript
syntax math.cosh(x) parameters x a number. return value the hyperbolic cosine of the given number. ...
... syntax math.cosh(x) parameters x a number. return value the hyperbolic cosine of the given number. ...
... syntax math.cosh(x) parameters x a number. return value the hyperbolic cosine of the given number. ...
Math.exp() - JavaScript
syntax math.exp(x) parameters x a number. return value a number representing ex, where e is euler's number and x is the argument. ...
... syntax math.exp(x) parameters x a number. return value a number representing ex, where e is euler's number and x is the argument. ...
... syntax math.exp(x) parameters x a number. return value a number representing ex, where e is euler's number and x is the argument. ...
Math.log1p() - JavaScript
syntax math.log1p(x) parameters x a number. return value the natural logarithm (base e) of 1 plus the given number. if the number is less than -1, nan is returned. ...
... syntax math.log1p(x) parameters x a number. return value the natural logarithm (base e) of 1 plus the given number. if the number is less than -1, nan is returned. ...
... syntax math.log1p(x) parameters x a number. return value the natural logarithm (base e) of 1 plus the given number. if the number is less than -1, nan is returned. ...
Math.log2() - JavaScript
syntax math.log2(x) parameters x a number. ...
... syntax math.log2(x) parameters x a number. ...
... syntax math.log2(x) parameters x a number. return value the base 2 logarithm of the given number. ...
Math.min() - JavaScript
syntax math.min([value1[, value2[, ...]]]) parameters value1, value2, ... zero or more numbers among which the lowest value will be selected and returned. return value the smallest of the given numbers. ...
... syntax math.min([value1[, value2[, ...]]]) parameters value1, value2, ... zero or more numbers among which the lowest value will be selected and returned. return value the smallest of the given numbers. ...
... syntax math.min([value1[, value2[, ...]]]) parameters value1, value2, ... zero or more numbers among which the lowest value will be selected and returned. return value the smallest of the given numbers. ...
Math.sinh() - JavaScript
syntax math.sinh(x) parameters x a number. return value the hyperbolic sine of the given number. ...
... syntax math.sinh(x) parameters x a number. return value the hyperbolic sine of the given number. ...
... syntax math.sinh(x) parameters x a number. return value the hyperbolic sine of the given number. ...
Math.sqrt() - JavaScript
syntax math.sqrt(x) parameters x a number. ...
... syntax math.sqrt(x) parameters x a number. ...
... syntax math.sqrt(x) parameters x a number. return value the square root of the given number. ...
NaN - JavaScript
description nan is a property of the global object. ...
... description nan is a property of the global object. ...
... description nan is a property of the global object. in other words, it is a variable in global scope. ...
Number.isNaN() - JavaScript
syntax number.isnan(value) parameters value the value to be tested for nan. return value true if the given value is nan and its type is number; otherwise, false. ...
... syntax number.isnan(value) parameters value the value to be tested for nan. return value true if the given value is nan and its type is number; otherwise, false. ...
... syntax number.isnan(value) parameters value the value to be tested for nan. return value true if the given value is nan and its type is number; otherwise, false. ...
Number.parseFloat() - JavaScript
syntax number.parsefloat(string) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
... syntax number.parsefloat(string) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
... syntax number.parsefloat(string) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
Object.assign() - JavaScript
syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified. ...
... syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified. ...
... syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified. ...
Object.create() - JavaScript
syntax object.create(proto, [propertiesobject]) parameters proto the object which should be the prototype of the newly-created object. ...
... syntax object.create(proto, [propertiesobject]) parameters proto the object which should be the prototype of the newly-created object. ...
... syntax object.create(proto, [propertiesobject]) parameters proto the object which should be the prototype of the newly-created object. ...
Object.defineProperty() - JavaScript
syntax object.defineproperty(obj, prop, descriptor) parameters obj the object on which to define the property. prop the name or symbol of the property to be defined or modified. ...
... syntax object.defineproperty(obj, prop, descriptor) parameters obj the object on which to define the property. prop the name or symbol of the property to be defined or modified. ...
... syntax object.defineproperty(obj, prop, descriptor) parameters obj the object on which to define the property. prop the name or symbol of the property to be defined or modified. ...
Object.getOwnPropertySymbols() - JavaScript
syntax object.getownpropertysymbols(obj) parameters obj the object whose symbol properties are to be returned. return value an array of all symbol properties found directly upon the given object. ...
... syntax object.getownpropertysymbols(obj) parameters obj the object whose symbol properties are to be returned. return value an array of all symbol properties found directly upon the given object. ...
... syntax object.getownpropertysymbols(obj) parameters obj the object whose symbol properties are to be returned. return value an array of all symbol properties found directly upon the given object. ...
Object.getPrototypeOf() - JavaScript
syntax object.getprototypeof(obj) parameters obj the object whose prototype is to be returned. return value the prototype of the given object. if there are no inherited properties, null is returned. ...
... syntax object.getprototypeof(obj) parameters obj the object whose prototype is to be returned. return value the prototype of the given object. if there are no inherited properties, null is returned. ...
... syntax object.getprototypeof(obj) parameters obj the object whose prototype is to be returned. return value the prototype of the given object. if there are no inherited properties, null is returned. ...
Object.prototype.hasOwnProperty() - JavaScript
syntax obj.hasownproperty(prop) parameters prop the string name or symbol of the property to test. return value a boolean indicating whether or not the object has the specified property as own property. ...
... syntax obj.hasownproperty(prop) parameters prop the string name or symbol of the property to test. return value a boolean indicating whether or not the object has the specified property as own property. ...
... syntax obj.hasownproperty(prop) parameters prop the string name or symbol of the property to test. return value a boolean indicating whether or not the object has the specified property as own property. ...
Object.isExtensible() - JavaScript
syntax object.isextensible(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is extensible. ...
... syntax object.isextensible(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is extensible. ...
... syntax object.isextensible(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is extensible. ...
Object.keys() - JavaScript
syntax object.keys(obj) parameters obj the object of which the enumerable's own properties are to be returned. return value an array of strings that represent all the enumerable properties of the given object. ...
... syntax object.keys(obj) parameters obj the object of which the enumerable's own properties are to be returned. return value an array of strings that represent all the enumerable properties of the given object. ...
... syntax object.keys(obj) parameters obj the object of which the enumerable's own properties are to be returned. return value an array of strings that represent all the enumerable properties of the given object. ...
Object.preventExtensions() - JavaScript
syntax object.preventextensions(obj) parameters obj the object which should be made non-extensible. return value the object being made non-extensible. description an object is extensible if new properties can be added to it. ...
... syntax object.preventextensions(obj) parameters obj the object which should be made non-extensible. return value the object being made non-extensible. description an object is extensible if new properties can be added to it. ...
... syntax object.preventextensions(obj) parameters obj the object which should be made non-extensible. return value the object being made non-extensible. description an object is extensible if new properties can be added to it. ...
Object.prototype.propertyIsEnumerable() - JavaScript
syntax obj.propertyisenumerable(prop) parameters prop the name of the property to test. return value a boolean indicating whether the specified property is enumerable and is the object's own property. ...
... syntax obj.propertyisenumerable(prop) parameters prop the name of the property to test. return value a boolean indicating whether the specified property is enumerable and is the object's own property. ...
... syntax obj.propertyisenumerable(prop) parameters prop the name of the property to test. return value a boolean indicating whether the specified property is enumerable and is the object's own property. ...
Object.seal() - JavaScript
syntax object.seal(obj) parameters obj the object which should be sealed. ...
... syntax object.seal(obj) parameters obj the object which should be sealed. ...
... syntax object.seal(obj) parameters obj the object which should be sealed. ...
Object.prototype.toLocaleString() - JavaScript
syntax obj.tolocalestring() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). ...
... syntax obj.tolocalestring() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). ...
... syntax obj.tolocalestring() return value a string representing the object. description object's tolocalestring returns the result of calling tostring(). ...
Promise.race() - JavaScript
syntax promise.race(iterable); parameters iterable an iterable object, such as an array. see iterable. ...
... syntax promise.race(iterable); parameters iterable an iterable object, such as an array. see iterable. ...
... syntax promise.race(iterable); parameters iterable an iterable object, such as an array. see iterable. ...
Promise.prototype.then() - JavaScript
if one or both arguments are omitted or are provided non-functions, then then will be missing the handler(s), but will not generate any errors. ...
... if one or both arguments are omitted or are provided non-functions, then then will be missing the handler(s), but will not generate any errors. ...
... if one or both arguments are omitted or are provided non-functions, then then will be missing the handler(s), but will not generate any errors. ...
Reflect.construct() - JavaScript
syntax reflect.construct(target, argumentslist[, newtarget]) parameters target the target function to call. ...
... syntax reflect.construct(target, argumentslist[, newtarget]) parameters target the target function to call. ...
... syntax reflect.construct(target, argumentslist[, newtarget]) parameters target the target function to call. ...
Reflect.getPrototypeOf() - JavaScript
syntax reflect.getprototypeof(target) parameters target the target object of which to get the prototype. ...
... syntax reflect.getprototypeof(target) parameters target the target object of which to get the prototype. ...
... syntax reflect.getprototypeof(target) parameters target the target object of which to get the prototype. ...
Reflect.isExtensible() - JavaScript
syntax reflect.isextensible(target) parameters target the target object which to check if it is extensible. ...
... syntax reflect.isextensible(target) parameters target the target object which to check if it is extensible. ...
... syntax reflect.isextensible(target) parameters target the target object which to check if it is extensible. ...
get RegExp[@@species] - JavaScript
description the species accessor property returns the default constructor for regexp objects. subclass constructors may over-ride it to change the constructor assignment. ...
... description the species accessor property returns the default constructor for regexp objects. subclass constructors may over-ride it to change the constructor assignment. ...
... description the species accessor property returns the default constructor for regexp objects. subclass constructors may over-ride it to change the constructor assignment. ...
RegExp.prototype[@@split]() - JavaScript
syntax regexp[symbol.split](str[, limit]) parameters str the target of the split operation. limit optional integer specifying a limit on the number of splits to be found. ...
... syntax regexp[symbol.split](str[, limit]) parameters str the target of the split operation. limit optional integer specifying a limit on the number of splits to be found. ...
... syntax regexp[symbol.split](str[, limit]) parameters str the target of the split operation. limit optional integer specifying a limit on the number of splits to be found. ...
Set.prototype[@@iterator]() - JavaScript
syntax myset[symbol.iterator] return value the set iterator function, which is the values() function by default. ...
... syntax myset[symbol.iterator] return value the set iterator function, which is the values() function by default. ...
... syntax myset[symbol.iterator] return value the set iterator function, which is the values() function by default. ...
Set.prototype.add() - JavaScript
syntax myset.add(value); parameters value the value of the element to add to the set object. return value the set object. ...
... syntax myset.add(value); parameters value the value of the element to add to the set object. return value the set object. ...
... syntax myset.add(value); parameters value the value of the element to add to the set object. return value the set object. ...
Set.prototype.clear() - JavaScript
syntax myset.clear(); return value undefined. ...
... syntax myset.clear(); return value undefined. ...
... syntax myset.clear(); return value undefined. ...
Set.prototype.has() - JavaScript
syntax myset.has(value); parameters value the value to test for presence in the set object. return value returns true if an element with the specified value exists in the set object; otherwise false. ...
... syntax myset.has(value); parameters value the value to test for presence in the set object. return value returns true if an element with the specified value exists in the set object; otherwise false. ...
... syntax myset.has(value); parameters value the value to test for presence in the set object. return value returns true if an element with the specified value exists in the set object; otherwise false. ...
Set.prototype.size - JavaScript
description the value of size is an integer representing how many entries the set object has. a set accessor function for size is undefined; you cannot change this property. ...
... description the value of size is an integer representing how many entries the set object has. a set accessor function for size is undefined; you cannot change this property. ...
... description the value of size is an integer representing how many entries the set object has. a set accessor function for size is undefined; you cannot change this property. ...
String.prototype[@@iterator]() - JavaScript
syntax str[symbol.iterator] return value a new iterator object. ...
... syntax str[symbol.iterator] return value a new iterator object. ...
... syntax str[symbol.iterator] return value a new iterator object. ...
String.prototype.charAt() - JavaScript
syntax let character = str.charat(index) parameters index an integer between 0 and str.length - 1. if the index cannot be converted to the integer or no index is provided, the default is 0, so the first character of str is returned. ...
... syntax let character = str.charat(index) parameters index an integer between 0 and str.length - 1. if the index cannot be converted to the integer or no index is provided, the default is 0, so the first character of str is returned. ...
... syntax let character = str.charat(index) parameters index an integer between 0 and str.length - 1. if the index cannot be converted to the integer or no index is provided, the default is 0, so the first character of str is returned. ...
String.prototype.charCodeAt() - JavaScript
the utf-16 code unit matches the unicode code point for code points which can be represented in a single utf-16 code unit. ...
... the utf-16 code unit matches the unicode code point for code points which can be represented in a single utf-16 code unit. ...
... the utf-16 code unit matches the unicode code point for code points which can be represented in a single utf-16 code unit. ...
String.prototype.endsWith() - JavaScript
syntax str.endswith(searchstring[, length]) parameters searchstring the characters to be searched for at the end of str. length optional if provided, it is used as the length of str. defaults to str.length. ...
... syntax str.endswith(searchstring[, length]) parameters searchstring the characters to be searched for at the end of str. length optional if provided, it is used as the length of str. defaults to str.length. ...
... syntax str.endswith(searchstring[, length]) parameters searchstring the characters to be searched for at the end of str. length optional if provided, it is used as the length of str. defaults to str.length. ...
String.prototype.includes() - JavaScript
syntax str.includes(searchstring[, position]) parameters searchstring a string to be searched for within str. position optional the position within the string at which to begin searching for searchstring. ...
... syntax str.includes(searchstring[, position]) parameters searchstring a string to be searched for within str. position optional the position within the string at which to begin searching for searchstring. ...
... syntax str.includes(searchstring[, position]) parameters searchstring a string to be searched for within str. position optional the position within the string at which to begin searching for searchstring. ...
String.prototype.indexOf() - JavaScript
note: for the array method, see array.prototype.indexof(). ...
... note: for the array method, see array.prototype.indexof(). ...
... note: for the array method, see array.prototype.indexof(). ...
String.prototype.lastIndexOf() - JavaScript
syntax str.lastindexof(searchvalue[, fromindex]) parameters searchvalue a string representing the value to search for. ...
... syntax str.lastindexof(searchvalue[, fromindex]) parameters searchvalue a string representing the value to search for. ...
... syntax str.lastindexof(searchvalue[, fromindex]) parameters searchvalue a string representing the value to search for. ...
String.prototype.localeCompare() - JavaScript
the new locales and options arguments let applications specify the language whose sort order should be used and customize the behavior of the function. ...
... the new locales and options arguments let applications specify the language whose sort order should be used and customize the behavior of the function. ...
... the new locales and options arguments let applications specify the language whose sort order should be used and customize the behavior of the function. ...
String.prototype.padEnd() - JavaScript
syntax str.padend(targetlength [, padstring]) parameters targetlength the length of the resulting string once the current str has been padded. ...
... syntax str.padend(targetlength [, padstring]) parameters targetlength the length of the resulting string once the current str has been padded. ...
... syntax str.padend(targetlength [, padstring]) parameters targetlength the length of the resulting string once the current str has been padded. ...
String.prototype.repeat() - JavaScript
syntax str.repeat(count) parameters count an integer between 0 and +infinity, indicating the number of times to repeat the string. ...
... syntax str.repeat(count) parameters count an integer between 0 and +infinity, indicating the number of times to repeat the string. ...
... syntax str.repeat(count) parameters count an integer between 0 and +infinity, indicating the number of times to repeat the string. ...
String.prototype.slice() - JavaScript
syntax str.slice(beginindex[, endindex]) parameters beginindex the zero-based index at which to begin extraction. if negative, it is treated as str.length + beginindex. ...
... syntax str.slice(beginindex[, endindex]) parameters beginindex the zero-based index at which to begin extraction. if negative, it is treated as str.length + beginindex. ...
... syntax str.slice(beginindex[, endindex]) parameters beginindex the zero-based index at which to begin extraction. if negative, it is treated as str.length + beginindex. ...
String.prototype.startsWith() - JavaScript
syntax str.startswith(searchstring[, position]) parameters searchstring the characters to be searched for at the start of this string. position optional the position in this string at which to begin searching for searchstring. defaults to 0. ...
... syntax str.startswith(searchstring[, position]) parameters searchstring the characters to be searched for at the start of this string. position optional the position in this string at which to begin searching for searchstring. defaults to 0. ...
... syntax str.startswith(searchstring[, position]) parameters searchstring the characters to be searched for at the start of this string. position optional the position in this string at which to begin searching for searchstring. defaults to 0. ...
String.prototype.substr() - JavaScript
syntax str.substr(start[, length]) parameters start the index of the first character to include in the returned substring. length optional. the number of characters to extract. ...
... syntax str.substr(start[, length]) parameters start the index of the first character to include in the returned substring. length optional. the number of characters to extract. ...
... syntax str.substr(start[, length]) parameters start the index of the first character to include in the returned substring. length optional. the number of characters to extract. ...
String.prototype.toUpperCase() - JavaScript
syntax str.touppercase() return value a new string representing the calling string converted to upper case. exceptions typeerror when called on null or undefined, for example, string.prototype.touppercase.call(undefined). ...
... syntax str.touppercase() return value a new string representing the calling string converted to upper case. exceptions typeerror when called on null or undefined, for example, string.prototype.touppercase.call(undefined). ...
... syntax str.touppercase() return value a new string representing the calling string converted to upper case. exceptions typeerror when called on null or undefined, for example, string.prototype.touppercase.call(undefined). ...
String.prototype.trim() - JavaScript
syntax str.trim() return value a new string representing the str stripped of whitespace from both ends. ...
... syntax str.trim() return value a new string representing the str stripped of whitespace from both ends. ...
... syntax str.trim() return value a new string representing the str stripped of whitespace from both ends. ...
Symbol.asyncIterator - JavaScript
description the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method. ...
... description the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method. ...
... description the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method. ...
Symbol.for() - JavaScript
syntax symbol.for(key); parameters key string, required. ...
... syntax symbol.for(key); parameters key string, required. ...
... syntax symbol.for(key); parameters key string, required. ...
Symbol.isConcatSpreadable - JavaScript
description the @@isconcatspreadable symbol (symbol.isconcatspreadable) can be defined as an own or inherited property and its value is a boolean. ...
... description the @@isconcatspreadable symbol (symbol.isconcatspreadable) can be defined as an own or inherited property and its value is a boolean. ...
... description the @@isconcatspreadable symbol (symbol.isconcatspreadable) can be defined as an own or inherited property and its value is a boolean. ...
Symbol.keyFor() - JavaScript
syntax symbol.keyfor(sym); parameters sym symbol, required. the symbol to find a key for. return value a string representing the key for the given symbol if one is found on the global registry; otherwise, undefined. ...
... syntax symbol.keyfor(sym); parameters sym symbol, required. the symbol to find a key for. return value a string representing the key for the given symbol if one is found on the global registry; otherwise, undefined. ...
... syntax symbol.keyfor(sym); parameters sym symbol, required. the symbol to find a key for. return value a string representing the key for the given symbol if one is found on the global registry; otherwise, undefined. ...
Symbol.match - JavaScript
description this function is also used to identify if objects have the behavior of regular expressions. ...
... description this function is also used to identify if objects have the behavior of regular expressions. ...
... description this function is also used to identify if objects have the behavior of regular expressions. ...
Symbol.matchAll - JavaScript
description this symbol is used for string.prototype.matchall() and specifically in regexp.prototype[@@matchall](). ...
... description this symbol is used for string.prototype.matchall() and specifically in regexp.prototype[@@matchall](). ...
... description this symbol is used for string.prototype.matchall() and specifically in regexp.prototype[@@matchall](). ...
Symbol.species - JavaScript
description the species accessor property allows subclasses to override the default constructor for objects. ...
... description the species accessor property allows subclasses to override the default constructor for objects. ...
... description the species accessor property allows subclasses to override the default constructor for objects. ...
Symbol.toPrimitive - JavaScript
description with the help of the symbol.toprimitive property (used as a function value), an object can be converted to a primitive value. ...
... description with the help of the symbol.toprimitive property (used as a function value), an object can be converted to a primitive value. ...
... description with the help of the symbol.toprimitive property (used as a function value), an object can be converted to a primitive value. ...
TypedArray.prototype.entries() - JavaScript
syntax arr.entries() return value a new array iterator object. ...
... syntax arr.entries() return value a new array iterator object. ...
... syntax arr.entries() return value a new array iterator object. ...
TypedArray.prototype.join() - JavaScript
syntax typedarray.join([separator = ',']); parameters separator optional. specifies a string to separate each element. the separator is converted to a string if necessary. ...
... syntax typedarray.join([separator = ',']); parameters separator optional. specifies a string to separate each element. the separator is converted to a string if necessary. ...
... syntax typedarray.join([separator = ',']); parameters separator optional. specifies a string to separate each element. the separator is converted to a string if necessary. ...
TypedArray.prototype.keys() - JavaScript
syntax arr.keys() return value a new array iterator object. ...
... syntax arr.keys() return value a new array iterator object. ...
... syntax arr.keys() return value a new array iterator object. ...
TypedArray.prototype.slice() - JavaScript
syntax typedarray.slice([begin[, end]]) parameters begin optional zero-based index at which to begin extraction. ...
... syntax typedarray.slice([begin[, end]]) parameters begin optional zero-based index at which to begin extraction. ...
... syntax typedarray.slice([begin[, end]]) parameters begin optional zero-based index at which to begin extraction. ...
TypedArray.prototype.toString() - JavaScript
syntax typedarray.tostring() return value a string representing the elements of the typed array. ...
... syntax typedarray.tostring() return value a string representing the elements of the typed array. ...
... syntax typedarray.tostring() return value a string representing the elements of the typed array. ...
TypedArray.prototype.values() - JavaScript
syntax arr.values() return value a new array iterator object. ...
... syntax arr.values() return value a new array iterator object. ...
... syntax arr.values() return value a new array iterator object. ...
WeakMap.prototype.has() - JavaScript
syntax wm.has(key); parameters key required. the key of the element to test for presence in the weakmap object. return value boolean returns true if an element with the specified key exists in the weakmap object; otherwise false. ...
... syntax wm.has(key); parameters key required. the key of the element to test for presence in the weakmap object. return value boolean returns true if an element with the specified key exists in the weakmap object; otherwise false. ...
... syntax wm.has(key); parameters key required. the key of the element to test for presence in the weakmap object. return value boolean returns true if an element with the specified key exists in the weakmap object; otherwise false. ...
WeakSet.prototype.add() - JavaScript
syntax ws.add(value); parameters value required. the object to add to the weakset collection. return value the weakset object. ...
... syntax ws.add(value); parameters value required. the object to add to the weakset collection. return value the weakset object. ...
... syntax ws.add(value); parameters value required. the object to add to the weakset collection. return value the weakset object. ...
decodeURI() - JavaScript
syntax decodeuri(encodeduri) parameters encodeduri a complete, encoded uniform resource identifier. return value a new string representing the unencoded version of the given encoded uniform resource identifier (uri). ...
... syntax decodeuri(encodeduri) parameters encodeduri a complete, encoded uniform resource identifier. return value a new string representing the unencoded version of the given encoded uniform resource identifier (uri). ...
... syntax decodeuri(encodeduri) parameters encodeduri a complete, encoded uniform resource identifier. return value a new string representing the unencoded version of the given encoded uniform resource identifier (uri). ...
decodeURIComponent() - JavaScript
syntax decodeuricomponent(encodeduri) parameters encodeduri an encoded component of a uniform resource identifier. ...
... syntax decodeuricomponent(encodeduri) parameters encodeduri an encoded component of a uniform resource identifier. ...
... syntax decodeuricomponent(encodeduri) parameters encodeduri an encoded component of a uniform resource identifier. ...
isFinite() - JavaScript
syntax isfinite(testvalue) parameters testvalue the value to be tested for finiteness. return value false if the argument is positive or negative infinity or nan or undefined; otherwise, true. ...
... syntax isfinite(testvalue) parameters testvalue the value to be tested for finiteness. return value false if the argument is positive or negative infinity or nan or undefined; otherwise, true. ...
... syntax isfinite(testvalue) parameters testvalue the value to be tested for finiteness. return value false if the argument is positive or negative infinity or nan or undefined; otherwise, true. ...
null - JavaScript
syntax null description the value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. ...
... syntax null description the value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. ...
... syntax null description the value null is written with a literal: null. null is not an identifier for a property of the global object, like undefined can be. ...
parseInt() - JavaScript
syntax parseint(string [, radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
... syntax parseint(string [, radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
... syntax parseint(string [, radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
Bitwise AND (&) - JavaScript
syntax a & b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a & b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a & b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
Bitwise OR (|) - JavaScript
syntax a | b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a | b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a | b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
Bitwise XOR (^) - JavaScript
syntax a ^ b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a ^ b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax a ^ b description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
Exponentiation (**) - JavaScript
syntax operator: var1 ** var2 description the exponentiation operator is right-associative: a ** b ** c is equal to a ** (b ** c). ...
... syntax operator: var1 ** var2 description the exponentiation operator is right-associative: a ** b ** c is equal to a ** (b ** c). ...
... syntax operator: var1 ** var2 description the exponentiation operator is right-associative: a ** b ** c is equal to a ** (b ** c). ...
Greater than (>) - JavaScript
syntax x > y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x > y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x > y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
Greater than or equal (>=) - JavaScript
syntax x >= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x >= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x >= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
Inequality (!=) - JavaScript
syntax x != y description the inequality operator checks whether its operands are not equal. ...
... syntax x != y description the inequality operator checks whether its operands are not equal. ...
... syntax x != y description the inequality operator checks whether its operands are not equal. ...
Left shift (<<) - JavaScript
syntax a << b description this operator shifts the first operand the specified number of bits to the left. excess bits shifted off to the left are discarded. ...
... syntax a << b description this operator shifts the first operand the specified number of bits to the left. excess bits shifted off to the left are discarded. ...
... syntax a << b description this operator shifts the first operand the specified number of bits to the left. excess bits shifted off to the left are discarded. ...
Less than (<) - JavaScript
syntax x < y description the operands are compared using the abstract relational comparison algorithm, which is roughly summarised below: first, objects are converted to primitives using symbol.toprimitive. ...
... syntax x < y description the operands are compared using the abstract relational comparison algorithm, which is roughly summarised below: first, objects are converted to primitives using symbol.toprimitive. ...
... syntax x < y description the operands are compared using the abstract relational comparison algorithm, which is roughly summarised below: first, objects are converted to primitives using symbol.toprimitive. ...
Less than or equal (<=) - JavaScript
syntax x <= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x <= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
... syntax x <= y description the operands are compared using the abstract relational comparison algorithm. see the documentation for the less than operator for a summary of this algorithm. ...
Operator precedence - JavaScript
precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. ...
... precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. ...
... precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. ...
Unary plus (+) - JavaScript
syntax operator: +x description although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. ...
... syntax operator: +x description although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. ...
... syntax operator: +x description although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. ...
Function expression - JavaScript
syntax the expression is not allowed at the start of a statement. function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions. ...
... syntax the expression is not allowed at the start of a statement. function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions. ...
... syntax the expression is not allowed at the start of a statement. function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions. ...
instanceof - JavaScript
syntax object instanceof constructor parameters object the object to test. ...
... syntax object instanceof constructor parameters object the object to test. ...
... syntax object instanceof constructor parameters object the object to test. ...
break - JavaScript
syntax break [label]; label optional identifier associated with the label of the statement. if the statement is not a loop or switch, this is required. ...
... syntax break [label]; label optional identifier associated with the label of the statement. if the statement is not a loop or switch, this is required. ...
... syntax break [label]; label optional identifier associated with the label of the statement. if the statement is not a loop or switch, this is required. ...
const - JavaScript
syntax const name1 = value1 [, name2 = value2 [, ... [, namen = valuen]]]; namen the constant's name, which can be any legal identifier. valuen the constant's value. ...
... syntax const name1 = value1 [, name2 = value2 [, ... [, namen = valuen]]]; namen the constant's name, which can be any legal identifier. valuen the constant's value. ...
... syntax const name1 = value1 [, name2 = value2 [, ... [, namen = valuen]]]; namen the constant's name, which can be any legal identifier. valuen the constant's value. ...
continue - JavaScript
syntax continue [label]; label identifier associated with the label of the statement. ...
... syntax continue [label]; label identifier associated with the label of the statement. ...
... syntax continue [label]; label identifier associated with the label of the statement. ...
for...in - JavaScript
syntax for (variable in object) statement variable a different property name is assigned to variable on each iteration. ...
... syntax for (variable in object) statement variable a different property name is assigned to variable on each iteration. ...
... syntax for (variable in object) statement variable a different property name is assigned to variable on each iteration. ...
function declaration - JavaScript
syntax function name([param[, param,[..., param]]]) { [statements] } name the function name. param optional the name of an argument to be passed to the function. ...
... syntax function name([param[, param,[..., param]]]) { [statements] } name the function name. param optional the name of an argument to be passed to the function. ...
... syntax function name([param[, param,[..., param]]]) { [statements] } name the function name. param optional the name of an argument to be passed to the function. ...
label - JavaScript
note: labeled loops or blocks are very uncommon. usually function calls can be used instead of loop jumps. syntax label : statement label any javascript identifier that is not a reserved word. statement a javascript statement. ...
... note: labeled loops or blocks are very uncommon. usually function calls can be used instead of loop jumps. syntax label : statement label any javascript identifier that is not a reserved word. statement a javascript statement. ...
... note: labeled loops or blocks are very uncommon. usually function calls can be used instead of loop jumps. syntax label : statement label any javascript identifier that is not a reserved word. statement a javascript statement. ...
while - JavaScript
syntax while (condition) statement condition an expression evaluated before each pass through the loop. if this condition evaluates to true, statement is executed. ...
... syntax while (condition) statement condition an expression evaluated before each pass through the loop. if this condition evaluates to true, statement is executed. ...
... syntax while (condition) statement condition an expression evaluated before each pass through the loop. if this condition evaluates to true, statement is executed. ...
Navigation and resource timings - Web Performance
milliseconds(ms), describing at what time each point in the page loading process was reached. as displayed in the image below, the navigation process goes from navigationstart, unloadeventstart, unloadeventend, redirectstart, redirectend, fetchstart, domainlookupstart, domainlookupend, connectstart , connectend, secureconnectionstart, requeststart, responsestart, responseend, domloading, dominter
active, domcontentloadedeventstart, domcontentloadedeventend, domcomplete, loadeventstart, and loadeventend. with the metrics above, and a little bit of math, we can calculate many important metrics like time to first byte, page load time, dns lookup, and whether the connection is secure. to help measure the time it takes to complete all the steps, the performance timing api provides read only meas...
...window began to unload. if there is no previous document, or if the previous document or one of the needed redirects is not of the same origin, the value returned is 0. unloadeventend when the unload event handler finishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. dominter
active when the parser finished its work on the main document, that is when its document.readystate changes to 'inter
active' and the corresponding readystatechange event is thrown. domcontentloadedeventstart right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been executed. domcontentloaded...
...eries of steps, including a dns lookup, tcp handshake, and ssl negotiation, before the user agent makes the actual request and the servers return the requested assets. the browser then parses the content received, builds the dom, cssom, accessibility, and render trees, eventually rendering the page. once the user agent stops parsing the document, the user agent sets the document readiness to inter
active. if there are deferred scripts needing to be parsed, it will do so, then fire the domcontentloaded, after which the readiness is set to complete. the document can now handle post-load tasks, after which point the document is marked as completely loaded. let navigationtimings = performance.getentriesbytype('navigation'); the performance.getentriesbytype('navigation')a returns an array of perform...
begin - SVG: Scalable Vector Graphics
value>, <accesskey-value>, <wallclock-sync-value> or the keyword indefinite. six elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, and <set> animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e. become
active. value <begin-value-list> default value 0s animatable no the <begin-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values ar...
...alue can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation start time is defined relative to the begin or
active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or
active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value defines an event and an optional offset that de...
...h a time value as parameter. the time syntax is based upon the syntax defined in iso 8601. indefinite the begin of the animation will be determined by a beginelement() method call or a hyperlink targeted to the element. discard for <discard>, begin defines when the target element will be discarded. the <discard> element has an implicit simple duration of indefinite. as soon as the element's
active duration starts, the element identified by the href attribute is discarded. the behavior is the same as if node.removechild() were called on the parent of the target element with the target element as parameter. after removal of the target element, the <discard> element is no longer useful, therefore it is also discarded after the target element's removal. if the href attribute has an invalid ur...
SVG documentation index - SVG: Scalable Vector Graphics
n degrees. note that the positive z-axis points towards the viewer of the content. 67 enable-background deprecated, svg, svg attribute the enable-background attribute specifies how the accumulation of the background image is managed. 68 end needscompattable, svg, svg attribute the end attribute defines an end value for the animation that can constrain the
active duration. 69 exponent needscompattable, svg, svg attribute the exponent attribute defines the exponent of the gamma function. 70 externalresourcesrequired deprecated, needsexample, svg, svg attribute the externalresourcesrequired attribute specifies whether referenced resources that are not part of the current document are required for proper rendering of...
...rdinate system to use for the geometry properties of the <mask> element. 137 mathematical deprecated, svg, svg attribute the mathematical attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. 138 max svg, svg attribute the max attribute specifies the maximum value of the
active animation duration. 139 media svg, svg attribute the media attribute specifies a media query that must be matched for a style sheet to apply. 140 method experimental, needsexample, svg, svg attribute the method attribute indicates the method by which text should be rendered along the path of a <textpath> element. 141 min svg, svg attribute ...
...ibute the media attribute specifies a media query that must be matched for a style sheet to apply. 140 method experimental, needsexample, svg, svg attribute the method attribute indicates the method by which text should be rendered along the path of a <textpath> element. 141 min svg, svg attribute the min attribute specifies the minimum value of the
active animation duration. 142 mode filters, svg, svg attribute the mode attribute defines the blending mode on the <feblend> filter primitive. 143 name deprecated, svg, svg attribute the name attribute specifies either the name of a color profile or a font face. 144 numoctaves filters, svg, svg attribute the numoctaves attribute defines the...
SVG: Scalable Vector Graphics
cs (spreadsheet charting) svg bubble menus svg authoring guidelines an overview of the mozilla svg project frequently asked questions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript. ...
...ions regarding svg and mozilla svg as an image svg animation with smil svg art gallery animation and interactions like html, svg has a document model (dom) and events, and is accessible from javascript. this allows developers to create rich animations and inter
active images. ...
...s and inter
active images. some real eye-candy svg at svg-wow.org firefox extension (grafox) to add a subset of smil animation support inter
active photos manipulation html transformations using svg's foreignobject mapping, charting, games & 3d experiments while a little svg can go a long way to enhanced web content, here are some examples of heavy svg usage. ...
page-mod - Archive of obsolete content
ration purposes, and will not work properly in many real-world cases. attaching content scripts to tabs we've seen that the page-mod api attaches content scripts to documents based on their url. sometimes, though, we don't care about the url: we just want to execute a script on demand in the context of a particular tab. for example, we might want to run a script in the context of the currently
active tab when the user clicks a button: to block certain content, to change the font style, or to display the document's dom structure. using the attach method of the tab object, you can attach a set of content scripts to a particular tab. the scripts are executed immediately. the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the a...
... attach a set of content scripts to a particular tab. the scripts are executed immediately. the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the
active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").
activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + 'divs[i].setattribute("style", "border: solid red 1px;");' + '}' }); } }); to run this example you'll also have to have an icon file named "icon-16.png" saved in your add-on's "data" directory. you could use this icon: . privat...
panel - Archive of obsolete content
nel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html"). so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently
active browser window. you can position the panel by passing a position to the panel's constructor or to its show() method. attaching panels to buttons you can attach a panel to a toggle button by passing the button itself as the position option to the panel's show() method or to its constructor: var { togglebutton } = require('sdk/ui/button/toggle'); var sdkpanels = require("sdk/panel"); var self = ...
... panel limitations although panels can host html documents, they are not implemented as browser tabs, so many things that work in normal web pages do not work inside panels: prior to firefox 33, you don't get a context menu. from firefox 33 you can enable a context menu by passing contextmenu: true to the panel's constructor. the ...
tabs/utils - Archive of obsolete content
parameters tab : tab a xul tab element to activate. window : window a browser window. gettabbrowser(window) get the tabbrowser element for the given browser window. parameters window : window a browser window. returns tabbrowser : gettabcontainer(window) get the tabbrowser's tabcontainer property. parameters window : window a browser window. returns tabcontainer : gettabs(window) returns the tabs for the specified window. ...
...er, if your add-on has not opted into private browsing, then the function will exclude all tabs that are hosted by private browser windows. to learn more about private windows, how to opt into private browsing, and how to support private browsing, refer to the documentation for the private-browsing module. parameters window : nsiwindow optional. returns array : an array of tab elements. get
activetab(window) given a browser window, get the
active, or selected, tab. parameters window : window a browser window. returns tab : the currently selected tab. getownerwindow(tab) get the browser window that owns the specified tab. parameters tab : tab a browser tab. returns window : a browser window. opentab(window, url, options) open a new tab in the specified browser window. parame...
Creating annotations - Archive of obsolete content
is to maintain a matched element: this is the page element that is the current candidate for an annotation. the matched element is highlighted and has a click handler bound to it which sends a message to the main add-on code. the selector page mod can be switched on and off using a message from the main add-on code. 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. when a mouseent...
...entify annotated elements correctly later on. if the page element is eligible for annotation, then the selector highlights that element and binds a click handler to it. the click handler sends a message called show back to the main add-on code. the show message contains: the url for the page, the id attribute value, and the text content of the page element. ...
JavaScript timers - Archive of obsolete content
y set by settimeout(). clearinterval() cancels repeated action which was set up using setinterval(). clearimmediate() cancels the immediate actions, just like cleartimeout() for settimeout(). 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 inter
active user. in javascript programming language, all daemons are processes created by javascript timers or by a worker instantiation. here are some code snippets which simplify and abstract the management of daemons. requestanimationframe() requestanimationframe() tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animati...
...worker thread run code periodically instead of nonstop. functions available to workers in addition to the standard javascript set of functions (such as string, array, object, json etc), there are a variety of functions available from the dom to workers. this article provides a list of those. basic animations since we're using script to control canvas elements it's also very easy to make (inter
active) animations. unfortunately the canvas element was never designed to be used in this way (unlike flash) so there are limitations. timer.jsm the timer.jsm javascript code module contains pure-javascript implementations of settimeout and cleartimeout that are compatible with the dom window functions, but that can be used by code that does not have access to a dom window (for example, javascript co...
Useful Mozilla Community Sites - Archive of obsolete content
it's a very powerful tool you have when developing on top of the mozilla platform, and you should take advantage of it in order to create a truly successful add-on . amo amo (mozilla add-ons) is the official mozilla repository for add-ons. it allows you to upload, search and download all types of add-ons for mozilla applications. this is the best way to get your extension to users from all around the world. adding your extension to amo is easy. all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. but this won't make your extension public right away. ...
...will be pushed as an update to all your users. if you decide to host your own extension, you'll have to learn about the update system in order to push your own updates. babelzilla babelzilla is a worldwide community of localizers. developers submit their extensions using the web translation system (wts) and volunteers around the world translate them to different languages. the community is very
active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. you'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling. there's a significant portion of users that use a localized version of firefox, so you shouldn't neglect them. using babelzilla take...
Tabbed browser - Archive of obsolete content
// wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocume...
...d tabbrowser.ownerdocument.defaultview.focus(); } } the function can be called like so: openandreuseonetabperattribute("myextension-myattribute", "http://developer.mozilla.org/"). closing a tab this example closes the currently selected tab. gbrowser.removecurrenttab(); there is also a more generic removetab method, which accepts a xul tab element as its single parameter. changing
active tab this moves one tab forward (to the right). gbrowser.tabcontainer.advanceselectedtab(1, true); this moves one tab to the left. gbrowser.tabcontainer.advanceselectedtab(-1, true); detecting page load see also code snippets:on page load function examplepageload(event) { if (event.originaltarget instanceof components.interfaces.nsidomhtmldocument) { var win = event.originaltarget.d...
Updating addons broken by private browsing changes - Archive of obsolete content
ed, and don't allow access to private downloads. all downloads now use guids, and contain a new guid property. nsidownload now has retry, cancel, remove, pause, and resume methods which should be used instead of deprecated similarly-named nsidownloadmanager methods. nsidownload's getdownload method is deprecated; use the asynchronous getdownloadbyguid method instead. nsidownloadmanager now has
activeprivatedownloads,
activeprivatedownloadcount, and privatedbconnection members to complement the existing public ones. nsidownloadmanager's addlistener method is deprecated. addprivacyawarelistener should be used instead, or no notifications will be received for private downloads. there is a new download-manager-remove-download-guid notification, which passes an nsisupportscstring subject for the...
...vate. nsistricttransportsecurityservice: processstsheader, removestsstate, isstshost, and isstsuri now take a flags parameter that understands nsisocketprovider.no_permanent_storage or nothing. nsiprivatebrowsingservice: this service is deprecated, and as of firefox 20 it is now an empty interface. if your code depends on this interface, it will break. the global private browsing service is
actively being removed, and may not even exist as of firefox 21. nsirecentbadcertsservice: this is no longer a global service, and has been renamed to nsirecentbadcerts. to obtain this, acquire the nsix509certdb service, and use the new getrecentbadcerts method, passing a boolean indicating whether the private bad certificates or public ones are desired. observer notifications none of the ones listed...
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
the code has been removed from the mozilla source tree. xulrunner ships with the javaxpcom component, which allows java code to interact with xpcom objects. ...
...ntractid("@mozilla.org/embedcomp/window-watcher;1", nsiwindowwatcher.ns_iwindowwatcher_iid); // set the window creator (from step 6) windowwatcher.setwindowcreator(windowcreator); // create the root xul window: nsidomwindow win = windowwatcher.openwindow(null, "chrome://your-app/content/window.xul", "mywindow", "chrome,resizable,centerscreen", null); // set this as the
active window windowwatcher.set
activewindow(win); // hand over the application to xpcom/xul, this will block: appstartup.run(); here is an example of a locationprovider that works : public class locationprovider implements iappfilelocprovider { private final file libxulpath; int counter = 0; public locationprovider(file grepath) { this.libxulpath =...
Sorting Results - Archive of obsolete content
t. these attributes are modified when the user changes the sort. the sortdirection attribute may be used to specify the initial sort direction for a column. only one column should have this attribute set, as a tree may only be sorted by one column at a time. the value should be either 'ascending', 'descending' or 'natural'. this last value is the default if the attribute is not specified. the sort
active attribute may be set to true or false and specifies which column the tree is sorted by. only one column should have the sort
active attribute set to true at a time. the tree will change both attributes as necessary automatically when the column headers are clicked or the tree is sorted by other means. if you don't want to allow sorting by a certain column, you can leave out the sort attribute. onl...
....1/title" flex="1"/> note that all of this discussion about sorting only applies to tree builders. for other elements or content trees, sorting is done by placing the attributes on the root element. content sorting for content builders (templates that do not use flags="dont-build-content"), sorting is done by placing the sort and sortdirection attributes on the root node of the template. the sort
active attribute is not needed. in this example, the list of people is sorted ascending by name. <listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> it will often be the case that multiple items have the same value, espe...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
aking sure that you scroll to get all of it. ...
...s - modern */ #nav-bar .custombutton {-moz-image-region: rect( 0px 41px 39px 0px);} #nav-bar .custombutton:hover {-moz-image-region: rect( 0px 83px 39px 42px);} #nav-bar .custombutton:
active {-moz-image-region: rect( 0px 125px 39px 84px);} .custombutton {-moz-image-region: rect(39px 49px 72px 0px);} .custombutton:hover {-moz-image-region: rect(39px 98px 72px 49px);} .custombutton:
active {-moz-image-region: rect(39px 147px 72px 98px);} /* common style for all custom buttons - classic */ .custombutton {-moz-image-region: rect( 0px 145px 20px 126px);} .custombutton:hover {-moz-image-region: rect( 0px 164px 20px 145px);} .custombutton:
active {-moz-image-region: rect( 0px 183px 20px 164px);} remove one of the common style sections, leaving the section for the theme tha...
Skinning XUL Files by Hand - Archive of obsolete content
en in the in-line style definitions for hyperlinks which commonly appear in html documents. the pseudo-class is connected to an element (or not: you can also define styles that apply to any element in the state specified by a pseudo-class) with the ":" character. in this third type of style definition, the "a" element picks up the style information defined in the block only when it is, as a link,
active. this last type is new to css2. to start creating the xul skin: add the stylesheet processing instruction to the top of your xul file. <?xml-stylesheet href="sample.css" type="text/css"?> create a new text file called sample.css. add the following lines to the file: @import url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; ...
...tweigh those of using the standard c++ toolkits that xul authoring should rightfully be considered in a separate category of development. xul represents, as one evangelist put it, the "democratization" of interface design and ofapplications development, about which we will have more to say in a later article. in short, xul provides the tools for anybody to create interfaces as complex and as attr
active as any c++/mfc/visual ide/templates toolkit user's, and it does so in a way that makes these interfaces available on any platform. you don't have to know the vagueries of a "4gl" programming language or acquaint yourself with the innards of a particular platform and its native widgetry at the expense of others. xul's technologies are interoperable, consistent, cross-platform, free, and readily a...
XUL Questions and Answers - Archive of obsolete content
are children of directories. as such, you cannot use a template to display them in the same list. the best you can do is a cascading menu along the lines of the move/copy menus, but then of course you lose the ability to easily select from the list. ...
...ue"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> it should be written as follows: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sort
active="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist...
menu - Archive of obsolete content
les | attributes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
... property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. menu
active type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitem
active event will be sent to the item when the item is hovered over, and a dommenuitemin
active event will be sent to the item when the selection moves away. open type: boolean for the menu type buttons, the open attribute is set t...
window - Archive of obsolete content
-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> </groupbox> </vbox> </window> attributes accelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window.
activetitlebarcolor type: color string specify background color of the window's titlebar when it is
active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. chromemargin type: margin string controls the amount of chrome that should be visible on each side of the window. the specified string should contain four numbers, separated by comm...
...inimum or maximum height. the css height property may also be used. hidechrome type: boolean set this attribute to true to have the chrome including the titlebar hidden. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. in
activetitlebarcolor type: color string specify background color of the window's titlebar when it is in
active (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. lightweightthemes type: boolean true if the window supports lightweight themes, otherwise false. lightweightthemesfooter type: id specifies the id of an element to which a...
XULRunner Hall of Fame - Archive of obsolete content
version updates match the rapid release cycle. now available with xulrunner 30 with i18n support. mathml support is significant. includes smil audio overlays and idpf fixed layout. ...
... an open source teleprompter and script editor. source tomtom home 2 pc application to manage tomtom gps devices understanding faith (desktop version) a multimedia religious education resource for catholic secondary schools in australia. vivipos integrated point-of-sales software-hardware solution with customized xul application as the device front-end. english site. in
active projects these projects appear to be less
actively developed, with no updates since 2010. they are all based on xulrunner 1.8 or earlier. abstract an accounting package with breakthrough level of automation. latest release: 0.0.2 november 2010 - source clines a clone of color lines (game). latest release: 1.2 november 2008 - source cocoapsyc.app a psyc im/chat client for...
What XULRunner Provides - Archive of obsolete content
rading xul applications. see the wikimo:xul:installation story. ...
... what's out xulrunner will not supply: bookmarks or history ui (must be managed by the application/embedder) xforms (xforms will be available as an extension) ...
External resources for plugin creation - Archive of obsolete content
eath project home page project history description (from the project creators): firebreath is a cross-platform browser plugin framework written in c++. plugins created with firebreath work on all major browsers, including firefox 3.0 and later. platforms supported include windows, linux, and mac os x (intel). feature highlights include thread safety checks, unicode support (with std::wstring),
activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more. supported development environments are visual studio on windows, xcode on mac, and gcc on linux. all platforms rely on cmake for easy cross-platform builds. project: nixysa project home page description (from the home page): nixysa is a ...
...ary for developing cross-platform applications. it contains pretty much everything you're likely to need to create most applications, and is particularly good for creating highly-specialised uis and for handling graphics and sound. supported development environments are xcode, visual studio, gcc (and probably any other modern c++ compiler) browser plugins can be built as npapi (mac/windows), or
activex (windows). project: qtbrowserplugin project home page description (from the home page): the qtbrowserplugin solution makes it easy to write browser plugins that can be used in mozilla firefox, safari, opera, google chrome, qtwebkit and any other web browser that supports the "netscape plugin api", npapi articles, information, and tutorials npapi has been around a very long time, and there have...
Common Firefox theme issues and solutions - Archive of obsolete content
-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:
active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more information about identity boxes please see the identity box section of the amo editors theme review gu...
... see bug 708797. "about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale. to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.svg from the default theme into the mozapps/extensions/ folder of your theme and add the following style rule to the css file extensions.css: .addon[
active="false"] .icon { filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale"); opacity:0.3; } about:memory about:memory nodes do not collapse the styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on. to fix this issue you need to copy the following file from the latest version of firefox to your theme: chrome://global/content...
GetObject - Archive of obsolete content
able. for example: var cadobject; cadobject = getobject("c:\\cad\\schema.cad"); when this code is executed, the application associated with the specified pathname is started, and the object in the specified file is activated. if pathname is a zero-length string (""), getobject returns a new object instance of the specified type. if the pathnameargument is omitted, getobject returns a currently
active object of the specified type. if no object of the specified type exists, an error occurs. some applications allow you to activate part of a file. to do so, add an exclamation point (!) to the end of the file name and follow it with a string that identifies the part of the file you want to activate. for information on how to create this string, see the documentation for the application that creat...
...object variable myobject. for example: myobject.line(9, 90); myobject.inserttext(9, 100, "hello, world."); myobject.saveas("c:\\drawings\\sample.drw"); note: use the getobject function when there is a current instance of the object, or if you want to create the object with a file already loaded. if there is no current instance, and you don't want the object started with a file loaded, use the
activexobject object. if an object has registered itself as a single-instance object, only one instance of the object is created, no matter how many times
activexobject is executed. with a single-instance object, getobject always returns the same instance when called with the zero-length string ("") syntax, and it causes an error if the pathname argument is omitted. requirements supported in the fol...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
d later adopted into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in browsers has caused some unexpectedly aggressive hovering behavior on some pages. hover and non-link elements section 5.11.3 of css2 defines the three dynamic pseudo-classes (:hover, :
active, and :focus) and then goes on to say: css doesn't define which elements may be in the above states, or how the states are entered and left. scripting may change whether elements react to user events or not, and different devices and uas may have different ways of pointing to, or activating elements. thus, although authors are used to thinking of these states as applying exclusively to hyperlink...
...ed to include element names in dynamic-state pseudo-classes that are meant to be applied to hyperlinks. furthermore, combining pseudo-classes prevents hover styles from being applied to non-hyperlink anchors. thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover related links the dynamic pseudo-classes: :hover, :
active, and :focus :hover pseudo-class (msdn) original document information author(s): eric a. meyer, netscape communications last updated date: published 07 mar 2003; revised 21 mar 2003 copyright information: copyright © 2001-2003 netscape. all rights reserved. note: this reprinted article was originally part of the devedge site. ...
3D games on the Web - Game development
you can generate and render dynamic 3d graphics with javascript that is hardware accelerated. documentation and browser support the webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis. ...
...f by the tools you use, so you can focus on building the game itself. the most popular javascript 3d library is three.js, a multi-purpose tool that makes common 3d techniques simpler to implement. there are other popular game development libraries and frameworks worth checking too; a-frame, playcanvas and babylon.js are among the most recognizable ones with rich documentation, online editors and
active communities. building up a basic demo with a-frame a-frame is a web framework for building 3d and vr experiences. under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just html. see the building up a basic demo with a-frame subpage for the step-by-step process of creating the demo. building up a basic demo with babylon.js bab...
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
browsers limit the number of
active connections for each domain. to enable concurrent downloads of assets exceeding that limit, domain sharding splits content across multiple subdomains. when multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience. the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded. ...
...and improved user experience. the problem with domain sharding, in terms of performance, is the cost of extra dns lookups for each domain and the overhead of establishing each tcp connection. the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded. as browsers limit the number of
active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially. with domain sharding, the required downloads are served from more than one domain, enabling the browser to simultaneously download needed resources. multiple domains, however, is an anti-pattern, as dns lookups slow initial load times. http2 supports unlimit...
MDN Web Docs Glossary: Definitions of Web-related terms
endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first inter
active first meaningful paint first paint first-class function flex flex container flex item flexbox forbidden header name forbidden response header name fork fragmentainer frame rate (fps) ftp ftu function fuzz testing g gaia g...
...origin stylesheet svg svn symbol symmetric-key cryptography synchronous syntax syntax error synthetic monitoring t tag tcp tcp handshake tcp slow start telnet texel thread three js time to first byte time to inter
active tld tofu transmission control protocol (tcp) transport layer security (tls) tree shaking trident truthy ttl turn type type coercion type conversion u udp (user datagram protocol) ui undefined unicode uri url urn ...
Test your skills: CSS and JavaScript accessibility - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. css accessibility 1 in the first task you are presented with a list of links. ...
...n of that animal to appear in a box below the list. but it is not very accessible — in its current state you can only operate it with the mouse. we'd like you to add to the html and javascript to make it keyboard acessible too. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
CSS and JavaScript accessibility best practices - Learn web development
underline, and it is unwise to significantly deviate from this. for more on abbreviations, see abbreviations. 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). in addition, the mouse pointer changes to a pointer icon when links are moused over, and ...
... see the demo live). here you'll see a simple form; when you try to submit the form with one or both fields left empty, the submit fails, and an error message box appears to tell you what is wrong. this kind of form validation is unobtrusive — you can still use the form absolutely fine without the javascript being available, and any sensible form implementation will have server-side validation
active as well, because it is too easy for malicious users to bypass client-side validation (for example, by turning javascript off in the browser). the client-side validation is still really useful for reporting errors — users can know about mistakes they make instantly, rather than having to wait for a round trip to the server and a page reload. this is a definite usability advantage. note: server...
Test your skills: HTML accessibility - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html accessibility 1 in this task we will test your understanding of text semantics, and why they are good for accessibility. ...
... you could take the header image further and implement it using css for arguably better accessibility. why is this better, and what would a solution look like? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: WAI-ARIA - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. wai-aria 1 in our first aria task, we present you with a section of non-semantic markup, which is obviously meant to be a list. ...
...board-accessible version. the problem we have now is that when the dom changes to show a new decription, screenreaders cannot see what has changed. can you update it so that description changes are annouced by the screenreader? download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Advanced styling effects - Learn web development
the button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on oppos...
...px -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.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following result: here we've set up some button styling along with focus/hover/
active states. the button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect. when the button is pressed in, the
active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in. note: there is anoth...
Test your skills: The Cascade - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...to write a declaration in a new rule that will reset the background color back to white, without using an actual color value. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Images and Form elements - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have an image that is overflowing the box. ...
...a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Overflow - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one the content is overflowing the box because it has a fixed height. keep the height but cause the box to have scrollbars only if there is enough text to cause an overflow. ...
...imensions of the box so overflows visibly. change it so that any image outside of the box is hidden. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: The Box Model - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. the box model one with the two boxes below, one is using the standard box model, the other the alternate box model. change the width of the second box by adding rules to the .alternate class, so that it matches the visual width of the first box. ...
...e size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Selectors - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-size of 200%. ...
...e). target the <a> element with an href value starting with https and give it a green border (border-color: green). try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: sizing - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have two boxes. ...
...to the image so that the large image shrinks down into the box but the small image does not stretch. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: tables - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task in the lesson we styled up a table in a rather garish manner. ...
...taining numbers right. align headings and data for columns containing text left. add a top and bottom border, plus a border above the footer. stripe every odd row of the main table. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: backgrounds and borders - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
... that it is centered — you will need to use techniques learned in previous lessons to achieve this. the finished example should look like the image below: try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum. add the "learning" tag to your post so we are...
Test your skills: values and units - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, the first list item has been given a background color using hex color codes. ...
...need move the background image so that it is centered horizontally, and 20% from the top of the box. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Writing Modes and Logical Properties - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...e to the text rather than following top, left, bottom and right. you can see how this should look in the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Flexbox - Learn web development
the aim of this task is to get you working with flexbox and demonstrate your understanding of how flex items behave. below are four common design patterns which you might use flexbox to create, your task is to build them. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. flex layout one these list items are the navigation for a site. they should be laid out as a row, with an equal amount of space between each item. the finished example should look like the image below. try updating the live code below to recreate the finished e...
... editor or in an online editor. flex layout four in this final task arrange these items into rows as in the image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: floats - Learn web development
the aim of this task is to get you working with the css float and clear properties covered in our lesson on floats. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. floats one in this task you need to float the two elements with a class of float1 and float2 left and right respectively. the text should then appear between the two boxes as in the image below. try updating the live code below to recreate the finished ...
...t. use the most up to date method available to cause the box background to extend to below the float as in the image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test Your Skills: Fundamental layout comprehension - Learn web development
if you have worked through this module then you will have already covered the basics of what you need to know to do css layout today, and to work with older css as well. this task will test some of your knowledge by way of developing a simple webpage layout using a variety of techniques. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the design, which should look just like the image below. basic setup you can...
...eve this layout and the techniques you should use are: positioning float flexbox css grid layout there are a few ways in which you could achieve some of these tasks, and there often isn’t a single right or wrong way to do things. try a few different approaches and see which works best. make notes as you experiment. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Grid Layout - Learn web development
this aim of this task is to get you working with css grid layout, and test that you understand how a grid and grid items behave. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. grid layout one in this task you should create a grid into which the four child elements will auto-place. the grid should have three columns sharing the available space equally, and a 20-pixel gap between the column and row tracks. try upda...
...yout and flexbox to recreate the example as seen in the image. you do not need to make any changes to the html in order to do this. try updating the code below to create your example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you'd like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should incl...
Beginner's guide to media queries - Learn web development
. this feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. @media (hover: hover) { body { color: rebeccapurple; } } open this example in the browser, or view the source. if we know the user cannot hover, we could display some inter
active features by default. for users who can hover, we might choose to make them available when a link is hovered over. also in level 4 is the pointer media feature. this takes three possible values, none, fine and coarse. a fine pointer is something like a mouse or trackpad. it enables the user to precisely target a small area. a coarse pointer is your finger on a touchscreen. the value none means th...
...nsions are of the device being used, every range is catered for. the points at which a media query is introduced are known as breakpoints. the responsive design mode in firefox devtools is very useful for working out where these breakpoints should go. you can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.
active learning: mobile first responsive design broadly, you can take two approaches to a responsive design. you can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. this second approach is described as mobile first responsive design and is quite o...
Test your skills: Multicol - Learn web development
the aim of this task is to get you working with the css column-count, column-width, column-gap, column-span and column-rule properties and values covered in our lesson on multiple-column layout. you will be working through three small tasks which use different elements of the material you have just covered. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. multicol one in this task you need to create three columns, with a 50px gap between each column. try updating the live code below to recreate the finished example: for a...
...three cause the element containing the heading and subheading to span across all columns so it looks like the image. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: position - Learn web development
the aim of this task is to get you working with the css position property and values covered in our lesson on position. you will be working through two small tasks which use different elements of the material you have just covered. note: you can try out solutions in the inter
active editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. positioning one in this task you need to position the item with a class of target to the top and right of the container, which has the 5px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can yo...
... box the sidebar scrolls with the content. change it so that the sidebar stays in place and only the content scrolls. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Test your skills: Media Queries and Responsive Design - Learn web development
download the code and work locally, or use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. ...
...hen there is enough screen width to accomodate it. you can see the layout you are aiming for in the screenshot below. there are a number of ways that you could create the desktop layout, enjoy experimenting. you could also add a second breakpoint perhaps creating a layout that would work well on a tablet in portrait mode. assessment or further help you can practice these examples in the inter
active editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should ...
Fundamental text and font styling - Learn web development
ont-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. among all those properties, only font-size and font-family are required when using the font shorthand property. a forward slash has to be put in between the font-size and line-height properties. a full example would look like this: font: italic normal bold normal 3em/1.5 helvetica, arial, sans-serif;
active learning: playing with styling text in this
active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! you can either do this using offline html/css files, or enter your code into the live editable example below. if you make a mistake, you can always reset it using the r...
... this assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it. summary we hoped you enjoye...
Web fonts - Learn web development
as crediting the font creator in the code (or on your site). you shouldn't steal fonts and use them without giving proper credit. note: web fonts as a technology have been supported in internet explorer since version 4! you can use the firefox font editor to investigate and manipulate the fonts in use on your page, whether they are web fonts or not. this video provides a nice walkthrough:
active learning: a web font example with this in mind, let's build up a basic web font example from first principles. it is difficult to demonstrate this using an embedded live example, so instead, we would like you to follow the steps detailed in the below sections, to get an idea of the process. you should use the web-font-start.html and web-font-start.css files as a starting point to add your code ...
...any different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. they are somewhat advanced for our beginner's course, but if you fancy stretching yourself and looking into them, read our variable fonts guide. test your skills! you've reached the end of this article, and already did some skill testing in our
active learning sections, but can you remember the most important information going forward? you can find an assessment to verify that you've retained this information at the end of the module — see typesetting a community school homepage. summary now that you have worked through our articles on text styling fundamentals, it is time to test your comprehension with our assessment for the module, type...
What text editors are available? - Learn web development
your computer may already be installed with one of the editors suggested above (e.g. gedit if you use gnome desktop, kate if you use kde etc.), if not then you should try installing one or more text editors of your choosing. try digging through the settings of your editor and...
...your computer may already be installed with one of the editors suggested above (e.g. gedit if you use gnome desktop, kate if you use kde etc.), if not then you should try installing one or more text editors of your choosing. try digging through the settings of your editor and read the manual or docum...
Test your skills: Advanced styling - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
... some specific styling to visually indicate which inputs have to be filled in — they cannot be left empty. second, we want you to provide a useful visual indicator of whether the data entered inside each input is valid or not. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Basic controls - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. basic controls 1 this task starts you off nice and gently by asking you to create two <input> elements, for a user's id and password, along with a submit button. create appropriate inputs for user id and password. ...
... create a file picker. create a basic file picker. allow the user to pick multiple files at once. allow the file picker to accept jpg and png images only. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Form structure - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...second two). mark up each text label with an appropriate element so that it is semantically associated with its respective form field. add a suitable set of structural elements around the label/field pairs to separate them out. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice this example in the inter
active editor above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: HTML5 controls - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html5 controls 1 first let's explore some of the new html5 input types. ...
...associate it with the input. if you do this correctly, the javascript included on the page will automatically update the output value when the slider is moved. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Other controls - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. other controls 1 in our first "other controls" assessment, we'll get you to create a multi-line text input. create a basic multi-line text input. associate it semantically with the provided "comment" label. ...
...xt input, so that when you type characters, any of the list options that match the character sequence are given in a dropdown list as autocomplete suggestions. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Creating hyperlinks - Learn web development
omepage. note: a link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.
active learning: creating your own example link create an html document using your local code editor and our getting started template. inside the html body, add one or more paragraphs or other types of content you already know about. change some of the content into links. include title attributes. block level links as mentioned before, almost any content can be made into a link, even block-leve...
...nloaded rather than opened in the browser, you can use the download attribute to provide a default save filename. here's an example with a download link to the latest windows version of firefox: <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-us" download="firefox-latest-64bit-installer.exe"> download latest firefox for windows (64-bit) (english, us) </a>
active learning: creating a navigation menu for this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. this is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different c...
Debugging HTML - Learn web development
n if it is not what you expected. this, of course, can still be a problem! note: html is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. the web would probably not be as popular as it is today, if it had been more strict from the very beginning.
active learning: studying permissive code it's time to study the permissive nature of html code. first, download our debug-example demo and save it locally. this demo is deliberately written with some built-in errors for us to explore (the html markup is said to be badly-formed, as opposed to well-formed). next, open it in a browser. you will see something like this: this immediately doesn't look ...
...ce — created and maintained by the w3c, the organization that looks after the specifications that define html, css, and other web technologies. this webpage takes an html document as an input, goes through it, and gives you a report to tell you what is wrong with your html. to specify the html to validate, you can provide a web address, upload an html file, or directly input some html code.
active learning: validating an html document let's try this with our sample document. first, load the markup validation service in one browser tab, if it isn't already open. switch to the validate by direct input tab. copy all of the sample document's code (not just the body) and paste it into the large text area shown in the markup validation service. press the check button. this should give y...
Document and website structure - Learn web development
lement structure and semantics for the right job. to implement such semantic mark up, html provides dedicated tags that you can use to represent such sections, for example: header: <header>. navigation bar: <nav>. main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements. sidebar: <aside>; often placed inside <main>. footer: <footer>.
active learning: exploring the code for our example our example seen above is represented by the following code (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. <!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <l...
...tch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. the homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. you might also want to include notes about how things might be presented.
active learning: create your own sitemap try carrying out the above exercise for a website of your own creation. what would you like to make a site about? note: save your work somewhere; you might need it later on. test your skills! you've reached the end of this article, but can you remember the most important information? you can find a detailed assessment that tests these skills at the end of t...
Test your skills: Advanced HTML text - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. advanced html text 1 in this task we want you to turn the provided animals and their definitions into a description list. ...
...s with the dates in the text. use subscript and superscript to provide correct semantics for the chemical formulae and dates, and make them display correctly. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: HTML text basics - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html text basics 1 in this task we want you to mark up the provided html using semantic heading and paragraph elements. ...
...vided with a paragraph, and your aim is to use some inline elements to mark up a couple of appropriate words with strong importance, and a couple with emphasis. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Links - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. links 1 in this task we want you to help fill in the links on our whales information page: the first link should be linked to a page called whales.html, which is in the same directory as the current page. ...
...s is not strictly best practice, but we've done it here so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: HTML images - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html images 1 in this task we want you to embed a simple image of some blueberries into the page. you need to: add the path to the image to an appropriate attribute to embed it on the page. ...
...you are provided with both a full-featured image and some caption text. what you need to do here is add elements that will associate the image with the caption. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Images in HTML - Learn web development
that screen reader support is very unpredictable and most browsers won't show it unless you are hovering with a mouse (so e.g. no access to keyboard users). if you are interested in more information about this, read the trials and tribulations of the title attribute by scott o'hara. it is better to include such supporting information in the main article text, rather than attached to the image.
active learning: embedding an image it is now your turn to play! this
active learning section will have you up and running with a simple embedding exercise. you are provided with a basic <img> tag; we'd like you to embed the image located at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for lear...
... in your browser and see how it looks. a figure doesn't have to be an image. it is an independent unit of content that: expresses your meaning in a compact, easy-to-grasp way. could go in several places in the page's linear flow. provides essential information supporting the main text. a figure could be several images, a code snippet, audio, video, equations, a table, or something else.
active learning: creating a figure in this
active learning section, we'd like you to take the finished code from the previous
active learning section, and turn it into a figure: wrap it in a <figure> element. copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you can always reset it using the...
From object to iframe — other embedding technologies - Learn web development
more, and desktop support is on the way out. finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) this provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today. with the history lesson out of the way, let's move on and see how to use some of these.
active learning: classic embedding uses in this article we are going to jump straight into an
active learning section, to immediately give you a real idea of just what embedding technologies are useful for. the online world is very familiar with youtube, but many people don't know about some of the sharing facilities it has available. let's look at how youtube allows us to embed a video in any page we ...
... at the end of 2020. as of january 2020, most browsers block flash content by default, and by december 31st of 2020, all browsers will have completly removed all flash functionality. any existing flash content will be inaccessable after that date. so what should you do? if you need interactivity, html and javascript can readily get the job done for you with no need for java applets or outdated
activex/bho technology. instead of relying on adobe flash, you should use html5 video for your media needs, svg for vector graphics, and canvas for complex images and animations. peter elst was already writing some years ago that adobe flash is rarely the right tool for the job. as for
activex, even microsoft's edge browser no longer supports it. test your skills! you've reached the end of this articl...
Test your skills: Multimedia and embedding - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. multimedia and embedding 1 in this task we want you to embed a simple audio file onto the page. ...
...called mypdf.pdf, and is contained in the media folder. go to a sharing site like youtube or google maps, and embed a video or other media item into the page. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Events - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...contained in the button's data-color attribute. we want you to solve this without looping through all the buttons and giving each one their own event listener. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Functions - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...the array to choose from as a parameter (making it more flexible), and returns the result. print the returned result into the paragraph (para)'s textcontent. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Making decisions in your code — conditionals - Learn web development
alue === 'black'. if this returns true, we run the update() function with parameters of black and white, meaning that we end up with background color of black and text color of white. if it returns false, we run the update() function with parameters of white and black, meaning that the site color are inverted. note: you can also find this example on github (see it running live on there also.)
active learning: a simple calendar in this example, you are going to help us finish a simple calendar application. in the code you've got: a <select> element to allow the user to choose between different months. an onchange event handler to detect when the value selected in the <select> menu is changed. a function called createcalendar() that draws the calendar and displays the correct month in th...
...look at the <select> — this time you'll see that it has not two theme options, but five. you need to add a switch statement just underneath the // add switch statement c...
Test your skills: Arrays - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). ...
... the arrays article, so you'll have to do some research. finally, join the array items together in a single string called mystring, with a separator of " - ". try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Math - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...sting of a statement and two variables. for each one, write a test that proves or disproves the statement made. store the results of those tests in variables called weightcomparison, heightcomparison, and pwdmatch, respectively. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Strings - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...engths are the same as the two values we have. you'll need to look up how to calculate this from what you have. do the calculation inside the placeholder. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: variables - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...ts panel should be outputting the name chris, and a statement about how old chris will be in 20 years' time. how can you fix the problem and correct the output? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: JSON - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: in the example below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). json 1 the one and only task in this article concerns accessing json data and using it in your page. ...
...le are on the same origin (the code sits on a github repo, and is embedded here in an <iframe>). if you put your code on codepen for example, it would fail because the json it is requesting is not on the same origin. you can get around these restrictions using cors, but this is beyond the scope of what we are teaching here. assessment or further help you can practice these examples in the inter
active editor above. if you would like your work assessed, or are stuck and want to ask for help: write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for json skill test". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need h...
Test your skills: Object-oriented JavaScript - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...te an instance of the square class called square with appropriate property values, and call its calcperimeter() and calcarea() methods to show that it works ok. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
What is web performance? - Learn web development
in a sensible order so that the user can start to actually use it really quickly. 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). the measurement of how long it takes the site to get to a usable start after it has started loading is called time to inter
active. smoothness and interactivity: does the application feel reliable and pleasurable to use? is the scrolling smooth? are buttons clickable? are pop-ups quick to open up, and do they animate smoothly as they do so? there are a lot of best practices to consider in making apps feel smooth, for example using css animations rather than javascript for animation, and minimizing the number of repaints the...
...trics, which we will discuss throughout this module. to summarize, many features impact performance including latency, application size, the number of dom nodes, the number of resource requests made, javascript performance, cpu load, and more. it is important to minimize the loading and response times, and add additional features to conceal latency by making the experience as available and inter
active as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience. note: web performance includes both objective measurements like time to load, frames per second, and time to inter
active, and subjective experiences of how long it felt like it took the content to load. how content is rendered to effectively understand web performance, the issues behind...
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
emely beneficial, as ember makes heavy use of them. objective: to continue our learning about components classes, start looking at conditional rendering, and wire up some of our footer functionality. connecting the behavior in the footer to get the footer working, we need to implement the following thre areas of functionality: a pending todo counter. filters for all,
active, and completed todos. a button to clear the completed todos. because we need access to our service from the footer component, we need to generate a class for the footer. enter the following 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 ...
...ll want to persist or sync all changes to the todos list to local storage (see the final version of the app), it makes sense to have all persistent-state-changing operations be in the same place. summary that's enough for now. at this point, not only can we mark todos as complete, but we can clear them as well. now the only thing left to wire up the footer are the three filtering links: "all", "
active", and "completed". we'll do that in the next article, using routing. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning our react todo list componentizing our react app react interactivity: events and state react interactivity: editing, f...
Ember resources and troubleshooting - Learn web development
m people who have previous experience with react. while it is technically possible to use jsx, or any other form of dom creation, there has yet to be anything as robust as ember's templating system. the intentional minimalism forces certain decisions, and allows for more consistent code, while keeping the template more structural rather than having them filled with bespoke logic. see also: re
activeconf 2017: secrets of the glimmer vm what is the state of the mut helper? mut was not covered in this tutorial and is really baggage from a transitional time when ember was moving from two-way bound data to the more common and easier-to-reason-about one-way bound data flow. it could be thought of as a build-time transform that wraps its argument with a setter function. more concretely, using mu...
...omedata (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. what is the purpose of controllers? controllers are singletons, which may help manage the rendering context of the
active route. on the surface, they function much the same as the backing javascript of a component. controllers are (as of january 2020), the only way to manage url query params. ideally, controllers should be fairly light in their responsibilities, delegating to components and services where possible. what is the purpose of routes? a route represents part of the url when a user navigates from place...
Beginning our React todo list - Learn web development
ser stories before we begin our work will help us focus our work. our app should fulfill the following stories: as a user, i can read a list of tasks. add a task using the mouse or keyboard. mark any task as completed, using the mouse or keyboard. delete any task, using the mouse or keyboard. edit any task, using the mouse or keyboard. view a specific subset of tasks: all tasks, only the
active task, or only the completed tasks. we'll tackle these stories one-by-one. pre-project housekeeping create-react-app has made a few files we won't be using at all for our project. we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js. we are also not going to be using the logo.svg file, so remove that import too. then, copy and past...
...ception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>
active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining ...
Starting our Svelte Todo list app - Learn web development
epl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks. mark tasks as completed/pending without deleting them. remove tasks. add new tasks. filter tasks by status: all tasks,
active tasks, or completed tasks. edit tasks. mark all tasks as
active/completed. remove all completed tasks. building our first component let's create a todos.svelte component — this will contain our list of todos. create a new folder — src/components. note: you can put your components anywhere inside the src folder, but the components folder is a recognized convention to follow, ...
... </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>
active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="...
Deployment and next steps - Learn web development
learning more about svelte in this section we'll give you some resources and projects to go and check out, to take your svelte learning further. svelte documentation to go further and learn more about svelte, you should definitely visit the svelte homepage. there you'll find many articles explaining svelte's philosophy. if you haven't already done it, make sure you go through the svelte inter
active tutorial. we already covered most of its content, so it won't take you much time to complete it — you should consider it as practise! you can also consult the svelte api docs and the available examples. to understand the motivations behind svelte, you should read rich harris's rethinking reactivity presentation on youtube. he is the creator of svelte, so he has a couple of things to say about...
...d most of its content, so it won't take you much time to complete it — you should consider it as practise! you can also consult the svelte api docs and the available examples. to understand the motivations behind svelte, you should read rich harris's rethinking reactivity presentation on youtube. he is the creator of svelte, so he has a couple of things to say about it. you also have the inter
active slides available here which are, unsurprisingly, built with svelte. if you liked it, you will also enjoy the return of 'write less, do more' presentation, which rich harris gave at jscamp 2019. related projects there are other projects related to svelte that are worth checking out: sapper: an application framework powered by svelte that provides server-side rendering (ssr), code splitting, f...
Handling common JavaScript problems - Learn web development
s tab in chrome, debugger in safari (see safari web development tools), etc. in firefox, the debugger tab looks as follows: on the left, you can select the script you want to debug (in this case we have only one). the center panel shows the code in the selected script. the right-hand panel shows useful details pertaining to the current environment — breakpoints, callstack and currently
active scopes. the main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on. let's get to work. the error is now being thrown at line 51. click on line number 51 in the center panel to add a breakpoint to it (you'll see a blue arrow ap...
...break-point you have set. under call stack, you'll see a few entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked. at the top, we have showheroes() the function we are currently in, and second we have onload, which stores the event handler function containing the call to showheroes(). under scopes, you'll see the currently
active scope for the function we are looking at. we only have three — showheroes, block, and window (the global scope). each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped. we can find out some very useful information in here. expand the showheroes scope — you can see from this that the heroes variable is undefined, indicating that ...
Mozilla's Section 508 Compliance
ures of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product developer. complete. (c) a well-defined on-screen indication of the current focus shall be provided that moves among inter
active interface elements as the input focus changes. the focus shall be programmatically exposed so that assistive technology can track focus and focus changes. complete. we expose focus programmatically via msaa (windows) and atk (linux/unix). incomplete, we show focus but need to expose it programmatically by supporting carbon/cocoa accessibility. (d) sufficient ...
...ocoa accessibility. (d) sufficient information about a user interface element including the identity, operation and state of the element shall be available to assistive technology. when an image represents a program element, the information conveyed by the image must also be available in text. complete. we expose this information to assistive technology via microsoft
active accessibility (msaa) (windows) and accessibility toolkit (atk) (linux/unix). incomplete. no development efforts have made made to utilize cocoa or carbon accessibility apis. (e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's perfo...
Software accessibility: Where are we today?
nd what the application is attempting to convey. similarly, voice recognition software often needs information about the context of a user's interaction, in order to make sense of what the user is speaking. this context problem still plagues modern accessibility aids and solutions. the most recent noteable attempt at solving this problem was put forth by microsoft in 1997, and is called microsoft
active accessibility (msaa). realizing that complete accessibility was not possible without cooperation between applications and accessibility aids such as screen reading software or voice recognition software, microsoft
active accessibility defines a windows-based standard by which applications can communicate context and other pertanent information to accessibility aids. this solution has seen only pa...
...y on the companies which produce this software to make it accessible. these companies were often reluctant for various reasons including the large amount of time required to do so. on a positive note, recent federal purchasing rules such as section 508 have caused many companies to pay attention and implement msaa support. enter open source software microsoft was on the right track with microsoft
active accessibility, but because the source code to most popular desktop applications which are used in large corporations is not publicly available, they were never made fully accessible. in open source, however, making the necessary modifications to make them accessible is very possible. open source software is an ideal way to the needs of disabled users, because accessibility can be fully integrated...
Mozilla’s UAAG evaluation report
dom write access. (p1) g the dom is available in-process, but not via an out-of-process (com) interface. out-of-process access is needed for it to be truly useful for assistive technology we do support some com interfaces called isimpledomnode, which has a large portion of useful dom read access 6.3 programmatic access to non-html/xml content. ...
...omnode, which has a large portion of useful dom read access 6.3 programmatic access to non-html/xml content. (p1) ni still working on
active accessibility support for other kinds of content 6.4 programmatic operation. (p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses
active accessibility to provide program access to controls do not support all
active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic alert of changes. (p1) g uses
active accessibility to generate change events to assistive technology 6.6 conventional keyboard apis. (p1) c uses standard keyboard api, works ...
Experimental features in Firefox
ightly 44 no developer edition 44 no beta 44 no release 44 no preference name gfx.offscreencanvas.enabled hit regions whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. the hit region api allows you define an area of your canvas and provides another possibility to expose inter
active content on a canvas to accessibility tools. release channel version added enabled by default? nightly 30 no developer edition 30 no beta 30 no release 30 no preference name canvas.hitregions.enabled webgl: draft extensions when this preference is enabled, any webgl extensions currently in "draft" s...
...see bug 1190623 for more details. release channel version added enabled by default? nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in th...
Performance
e scripts/message manager usage and alternative approaches to avoid them. key points to keep in mind scripts registered during addon startup get executed during session restore. the more expensive they are to execute the longer it will take for the browser to become responsive after startup. frame scripts also get executed on non-restored tabs. all their overhead is thus not just incurred by
active tabs but by the total number of tabs in a session. the following examples omit some boilerplate code for the sake of brevity the "better" examples also omit some best practices and only demonstrate how to fix the problem described in their respective subtopics. performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescr...
...yedprocessscript("resources://my-addon/processcript.js"); services.mm.broadcastasyncmessage("my-addon:unload"); services.ppmm.broadcastasyncmessage("my-addon:unload"); } in the frame/process scripts: remove all kinds of listeners remove observer notifications remove custom categories and services nuke sandboxes unload jsms restore content dom states where necessary, e.g. remove inter
active ui elements that would be inert with the addon ...
HTMLIFrameElement.clearMatch()
vileged app, and browser and/or embed-apps permissions, depending on what you want to do. see using the browser api for more details. syntax instanceofhtmliframeelement.clearmatch(); returns void. parameters none. examples the following function is taken from our browser api demo, and (amongst other things) clears the search results when the search bar is hidden, if an existing search is
active. ...
...ts when the search bar is hidden, if an existing search is
active. see implementing the search bar for more explanation. searchtoggle.addeventlistener('touchend',function() { if(search.getattribute('class') === 'search') { search.setattribute('class', 'search shifted'); } else if(search.getattribute('class') === 'search shifted') { search.setattribute('class', 'search'); if(search
active) { browser.clearmatch(); search
active = false; prev.disabled = true; next.disabled = true; searchbar.value = ''; } } }); specification not part of any specification. ...
Getting Started with Chat
hing long to post, a code snippet for example, use paste.mozilla.org and paste the generated url in irc instead. when addressing someone directly, try to use name: message format. for example, "ashughes: good morning!" every channel has its own topic. try to keep your messages within that subject matter. for example, do not talk about thunderbird issues in #firefox. mozilla's channels are most
active between 9am and 7pm pst monday to friday, excluding us holidays. when asking a question, be patient. sometimes, it can take a few minutes for people to respond. posting a message like "help!" is not particularly helpful. asking a good question will result in a better experience for both you and the person trying to help. relax and have fun! software there are several different applications ...
...or the channel. if #channel is not specified, the command is executed for the current channel. /mode #channel +o nickname sets specified user as an owner or moderator of the specified channel. if a #channel is not specified, the command is executed for the current channel. /mode #channel +s sets the channel as a secret channel. this takes the channel off the public list of
active channels and topics. /msg nick message sends a private message to the specified user /nick nickname change your current nickname nickname: ping get a user's attention (nickname is the name of the user you want the attention of) nickname: pong respond to a user's ping (nickname is the name of the user who wants your attention) /query nicknam...
IPDL Tutorial
ophic error handling: the communication channels for the child process (tab or plugin) will be disconnected, and the process will be terminated. do not return false from message handlers for "normal" error conditions such as inability to load a network request! normal errors should be signaled with a message or return value. note: the following paragraphs are not yet implemented. ipdl tracks all
active protocols between two endpoints. if if the child side crashes or becomes hung: any synchronous or rpc messages currently
active will return false no further messages will be accepted (c++ methods will return false) each ipdl actor will receive an onerror message deallocpsubprotocol will be called on each manager protocol to deallocate any
active subprotocols. when a manager protocol is de...
...messages will be accepted (c++ methods will return false) each ipdl actor will receive an onerror message deallocpsubprotocol will be called on each manager protocol to deallocate any
active subprotocols. when a manager protocol is destroyed, any subprotocols will be notified: no further messages will be accepted deallocpsubprotocol will be called on the manager protocol to deallocate any
active subprotocols when the toplevel protocol is destroyed, this is equivalent to shutting down the entire ipdl machinery for that connection, because no more messages can be sent and all subprotocols are destroyed. ...
Code Samples
var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, ...
... var beinguninstalled; let listener = { onuninstalling: function(addon) { if (addon.id == "youraddon@youraddon.com") { beinguninstalled = true; } }, onoperationcancelled: function(addon...
Downloads.jsm
ly { yield list.removeview(view); } }).then(null, components.utils.reporterror); conversion from nsidownloadmanager starting in firefox for desktop version 26, the nsidownloadmanager and nsidownload interfaces are not available anymore. the new module works differently from the old component. in general, you should be aware of the following highlights: there is no difference between
active downloads and finished downloads. the download object can be used without requiring direct database access. observer notifications (for example, "dl-done") and download listeners are replaced by views on the downloadlist object returned by the getlist() method. object identity replaces the use of numeric identifiers. you can use download objects as keys in a set or map to associate your own sta...
...be used without requiring direct database access. observer notifications (for example, "dl-done") and download listeners are replaced by views on the downloadlist object returned by the getlist() method. object identity replaces the use of numeric identifiers. you can use download objects as keys in a set or map to associate your own state to them for the session. there is no separate count of
active downloads. if a count is needed, it should be maintained using a view on a downloadlist. the start() method can be used to restart a failed download. handling of downloads that have been paused is also different. while some of the legacy methods and properties have an equivalent in downloads.jsm, there might be subtle differences in behavior. for example, the properties that handle progress ar...
Sqlite.jsm
inkmemoryonconnectionidlems (optional) if defined, the connection will attempt to minimize its memory usage after this many milliseconds of connection idle. the connection is idle when no statements are executing. there is no default value which means no automatic memory minimization will occur. please note that this is not a timer on the idle service and this could fire while the application is
active. openconnection(options) returns a promise that resolves to an opened connection instance or is rejected if an error occurred while opening the database. here is an example: components.utils.import("resource://gre/modules/sqlite.jsm"); try { const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); // connection is the opened sqlite connection (se...
... interacting with it shortly after calling this function. this is because sqlite will need to page the database back into memory from disk. therefore, caution should be exercised before calling this function. this returns a promise that is resolved when the operation completes. discardcachedstatements() this function is used to discard cached statement instances, freeing memory in the process.
active cached statements will not be discarded. therefore, it is safe to call this any time. this returns an integer count of the number of cached statements that were discarded. table and schema management these apis deal with management of tables and database schema. getschemaversion() the user-set version associated with the schema for the current database. if no schema version has been set, thi...
NSS Tools modutil
e all slots on the named module. use the [-slot slotname] argument to enable a specific slot. -disable modulename disable all slots on the named module. use the [-slot slotname] argument to disable a specific slot. -fips [true | false] enable (true) or disable (false) fips 140-2 compliance for the netscape communicator internal module. -force disable the security module database tool's inter
active prompts so it can be run from a script. use this option only after manually testing each planned operation to check for warnings and to ensure that bypassing the prompts will cause no security lapses or loss of database integrity. arguments -dbdir directory specify the database directory in which to access or create security module database files. on unix, the security module database tool d...
... this information file contains special scripting and must be declared in the j...
Index
llable jsapi reference, reference, référence(2), spidermonkey js_bindcallable binds the given callable to use the given object as this. 193 js_bufferiscompilableunit jsapi reference, spidermonkey given a buffer, return false if the buffer might become a valid javascript statement with the addition of more lines. otherwise return true. the intent is to support inter
active compilation - accumulate lines in a buffer until js_bufferiscompilableunit is true, then pass it to the compiler. 194 js_cstringsareutf8 jsapi reference, obsolete, spidermonkey by default, all c/c++ strings passed into the jsapi are treated as iso/iec 8859-1, also known as iso-latin-1. that is, each byte is treated as a unicode character, and there is no way to pass in a stri...
...ptionstate object holding this state. that object may then be used to restore again the context using js_restoreexceptionstate, or discarded using js_dropexceptionstate. either of those two functions frees any memory used by the jsexceptionstate. 442 js_saveframechain jsapi reference, spidermonkey these two functions are used to set aside cx's call stack while that stack is in
active. after a call to js_saveframechain, it looks as if there is no code running on cx. before calling js_restoreframechain, cx's call stack must be balanced and all nested calls to js_saveframechain must have had matching js_restoreframechain calls. 443 js_schedulegc jsapi reference, reference, référence(2), spidermonkey js_schedulegc sets the nextscheduled parameter of gc. ...
JS_SetGCCallback
ght happen. but the javascript engine will then detect that gc is already happening and will not actually do a nested gc cycle in this case. in a js_threadsafe build, a jsgc_begin callback may happen on any thread, any time that thread triggers garbage collection (from almost any jsapi call). the gc callback may be called on multiple threads at the same time (e.g. if a thread that is not in an
active request calls js_gc while gc is already happening on another thread). in a js_threadsafe build, a jsgc_begin callback can happen on one thread before or while a jsgc_end callback for the previous gc cycle runs on another thread. in a js_threadsafe build, the jsgc_end callback is called after each stop-the-world rendezvous during which one or more garbage collection cycles finished. the callba...
...ck can happen on one thread before or while a jsgc_end callback for the previous gc cycle runs on another thread. in a js_threadsafe build, the jsgc_end callback is called after each stop-the-world rendezvous during which one or more garbage collection cycles finished. the callback executes on the same thread that performed gc, after the gc lock has been released. other threads may be running in
active requests. see also mxr id search for js_setgccallback js_setfinalizecallback bug 723286 ...
Web Replay
ocess must be just non-deterministic enough that the ipc and debugger components work. in practice, non-deterministic replay is allowed in the following areas: heap allocations can be performed by the ipc and debugger components and so can differ between recording and replay. js compilations and some other internal state are affected by the debugger's presence and which hooks/breakpoints are
active, and so can differ between recording and replay. the debugger can allocate gc things, and allocation of other gc things can differ in the debugger's presence. for example, script compilation involves gc thing allocation, and observing changes in an object will change its shape. relaxing non-determinism here has a number of ripple effects in other areas. mainly, pointer values may differ betwe...
...ges should eventually be removable. graphics rendering is entirely local to the content process. instead of communicating via ipc with a compositor in the ui process, there is a compositor in the recording process itself which performs the rendering. some additional instrumentation is performed, per the 'allowed non-determinism', section above. the ipc, rewind, and debugger components are all
active while recording. these spawn a number of threads which do not participate in the recording: any events they execute are live. see the sections below for details on how these affect the process' behavior. to make it easier to ensure that the non-deterministic components do not have an effect on recorded behavior, certain code regions can be marked as disallowing events — while executing them...
Handling Mozilla Security Bugs
scrutiny. the remaining sections of this document describe in more detail how these general policies have been implemented in practice. organizational structure for handling security bugs we are organizing the investigation and fixing of mozilla security vulnerabilities similar to the way mozilla project activities are handled in general: there will be a security module owner, a small core of
active contributors who can act as peers to the module owner, a larger group of less
active participants, and other people who may become involved from time to time. as with other parts of the mozilla project, participation in the mozilla security-related activities will be open to both independent volunteers and to employees of the various corporations and other organizations involved with mozilla. th...
...awn primarily from the following groups: security developers (i.e., those whose bugs are often singled out as security-relevant or who have security-relevant bugs assigned to them), and security qa people who are the qa contacts for those bugs. exploit hunters with a good track record of finding significant mozilla security vulnerabilities. representatives of the various companies and groups
actively distributing mozilla-based products. super-reviewers and drivers. the bugzilla administrators will technically be in the mozilla security bug group as well, mainly because they already have visibility into all bugzilla data hosted through mozilla.org. the mozilla security bug group will have a private mailing list, security-group@mozilla.org, to which everyone in the security bug group will...
Gecko states
on is required. state_important isn;t used. state_invalid indicates a validation failure. ...
...isn;t used. state_invalid indicates a validation failure. ...
The Publicity Stream API
all apis related to open web applications are accessed under the navigator.apps object. publicity stream api (navigator.apps.publicity.*) the publicity api is exposed as properties on the navigator.apps.publicity object. publicizeactivity( <activity>, [ { [ onsuccess: <function> ], [ onerror: <function> ] } ]): applications should call this method when an user-initiated activity deemed attr
active to potential consumers occurs. this spawns a doorhanger which allows the user to specify which users can view the activity, and (following successful login and authorization with the stream server) registers the activity in a stream at [address]. this stream can be pulled down by getpublicitystream() and helps determine the results for getuserrecommendedapps(). example use cases: 'adam got a hi...
...<date> ], [ count: <int> ]): provides a means for a web store to receive a list of the current user's socially relevant app activity by being called from an origin which hosts a web store. it is not recommended that applications consume the publicity stream in any way (please use your own server for any in-app social aspects). it is suggested that the list be processed and condensed into an attr
active, cohesive format for users (eg., multiple tweets show as 'adam tweeted 4 times'). onsuccess will be called with a single argument: a json list of the current user's socially relevant app activity in the fixme: deadlinkactivity streams open specification. onerror is an error callback that will be invoked if the installation fails. possible error codes include: denied - if the user does n...
XPCShell Reference
the command line the command-line syntax for xpcshell is: xpcshell [-s] [-w] [-w] [-v version] [-f scriptfile] [scriptfile] [scriptarg...] -c this option turns on the "compile-only" mode. (setting this option disables the "inter
active" mode) -f this option specifies a script file to execute. xpcshell terminates upon script completion. you can specify multiple js files to execute by using multiple -f arguments, and the scripts will be executed in the order encountered. furthermore, xpcshell looks for xpcshell.js in the current directory. ...
...ultiple js files to execute by using multiple -f arguments, and the scripts will be executed in the order encountered. furthermore, xpcshell looks for xpcshell.js in the current directory. if that file is found, it is executed before any other js files specified. -g this option specifies which gecko runtime environment directory (gredir) to use for xpcom. -i this option turns on the "inter
active" mode -s this option toggles the javascript strict option on and off. by default it is off. -v version this allows you to specify a specific version of js to use, and should be set to an integral value specified by the jsversion enumerated type. for instance, specifying -v 180 will set the interpreter to use javascript version 1.8. -w (lower case) this option turns on javascript wa...
Observer Notifications
nt windows as needed (see nsidomglobalpropertyinitializer for an alternative method of doing this). data is a string form of the origin (for use in security checks), eg "http://developer.mozilla.org". document-element-inserted document null sent immediately after the root element of a document has been created, but before executing any script on it. user-interaction-
active nsidomwindow null sent once every 5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to
active. user-interaction-in
active nsidomwindow null sent when the chrome document has seen no user activity for a while. the notification is not repeated du...
.... em-action-requested item-enabled an addon has been enabled. em-action-requested item-disabled an addon has been disabled. em-action-requested item-cancel-action a previous action has been cancelled. idle service this topic indicates when actions related to the idle service, provided by the nsiidleservice interface. unlike the user-interaction-
active and user-interaction-in
active topics listed above, the idle service monitors user activity in general, whether related to the mozilla application or not (acting somewhat like the user activity/inactivity events a screen saver would be interested in). topic data description idle the length of time the user has been idle, in milliseconds. sent when the user becomes id...
mozIStorageConnection
ombination of asynchronous and synchronous statement execution. the best way to deal with this is to only execute your statements asynchronously using mozistorageconnection.executeasync(). this method will manage the transactions for you, so you don't have to worry about them. note: the database engine does not support nested transactions, so attempting to start a transaction when one is already
active will throw an exception. void begintransactionas( in print32 transactiontype ); parameters transactiontype one of the transaction constants (mozistorageconnection.transaction_deferred, mozistorageconnection.transaction_immediate, mozistorageconnection.transaction_exclusive) clone() clones a database connection, optionally making the new connection read only. note: if your connecti...
...name ); parameters aindexname the index to check. return value true if the index exists, false otherwise. preload() obsolete since gecko 1.9 (firefox 3) this is used to preload the database cache. it loads pages from the start of the database file until the memory cache (specified by "pragma cache_size=") is full or the entire file is read. the cache must be
active on the database for this to work. this means that you must have a transaction open on the connection, or have a transaction open on another connection that shares the same pager cache. this cached data will go away when the transaction is closed. this preload operation can dramatically speed up read operations because the data is loaded as one large block. normally, pages are read in on demand, ...
nsIHttpActivityObserver
if this is false, the observeactivity() method should not be called. read only. note: this attribute is present only for compatibility and should not be used. constants activity type constants constant value description activity_type_socket_transport 0x0001 socket transport activity has occurred...
...if this is false, the observeactivity() method should not be called. read only. note: this attribute is present only for compatibility and should not be used. constants activity type constants constant value description activity_type_socket_transport 0x0001 socket transport activity has occurred. activity_type_http_transaction 0x0002 ...
nsIHttpChannelInternal
s bound, in the same format produced by pr_netaddrtostring(). this may be either an ipv4 or ipv6 address. note: if network address translation (nat) is in effect, this may not be the same address the remote host thinks it is talking to. this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.is
active attribute is false. see bug 534698 and bug 526207. read only. localport print32 the local port number to which the channel is bound. this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.is
active attribute is false. see bug 534698 and bug 526207. read only. proxyinfo nsiproxyinfo get ...
...proxyinfo get the proxy info in use by the channel. read only. obsolete since gecko 1.9 remoteaddress autf8string the ip address of the remote host to which this channel is bound, in the same format produced by pr_netaddrtostring(). this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.is
active attribute is false. see bug 534698 and bug 526207. read only. remoteport print32 the remote port number to which the channel is bound. this may throw an ns_error_not_available exception if accessed when the channel's endpoints haven't been determined yet, or any time the nsihttpactivityobserver.is
active attribute is false. see bug 534698 and bug 526207. read only. methods getrequestversio...
nsIIdleService
introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 16 (firefox 16 / thunderbird 16 / seamonkey 2.13) you can get the idle time directly, but in most cases you will want to register an observer for a predefined interval. 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. note: the idle service is for computer-wide idle detection, not just application idle detection. in other words, even if the user is working in other applications, the idle service will still consider the user to be
active. currently nsiidleservice implementations exist for windows, mac os x, and linux (via xscreensaver...
...ime manually). read only. methods addidleobserver() add an observer to be notified when the user idles for some period of time, and when they get back from that. the subject of the notification the observer will get is always the nsiidleservice itself. 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. the data parameter for the notification contains the current user idle time in gecko 15 and earlier or 0 in gecko 16 and later. you can add the same observer twice. most implementations need to poll the os for idle info themselves, meaning your notifications could arrive with a delay up to the length of the polling interval in that implementation. current implementations...
nsIJumpListBuilder
d items internally. each list is made up of an array of nsiwinjumplistitems representing items such as shortcuts, links, and separators. see nsijumplistitem for information on adding additional jump list types. method overview void abortlistbuild(); boolean addlisttobuild(in short acattype, in nsiarray items optional, in astring catname optional); boolean commitlistbuild(); boolean delete
activelist(); boolean initlistbuild(in nsimutablearray removeditems); attributes attribute type description available short indicates whether jump list taskbar features are supported by the current host. read only. islistcommitted boolean jumplist management. indicates if a commit has already occurred in this session. read only. exceptions thrown ns_error_not_available on all calls if task...
...ns_error_unexpected on internal errors. ns_error_illegal_value if an item is added that was removed since the last commit. ns_error_invalid_arg if incorrect parameters are passed for a particular category or item type. commitlistbuild() commits the current jump list build to the taskbar. boolean commitlistbuild(); parameters none. return value true if the operation completed successfully. delete
activelist() deletes any currently applied taskbar jump list for this application. common uses would be the enabling of a privacy mode and uninstallation. boolean delete
activelist(); parameters none. return value true if the operation completed successfully. exceptions thrown ns_error_unexpected on internal errors. initlistbuild() initializes a jump list build and returns a list of items the user rem...
nsIMenuBoxObject
openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false. note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface. subsequent gecko versions will have the attribute on the nsimenuboxobject interface. meth...
... to get access to the box object for a given menu, use code like this: var boxobject = xulmenu.boxobject.queryinterface(components.interfaces.nsimenuboxobject); method overview boolean handlekeypress(in nsidomkeyevent keyevent); void openmenu(in boolean openflag); attributes attribute type description
activechild nsidomelement the currently
active menu or menuitem child of the menu box. openedwithkey boolean true if the menubar was opened using the keyboard; otherwise false. note: for gecko 2.0, the openedwithkey attribute exists on the nsimenuboxobject_mozilla_2_0_branch interface. subsequent gecko versions will have the attribute on the nsimenuboxobject interface. methods handlekeypress() boolean handlekeypress( ...
nsIZipReader
ules/osfile.jsm'); cu.import('resource://gre/modules/fileutils.jsm'); var reusablestreaminstance = cc['@mozilla.org/scriptableinputstream;1'].createinstance(ci.nsiscriptableinputstream); var pathtoxpitoread = os.path.join(os.constants.path.profiledir, 'extensions', 'portabletester@jetpack.xpi'); var nsifilexpi = new fileutils.file(pathtoxpitoread); //services.ww.
activewindow.alert(pathtoxpitoread); try { zr.open(nsifilexpi); //if file dne it throws here var entries = zr.findentries('*'); //we use asterik because we want everything listed out while (entries.hasmore()) { var entrypointer = entries.getnext(); //just a string of "zip path" (this means path to file in zip, and it uses forward slashes remember) var entry = z...
...reaminstance.init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsize); console.log('contenst of file=', filecontents); } else { console.log('is directory, no stream to read'); } } } catch (ex) { console.warn('exception occured = ', ex); if (ex.name == 'ns_error_file_not_found') { services.ww.
activewindow.alert('xpi at path does not exist!\n\npath = ' + pathtoxpitoread); } } finally { zr.close(); console.log('zr closed'); } see also nsizipentry nsizipwriter ...
Plug-in Basics - Plugins
s not change. the basic operations of the browser, such as navigation, history, and opening files, apply to all pages, regardless of the plug-ins in use. using the object element for plug-in display the <object> element is part of the html specification for generic inclusion of special media in a web page. it embeds a variety of object types in an html page, including plug-ins, java components,
activex controls, applets, and images. object element attributes determine the type of object to embed, the type and location of the object's implementation (code), and the type and implementation of the object's data. plug-ins were originally designed to work with the embed element rather than the object element (see using the embed element for plug-in display), but the object element itself provides ...
...mbed element, which is also used for plug-ins, does not. the object element is also a part of the html w3c standard. also, unlike the <applet> element, object can contain other html elements including other object elements, nested between its opening and closing tags. so, for example, though gecko does not support the classid attribute of the object element - which was used for java classes and
activex plug-ins embedded in pages - object elements can be nested to support different plug-in implementations. see the mozilla
activex project page in the plug-in references section below for more information about embedding
activex controls in plug-ins or embedding plug-ins in
activex applications. the following examples demonstrate this use of nested object elements with markup more congenial to g...
Introduction to DOM Inspector - Firefox Developer Tools
et in order. properties may be also be edited. rules applying to pseudo-elements do not appear. the javascript object viewer gives a hierarchical tree of the object pane's subject. the javascript object viewer also allows javascript to be evaluated by selecting the appropriate menuitem in the context menu. ...
...o mention in this introduction is the ability is the ability the dom inspector gives you to dynamically update information reflected in the dom about web pages, user interface, and other elements. note that when the dom inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the dom, attributes are subnodes of elements, typically) in an
active list. you can perform actions on the individual items in this list from the context menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes. this interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the dom as it is defined in the file on disk. loving the ...
Debugger.Frame - Firefox Developer Tools
r.frame instance for a given frame. this allows the code using each debugger instance to place whatever properties it likes on its debugger.frame instances, without worrying about interfering with other debuggers.) when the debuggee pops a stack frame (say, because a function call has returned or an exception has been thrown from it), the debugger.frame instance referring to that frame becomes in
active: its live property becomes false, and accessing its other properties or calling its methods throws an exception. note that frames only become in
active at times that are predictable for the debugger: when the debuggee runs, or when the debugger removes frames from the stack itself. visible frames when inspecting the call stack, debugger does not reveal all the frames that are actually present on...
...to a debugger.frame instance; they may not be used as methods of other kinds of objects. eval(code, [options]) evaluatecode in the execution context of this frame, and return a completion value describing how it completed.code is a string. if this frame’s environment property is null or type property is wasmcall, throw a typeerror. all extant handler methods, breakpoints, and so on remain
active during the call. this function follows the invocation function conventions. codeis interpreted as strict mode code when it contains a use strict directive, or the code executing in this frame is strict mode code. ifcode is not strict mode code, then variable declarations incode affect the environment of this frame. (in the terms used by the ecmascript specification, the variableenvironment of...
Examine and edit CSS - Firefox Developer Tools
rule display it displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations. highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector. overridden declaration: declarations that are overridden by later rules are crossed out. see overridden declarations. in
active rules (not shown): if a rule is in
active (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more information when clicked. filter rules containing this property: next to overridden declarations is an icon you can click to filter the rules list to show only those rules that include that property. see overridden declarations. enable/disable: if you hove...
... if you enable one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied. in addition, the information that appears on the page itself show you what pseudo-class ...
Examine and edit HTML - Firefox Developer Tools
of each command in the context menu reference: edit as html create new node duplicate node delete node attributes add attribute copy attribute value edit attribute remove attribute break on ... ...
... (only when invoked over a link to a js source) opens the linked source in the debugger. open file in style-editor (only when invoked over a link to a css source) opens the linked source in the style editor. copy link address (only when invoked over a url) copy the url. (change pseudo-class) hover set the :hover css pseudo-class. (change pseudo-class)
active set the :
active css pseudo-class. (change pseudo-class) focus set the :focus css pseudo-class. (change pseudo-class) focus-within set the :focus-within css pseudo-class. (change pseudo-class) visited set the :visited css pseudo-class. editing html you can edit the html — tags, attributes, and content — directly in the html pane: double-click the ...
Animation.currentTime - Web APIs
syntax var currenttime = animation.currenttime; animation.currenttime = newtime; value a number representing the current time in milliseconds, or null to deactivate the animation. examples in the drink me/eat me game, alice's height is animated so it can go from small to large or large to small. ...
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 animation.currenttime; //...
AnimationTimeline.currentTime - Web APIs
reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animationtimeline.currenttime might get rounded depending on browser settings. ...
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animationtimeline.currenttime might get rounded depending on browser settings. ...
AudioContextLatencyCategory - Web APIs
our content is being used. audiocontextlatencycategory can be used when constructing a new audiocontext by passing one of these values as the latencyhint option in the audiocontext() constructor's options dictionary. values value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value. "inter
active" the audio is involved in inter
active elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latenc...
... visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latency that will maximize playback time by minimizing power consumption at the expense of latency. useful for non-inter
active playback, such as playing music. specifications specification status comment web audio apithe definition of 'audiocontextlatencycategory' in that specification. working draft initial definition. ...
AudioContextOptions.latencyHint - Web APIs
the audiocontextoptions dictionary (used when instantiating an audiocontext) may contain a property named latencyhint, which indicates the preferred maximum latency in seconds for the audio context. the value is specified either as a member of the string enum audiocontextlatencycategory or a double-precision value. ...
... the value can also be specified as a double-precision floating-point value, specifying the preferred maximum latency in seconds. this provides more precise control over the balance between audio latency and device energy usage. ...
AudioContextOptions - Web APIs
int the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value. "inter
active" the audio is involved in inter
active elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latenc...
... visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latency that will maximize playback time by minimizing power consumption at the expense of latency. useful for non-inter
active playback, such as playing music. example this example instantiates an audio context for music playback (optimized for power consumption over latency), with the sample rate 48,000 hz. let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specifications specification status comment web audio apithe definition of 'audiocontextopti...
DOMException - Web APIs
ue and constant name). unknownerror the operation failed for an unknown transient reason (e.g. out of memory) (no legacy code value and constant name). constrainterror a mutation operation in a transaction failed because a constraint was not satisfied (no legacy code value and constant name). dataerror provided data is inadequate (no legacy code value and constant name). transactionin
activeerror a request was placed against a transaction that is currently not
active or is finished (no legacy code value and constant name). readonlyerror the mutating operation was attempted in a "readonly" transaction (no legacy code value and constant name). versionerror an attempt was made to open a database using a lower version than the existing version (no legacy code value and constan...
... ...
Document.alinkColor - Web APIs
returns or sets the color of an
active link in the document body. a link is
active during the time between mousedown and mouseup events. syntax var color = document.alinkcolor; document.alinkcolor = color; color is a string containing the name of the color (e.g., blue, darkblue, etc.) or the hexadecimal value of the color (e.g., #0000ff) notes the default value for this property in mozilla firefox is red (#ee0000 in hexadecimal). document.alinkcolor is deprecated in dom level 2 html. one alternative is the css selector :
active. another alternative is document.body.alink, although this is deprecated in html 4.01 in favor of the css alternative. gecko supports both alinkcolor/:
active and :focus. ...
...fault value for this property in mozilla firefox is red (#ee0000 in hexadecimal). document.alinkcolor is deprecated in dom level 2 html. one alternative is the css selector :
active. another alternative is document.body.alink, although this is deprecated in html 4.01 in favor of the css alternative. gecko supports both alinkcolor/:
active and :focus. internet explorer 6 and 7 support alinkcolor/:
active only for html anchor (<a>) links and the behavior is the same as :focus under gecko. there is no support for :focus in ie. ...
Document.querySelectorAll() - Web APIs
if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array not...
...ments in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-
active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-
active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselector...
Element.part - Web APIs
), returned as a domtokenlist. these can be used to style parts of a shadow dom, via the ::part pseudo-element. syntax let elementpartlist = element.part examples the following excerpt is from our shadow-part example. ...
...t identifiers of each tab so the correct styling is applied to the
active tab when tabs are clicked. let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab
active'; }) console.log(tab.part); }) specifications specification status comment shadow partsthe definition of 'element.part' in that specification. working draft ...
Element.querySelectorAll() - Web APIs
if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array ...
... the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-
active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-
active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array. if the array is empty (that is, its length property is 0), then no matches were found. otherwise, you can simply use standard array notation to access the contents of the list. you can use any common looping statement, such as: var highlighteditems = userlist.queryselector...
ExtendableMessageEvent - Web APIs
ad only returns a reference to the client object that sent the message. extendablemessageevent.ports read only returns the array containing the messageport objects representing the ports of the associated message channel. methods inherits methods from its parent, extendableevent. examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.
active, and then calls its postmessage() function. // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration...
...stmessage() function. ...
Fullscreen API - Web APIs
d, by extension, its descendants) into full-screen mode, removing all of the browser's ui elements as well as all other applications from the screen. returns a promise which is resolved once full-screen mode has been activated. properties the document interface provides properties that can be used to determine if full-screen mode is supported and available, and if full-screen mode is currently
active, which element is using the screen. documentorshadowroot.fullscreenelement the fullscreenelement property tells you the element that's currently being displayed in full-screen mode on the dom (or shadow dom). if this is null, the document is not in full-screen mode. document.fullscreenenabled the fullscreenenabled property tells you whether or not it is possible to engage full-screen mode. ...
...f this (mozfullscreenelement, msfullscreenelement, or webkitfullscreenelement, for example). if the value is null, the document is currently in windowed mode, so we need to switch to full-screen mode; otherwise, it's the element that's currently in full-screen mode. switching to full-screen mode is done by calling element.requestfullscreen() on the <video> element. if full-screen mode is already
active (fullscreenelement is not null), we call exitfullscreen() on the document to shut off full-screen mode. specifications specification status fullscreen api living standard browser compatibility document.fullscreen the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.c...
Using the Gamepad API - Web APIs
technologies like <canvas>, webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code. the gamepad api is a way for developers and designers to access and use gamepads and other game controllers. the gamepad api introduces new events on the window object for reading gamepad and controller (hereby referred to as gamepad) state. ...
...object, which returns a gamepad object. we can use this in order to determine which gamepad (i.e., its id) had caused the event, since multiple gamepads might be connected at once. we can do much more with the gamepad object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. doing so is often desirable for games or other inter
active web pages that need to know the state of a gamepad now vs. the next time an event fires. performing such checks tends to involve using the gamepad object in conjunction with an animation loop (e.g., requestanimationframe), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads. the navigator.getgamepads() method returns an array of all device...
HTMLElement - Web APIs
rcapture fired when an element captures a pointer using setpointercapture(). also available via the ongotpointercapture property. lostpointercapture fired when a captured pointer is released. also available via the onlostpointercapture property. pointercancel fired when a pointer event is canceled. also available via the onpointercancel property. pointerdown fired when a pointer becomes
active. also available via the onpointerdown property. pointerenter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants. also available via the onpointerenter property. pointerleave fired when a pointer is moved out of the hit test boundaries of an element. also available via the onpointerleave property. pointermove fired when a pointer changes coo...
...ges coordinates. also available via the onpointermove property. pointerout fired when a pointer is moved out of the hit test boundaries of an element (among other reasons). also available via the onpointerout property. pointerover fired when a pointer is moved into an element's hit test boundaries. also available via the onpointerover property. pointerup fired when a pointer is no longer
active. also available via the onpointerup property. transition events transitioncancel fired when a css transition is canceled. also available via the ontransitioncancel property. transitionend fired when a css transition has completed. also available via the ontransitionend property. transitionrun fired when a css transition is first created. also available via the ontransitionrun proper...
HTMLImageElement.useMap - Web APIs
specifications specification status commen...
...25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including inter
active ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps. example the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. specifications specification status comment html living standardthe definition of 'htmlimageelement.usemap' in that specification. living standard browser compati...
HTMLTrackElement: cuechange event - Web APIs
exttrack and at the htmltrackelement in which it's being presented, if any. bubbles no cancelable no interface event event handler oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.
activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.
activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. this happens even if the track isn't associated w...
... this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement. let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.
activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.
activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification. living standard ...
IDBDatabaseException - Web APIs
an object. unless the cause of the error is corrected, retrying the same operation would result in failure. not_allowed_err 6 an operation was called on an object where it is not allowed or at a time when it is not allowed. it also occurs if a request is made on a source object that has been deleted or removed. more specific variants of this error includes: transaction_in
active_err and read_only_err. not_found_err 3 the operation failed because the requested database object could not be found; for example, an object store did not exist but was being opened. quota_err 11 either there's not enough remaining storage space or the storage quota was reached and the user declined to give more space to the database. read_only_err 9 ...
...eing opened. quota_err 11 either there's not enough remaining storage space or the storage quota was reached and the user declined to give more space to the database. read_only_err 9 a mutation operation was attempted in a read_only transaction. timeout_err 10 a lock for the transaction could not be obtained in a reasonable time. transaction_in
active_err 7 a request was made against a transaction that is either not currently
active or is already finished. unknown_err 1 the operation failed for reasons unrelated to the database itself, and it is not covered by any other error code--for example, a failure due to disk io errors. ver_err 12 a request to open a database with a version lower than the one it alrea...
Basic concepts - Web APIs
ction an operation created by opening a database. a given database can have multiple connections at the same time. transaction an atomic set of data-access and data-modification operations on a particular database. it is how you interact with the data in a database. in fact, any reading or changing of data in the database must happen in a transaction. a database connection can have several
active transactions associated with it at a time, so long as the writing transactions do not have overlapping scopes. the scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. so, for example, if a database connection already has a writing transaction with a scope that just covers th...
...l of them — even overlapping ones. transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. you can abort the transaction, which rolls back the changes made to the database in the transaction. and you don't even have to wait for the transaction to start or be
active to abort it. the three modes of transactions are: readwrite, readonly, and versionchange. the only way to create and delete object stores and indexes is by using a versionchange transaction. to learn more about transaction types, see the reference article for indexeddb. because everything happens within a transaction, it is a very important concept in indexeddb. to learn more about transactio...
LockedFile - Web APIs
patibilities between implementations and the behavior may change in the future. summary the lockedfile interface provides tools to deal with a given file with all the necessary locks. properties lockedfile.filehandle read only the filehandle object from which the lock was opened. lockedfile.mode read only the mode for accessing the file; can be readonly or readwrite. lockedfile.
active read only a flag indicating if the file can be accessed (true) or not (false). lockedfile.location the position of the reading/writing pointer within the file. events handler lockedfile.oncomplete the complete event is triggered each time a read or write operation is successful. lockedfile.onabort the abort event is triggered each time the abort() method is called. lockedfile.onerror...
...ile starting at the location offset. returns a filerequest object. lockedfile.append() allows to write some data at the end of the file. returns a filerequest object. lockedfile.truncate() allows to truncate the file's content. returns a filerequest object. lockedfile.flush() allows to guarantee that any buffered data has been transferred to disk. lockedfile.abort() makes the lockedfile in
active and cancels all ongoing operations. specifications specification status comment filesystem api editor's draft draft proposal. ...
MediaDeviceInfo - Web APIs
al device — for example a monitor with both a built-in camera and a microphone. mediadeviceinfo.kindread only returns an enumerated value that is either "videoinput", "audioinput" or "audiooutput". mediadeviceinfo.labelread only returns a domstring that is a label describing this device (for example "external usb webcam"). for security reasons, the label field is always blank unless an
active media stream exists or the user has granted persistent permission for media device access. the set of device labels could otherwise be used as part of a fingerprinting mechanism to identify a user. methods none. example here's an example that uses enumeratedevices() to get a list of devices. if (!navigator.mediadevices || !navigator.mediadevices.enumeratedevices) { console.log("enumerated...
...nd + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more media streams are
active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status comment media capture and ...
MediaDevices.getUserMedia() - Web APIs
user must specifically grant ongoing permission if they choose to do so. of equal importance are the rules around notification. browsers are required to display an indicator that shows that a camera or microphone is in use, above and beyond any hardware indicator that may exist. they must also show an indicator that permission has been granted to use a device for input, even if the device is not
actively recording at the moment. for example in firefox, the url bar displays a pulsing red icon to indicate that recording is underway. the icon is gray if the permission is in place but recording is not currently underway. the device's physical light is used to indicate whether or not recording is currently
active. if you've muted your camera (so-called "facemuting"), your camera's activity light go...
...n firefox, the url bar displays a pulsing red icon to indicate that recording is underway. the icon is gray if the permission is in place but recording is not currently underway. the device's physical light is used to indicate whether or not recording is currently
active. if you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not
actively recording you, without discarding the permission to resume using the camera once muting is over. security there are a number of ways security management and controls in a user agent can cause getusermedia() to return a security-related error. note: the security model for getusermedia() is still somewhat in flux. the originally-designed security mechanism is in the process of being replaced ...
MediaRecorder.onerror - Web APIs
andlerfunction; value a function to be called whenever an error occurs during the recorder's lifetime. in addition to other general errors that might occur, the following errors are specifically possible when using the mediastream recording api; to determine which occurred, check the value of mediarecordererrorevent.error.name. invalidstateerror an attempt was made to stop or pause or an in
active recorder, start or resume an
active recorder, or otherwise manipulate the mediarecorder while in the wrong state. this exception can also occur when a request is made on a source that has been deleted or removed. securityerror the mediastream is configured to disallow recording. this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use ...
...he source stream. notsupportederror an attempt was made to instantiate a mediarecorder using a mime type that isn't supported on the user's device; one or more of the requested container, codecs, or profiles as well as other information may be invalid. unknownerror an non-security related error occurred that cannot otherwise be categorized. recording stops, the mediarecorder's state becomes in
active, one last dataavailable event is sent to the mediarecorder with the remaining received data, and finally a stop event is sent. these errors may occur either directly because of a call to a mediarecorder method, or indirectly due to a problem arising during the recording process. example this example creates a new mediarecorder instance and starts recording using the user agent's default media...
MediaRecorder.resume() - Web APIs
the mediarecorder.resume() method (part of the mediarecorder api) is used to resume media recording when it has been previously paused. when the resume() method is invoked, the browser queues a task that runs the following steps: if mediarecorder.state is "in
active", raise a dom invalidstate error and terminate these steps. if mediarecorder.state is not "in
active", continue to the next step. set mediarecorder.state to "recording". continue gathering data into the current blob. raise a resume event. ...
... example ... ...
MediaStream - Web APIs
nality, like in canvascapturemediastream. constructor mediastream() creates and returns a new mediastream object. you can create an empty stream, a stream which is based upon an existing stream, or a stream that contains a specified list of tracks (specified as an array of mediastreamtrack objects). properties this interface inherits properties from its parent, eventtarget. mediastream.
active read only a boolean value that returns true if the mediastream is
active, or false otherwise. mediastream.ended read only a boolean value set to true if the end of the stream has been reached. this has been removed from the specification; you should instead check the value of mediastreamtrack.readystate to see if its value is ended for the track or tracks you want to ensure have finished p...
... to another. mediastream.removetrack() removes the mediastreamtrack given as argument. if the track is not part of the mediastream object, nothing happens. events addtrack fired when a new mediastreamtrack object is added. also available via the onaddtrack property. removetrack fired when a mediastreamtrack object has been removed. also available via the onremovetrack property.
active fired when the mediastream is activated. in
active fired when the mediastream is inactivated. specifications specification status comment media capture and streamsthe definition of 'mediastream' in that specification. candidate recommendation ...
Capabilities, constraints, and settings - Web APIs
r("click", function() { startvideo(); }, false); applying constraint set updates next, we set up an event listener for the "apply constraints" button. if it's clicked and there's not already media in use, we call startvideo(), and let that function handle starting the stream with the specified settings in place. otherwise, we follow these steps to apply the updated constraints to the already-
active stream: buildconstraints() is called to construct updated mediatrackconstraints objects for the audio track (audioconstraints) and the video track (videoconstraints). mediastreamtrack.applyconstraints() is called on the video track (if there is one) to apply the new videoconstraints. if this succeeds, the contents of the video track's current settings box are updated based on the result of ca...
..., 2); }).catch(handleerror); } } }, false); handling the stop button then we set up the handler for the stop button. document.getelementbyid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the
active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting htmlmediaelement.srcobject to null. simple tab support in the editor this code adds simple support for tabs to the <textarea> elements by making the tab key insert two space characters when either constraint edit box is focused. function keydownhandle...
MouseEvent.getModifierState() - Web APIs
the value must be one of the keyboardevent.key values which represent modifier keys or "accel". this is case-sensitive. ...
...the value must be one of the keyboardevent.key values which represent modifier keys or "accel". this is case-sensitive. ...
Page Visibility API - Web APIs
e isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this. for example, watching for blur and focus events on the window helps you know when your page is not the
active page, but it does not tell you that your page is actually hidden to the user. the page visibility api addresses this. note: while onblur and onfocus will tell you if the user switches windows, it doesn't necessarily mean it's hidden. pages only become hidden when the user switches tabs or minimizes the browser window containing the tab. policies in place to aid background page performance se...
...ance 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. these may include: most browsers stop sending requestanimationframe() callbacks to background tabs or hidden <iframe>s in order to improve performance and battery life. timers such as settimeout() are throttled in background/in
active tabs to help improve performance. see reasons for delays longer than specified for more details. budget-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage. this operates in a similar way across modern browsers, with the details being as follows: in firefox, windows in background tabs e...
ParentNode.querySelectorAll() - Web APIs
html consider this html, with its three nested <div> blocks. <div class="outer"> <div class="select"> <div cla...
... html consider this html, with its three nested <div> blocks. <div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div> javascript var select = document.queryselector('.select'); var inner = select.queryselectorall('.o...
PaymentRequest.show() - Web APIs
method has been called, any other call to show() will by rejected with an aborterror until the returned promise has been concluded, either by being fulfilled with a paymentresponse indicating the results of the payment request, or by being rejected with an error. note: in reality, despite the fact that the specification says this can't be done, some browsers, including firefox, support multiple
active payment requests at a time. if your architecture doesn't necessarily have all of the data ready to go at the moment it instantiates the payment interface by calling show(), specify the detailspromise parameter, providing a promise that is fulfilled once the data is ready. if this is provided, show() will not allow the user to interact with the payment interface until the promise is fulfilled, s...
...h an aborterror if the user agent is already showing a payment panel. only one payment panel may be visible at a time across all documents loaded by the user agent. the promise is also rejected with aborterror if the user cancels the payment request. invalidstateerror the promise rejects with an invalidstateerror if the same payment has already been shown for this request (its state is inter
active because it is being shown already). notsupportederror the promise rejects with a notsupportederror if the user agent does not support the payment methods specified when the paymentrequest constructor was called. securityerror the promise rejects with a securityerror if the call to show() was not in response to a user action, such as a click or keyup event. other reasons a securityerror may be...
PointerEvent.isPrimary - Web APIs
of the pointerevent interface indicates whether or not the pointer device that created the event is the primary pointer. it returns true if the pointer that caused the event to be fired is the primary device and returns false otherwise. in a multi-pointer scenario (such as a touch screen that supports more than one touch point), this property is used to identify a master pointer among the set of
active pointers for each pointer type. only a primary pointer will produce compatibility mouse events. authors who desire only single-pointer interaction can achieve that by ignoring non-primary pointers. a pointer is considered primary if the pointer represents a mouse device. a pointer representing pen input is considered the primary pen input if its pointerdown event was dispatched when no other act...
...ring non-primary pointers. a pointer is considered primary if the pointer represents a mouse device. a pointer representing pen input is considered the primary pen input if its pointerdown event was dispatched when no other
active pointers representing pen input existed. a pointer representing touch input is considered the primary touch input if its pointerdown event was dispatched when no other
active pointers representing touch input existed. when two or more pointer device types are being used concurrently, multiple pointers (one for each pointertype) are considered primary. for example, a touch contact and a mouse cursor moved simultaneously will produce pointers that are both considered primary. if there are multiple primary pointers, these pointers will all produce compatibility mouse ev...
PointerEvent - Web APIs
test boundaries. pointerenter this event is fired when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown). this event type is similar to pointerover, but differs in that it does not bubble. pointerdown the event is fired when a pointer becomes
active. for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. for touch, it is fired when physical contact is made with the digitizer. for pen, it is fired when the stylus makes physical contact with the digitizer. pointermove this event is fired when a pointer changes coordinates. pointerrawupdate this event is fired when any of a pointer's...
...o at least one button depressed. for touch, it is fired when physical contact is made with the digitizer. for pen, it is fired when the stylus makes physical contact with the digitizer. pointermove this event is fired when a pointer changes coordinates. pointerrawupdate this event is fired when any of a pointer's properties change. pointerup this event is fired when a pointer is no longer
active. pointercancel a browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is de
actived). pointerout this event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the p...
Push API - Web APIs
g in better engagement with timely new content. push concepts and usage when implementing pushmanager subscriptions, it is vitally important that you protect against csrf/xsrf issues in your app. see the following articles for more information: cross-site request forgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an
active service worker. when the service worker is
active, it can subscribe to push notifications, using pushmanager.subscribe(). the resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data. the service worker will be started as necessary to handle incoming push messages, which are delivered to...
...e worker additions the following additions to the service worker api have been specified in the push api spec to provide an entry point for using push messages. they also monitor and respond to push and subscription change events. serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an
active subscription, and accessing push permission status. this is the entry point into using push messaging. serviceworkerglobalscope.onpush an event handler fired whenever a push event occurs; that is, whenever a server push message is received. serviceworkerglobalscope.onpushsubscriptionchange an event handler fired whenever a pushsubscriptionchange event occurs; for example, when a push subscrip...
RTCDTMFSender.insertDTMF() - Web APIs
calling insertdtmf() will append the specified tones to the end of the current tone buffer, so that those tones play after the previously-enqueued tones. ...
...e default is 100 ms. intertonegap optional the length of time, in milliseconds, to wait between tones. the browser will enforce a minimum value of 30 ms (that is, if you specify a lower value, 30 ms will be used instead); the default is 70 ms. return value undefined exceptions invalidstateerror the dtmf tones couldn't be sent because the track has been stopped, or is in a read-only or in
active state. invalidcharactererror one or more of the characters in tones is not valid dtmf. example tbd specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmfsender.insertdtmf()' in that specification. candidate recommendation ...
RTCIceCandidatePairStats - Web APIs
lean value which is true if the candidate pair described by this object is the one currently in use. the spec-compliant way to determine the selected candidate pair is to look for a stats object of type transport, which is an rtctransportstats object. that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used. ...
...port, which is an rtctransportstats object. that object's selectedcandidatepairid property indicates whether or not the specified transport is the one being used. usage notes the currently-
active ice candidate pair—if any—can be obtained by calling the rtcicetransport method getselectedcandidatepair(), which returns an rtcicecandidatepair object, or null if there isn't a pair selected. the
active candidate pair describes the current configuration of the two ends of the rtcpeerconnection. any candidate pair that isn't the
active pair of candidates for a transport gets deleted if the rtcicetransport performs an ice restart, at which point the state of the ice transport returns to new and negotiation starts once again. for more information, see ice restart in lifetime of a webrtc session. ...
Selection - Web APIs
i specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>). however, browsers other than gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range. selection and input focus selection and input focus (indicated by document.
activeelement) have a complex relationship that varies by browser. in cross-browser compatible code, it's better to handle them separately. safari and chrome (unlike firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see w3c bug 14383 and webkit bug 38696). behavior of selection api in terms of edit...
... enabled). focus of a selection the focus of a selection is the end point of the selection. when making a selection with a mouse, the focus is where in the document the mouse button is released. as the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves. this is not the same as the focused element of the document, as returned by document.
activeelement. range a range is a contiguous part of a document. a range can contain entire nodes as well as portions of nodes (such as a portion of a text node). a user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the control key). a range can be retrieved from a selection as a range object. range objects can also be crea...
Sensor - Web APIs
is not something that would ever be shown to a user. see feature-policy for implementation instructions. interfaces based on sensor below is a list of interfaces based on the sensor interface. accelerometer ambientlightsensor gyroscope linearaccelerationsensor magnetometer orientationsensor properties sensor.activated read only returns a boolean indicating whether the sensor is
active. sensor.hasreading read only returns a boolean indicating whether the sensor has a reading. sensor.timestamp read only returns the time stamp of the latest sensor reading. event handlers sensor.onerror called when an error occurs on one of the child interfaces of the sensor interface. sensor.onreading called when a reading is taken on one of the child interfaces of the sensor interf...
...ensor has a reading. sensor.timestamp read only returns the time stamp of the latest sensor reading. event handlers sensor.onerror called when an error occurs on one of the child interfaces of the sensor interface. sensor.onreading called when a reading is taken on one of the child interfaces of the sensor interface. sensor.onactivate called when one of the sensor interface's becomes
active. methods sensor.start() activates one of the sensors based on sensor. sensor.stop() deactivates one of the sensors based on sensor. specifications specification status comment generic sensor apithe definition of 'sensor' in that specification. candidate recommendation initial definition. ...
ServiceWorker.onstatechange - Web APIs
o). the code listens for any change in the serviceworker.state and returns its value. var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.
active) { serviceworker = registration.
active; document.queryselector('#kind').textcontent = '
active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed. for example: navigator.serviceworker.register(..).then(fun...
...worker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } note that when statechange fires, the service worker's references may have changed. for example: navigator.serviceworker.register(..).then(function(swr) { swr.installing.state == "installing" swr.installing.onstatechange = function() { swr.installing == null; // at this point, swr.waiting or swr.
active might be true. this is because the statechange // event gets queued, meanwhile the underlying worker may have gone into the waiting // state and will be immediately activated if possible. } }) specifications specification status comment service workersthe definition of 'serviceworker.onstatechange' in that specification. working draft initial definition ...
ServiceWorker - Web APIs
the serviceworker interface of the serviceworker api provides a reference to a service worker. multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique serviceworker object. a serviceworker object is available in the serviceworkerregistration.
active property, and the serviceworkercontainer.controller property — this is a service worker that has been activated and is controlling the page (the service worker has been successfully registered, and the controlled page has been reloaded.) the serviceworker interface is dispatched a set of lifecycle events — install and activate — and functional events including fetch. a serviceworker object has an associated serviceworker.state, related to its lifecycle. properties the se...
...egistration) { var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.
active) { serviceworker = registration.
active; document.queryselector('#kind').textcontent = '
active'; } if (serviceworker) { // logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function (e) { // logstate(e.target.state); }); } }).catch (function (error) { // someth...
ServiceWorkerContainer.controller - Web APIs
syntax var mycontroller = navigator.serviceworker.controller; value a serviceworker object. example if ('serviceworker' in navigator) { // do a one-off check to see if a service worker's in control. ...
... syntax var mycontroller = navigator.serviceworker.controller; value a serviceworker object. example if ('serviceworker' in navigator) { // do a one-off check to see if a service worker's in control. ...
ServiceWorkerContainer.ready - Web APIs
the ready read-only property of the serviceworkercontainer interface provides a way of delaying code execution until a service worker is
active. it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistration associated with the current page has an
active worker. once that condition is met, it resolves with the serviceworkerregistration. syntax navigator.serviceworker.ready.then(function(serviceworkerregistration) { ... }); value a promise that will never reject, and which may eventually resolve with a serviceworkerregistration. ...
...met, it resolves with the serviceworkerregistration. syntax navigator.serviceworker.ready.then(function(serviceworkerregistration) { ... }); value a promise that will never reject, and which may eventually resolve with a serviceworkerregistration. example if ('serviceworker' in navigator) { navigator.serviceworker.ready .then(function(registration) { console.log('a service worker is
active:', registration.
active); // at this point, you can call methods that require an
active // service worker, like registration.pushmanager.subscribe() }); } else { console.log('service workers are not supported.'); } specifications specification status comment service workersthe definition of 'serviceworkerregistration.ready' in that specification. working ...
ServiceWorkerGlobalScope: message event - Web APIs
service workers. the service worker can optionally send a response back via the client.postmessage(), corresponding to the controlled page. bubbles no cancelable no interface extendablemessageevent event handler property onmessage examples in the below example a page gets a handle to the serviceworker object via serviceworkerregistration.
active, and then calls its postmessage() function. // in the page being controlled if (navigator.serviceworker) { navigator.serviceworker.register('service-worker.js'); navigator.serviceworker.addeventlistener('message', event => { // event is a messageevent object console.log(`the service worker sent me a message: ${event.data}`); }); navigator.serviceworker.ready.then( registration...
...stmessage() function. ...
ServiceWorkerRegistration.showNotification() - Web APIs
note: this feature is available in web workers. syntax serviceworkerregistration.shownotification(title, [options]); parameters title the title that must be shown within the notification options optional an object that allows configuring the notification. it can have the following properties: actions: an array of actions to display in the notification. the members of the array should be an object literal. it may contain the following values: action: a domstring identifying a user action to be displayed on the notification. ...
...tion. this string must be a valid bcp 47 language tag. renotify: a boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. if options’s renotify is true and options’s tag is the empty string a typeerror will be thrown. the default is false. requireinteraction: indicates that on devices with sufficiently large screens, a notification should remain
active until the user clicks or dismisses it. if this value is absent or false, the desktop version of chrome will auto-minimize notifications after approximately twenty seconds. the default value is false. silent: when set indicates that no sounds or vibrations should be made. if options’s silent is true and options’s vibrate is present a typeerror exception will be thrown. the default value is f...
ServiceWorkerState - Web APIs
workerstate is associated with its serviceworker's state. values installing the service worker in this state is considered an installing worker. during this state, extendableevent.waituntil() can be called inside the install event handler to extend the life of the installing worker until the passed promise resolves successfully. this is primarily used to ensure that the service worker is not
active until all of the core caches are populated. installed the service worker in this state is considered a waiting worker. activating the service worker in this state is considered an
active worker. during this state, extendableevent.waituntil() can be called inside the onactivate event handler to extend the life of the
active worker until the passed promise resolves successfully. no functional e...
... redundant a new service worker is replacing the current service worker, or the current service worker is being discarded due to an install failure. ...
Streams API concepts - Web APIs
tion you want to do on it. the reader plus the other processing code that goes along with it is called a consumer. there is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished). only one reader can read a stream at a time; when a reader is created and starts reading a stream (an
active reader), we say it is locked to it. if you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the teeing section below) note that there are two different types of readable stream. as well as the conventional readable stream there is a type called a byte stream — this is an extended versi...
...nk — a lower-level i/o sink into which raw data is written. the data is written to the stream via a writer, one chunk at a time. a chunk can take a multitude of forms, just like the chunks in a reader. you can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer. when a writer is created and starts writing to a stream (an
active writer), it is said to be locked to it. only one writer can write to a writable stream at one time. if you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it. an internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink. there is also a construct you...
TextTrack: cuechange event - Web APIs
kelement in which it's being presented, if any. bubbles no cancelable no interface event event handler property globaleventhandlers.oncuechange examples on the texttrack you can set up a listener for the cuechange event on a texttrack using the addeventlistener() method: track.addeventlistener('cuechange', function () { let cues = track.
activecues; // array of current cues }); or you can just set the oncuechange event handler property: track.oncuechange = function () { let cues = track.
activecues; // array of current cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. this happens even if the track isn't associated w...
... this happens even if the track isn't associated with a media element. if the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the htmltrackelement. let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.
activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.
activecues; }); specifications specification status html living standardthe definition of 'cuechange' in that specification. living standard ...
Using Touch Events - Web APIs
of several modifier keys (for example the shift key) and the following touch lists: touches - a list of all of the touch points currently on the screen. targettouches - a list of the touch points on the target dom element. changedtouches - a list of the touch points whose items depends on the associated event type: for the touchstart event, it is a list of the touch points that became
active with the current event. for the touchmove event, it is a list of the touch points that have changed since the last event. for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). together, these interfaces define a relatively low-level set of features, y...
...touch point in an application-specific manner. if an application supports two-finger swipe for any two touch points, it will use the changedtouches list in the touchmove event handler to determine if two touch points had moved and then implement the semantics of that gesture in an application-specific manner. browsers typically dispatch emulated mouse and click events when there is only a single
active touch point. multi-touch interactions involving two or more
active touch points will usually only generate touch events. to prevent the emulated mouse events from being sent, use the preventdefault() method in the touch event handlers. for more information about the interaction between mouse and touch events, see supporting both touchevent and mouseevent. basic steps this section contains a bas...
VideoTrackList - Web APIs
the currently selected track, if any, or −1 otherwise. event handlers onaddtrack an event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the media element. onchange an event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made
active or in
active. onremovetrack an event handler to call when the removetrack event is sent, indicating that a video track has been removed from the media element. methods this interface also inherits methods from its parent interface, eventtarget. gettrackbyid() returns the videotrack found within the videotracklist whose id matches the specified string. if no match is found, null is returne...
...ace also inherits methods from its parent interface, eventtarget. gettrackbyid() returns the videotrack found within the videotracklist whose id matches the specified string. if no match is found, null is returned. events addtrack fired when a new video track has been added to the media element. also available via the onaddtrack property. change fired when a video track has been made
active or in
active. also available via the onchange property. removetrack fired when a new video track has been removed from the media element. also available via the onremovetrack property. usage notes in addition to being able to obtain direct access to the video tracks present on a media element, videotracklist lets you set event handlers on the addtrack and removetrack events, so that you can...
WebGLRenderingContext.getParameter() - Web APIs
a value for the passed parameter name. syntax any gl.getparameter(pname); parameters pname a glenum specifying which parameter value to return. see below for possible values. return value depends on the parameter. parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext. ...
...lt framebuffer. see also bindframebuffer. gl.sample_alpha_to_coverage glboolean gl.sample_coverage glboolean gl.sampler_binding webglsampler or null see bindsampler. gl.texture_binding_2d_array webgltexture or null see bindtexture. gl.texture_binding_3d webgltexture or null see bindtexture. gl.transform_feedback_
active glboolean gl.transform_feedback_binding webgltransformfeedback or null see bindtransformfeedback. gl.transform_feedback_buffer_binding webglbuffer or null see bindbuffer. gl.transform_feedback_paused glboolean gl.uniform_buffer_binding webglbuffer or null see bindbuffer. gl.uniform_buffer_offset_alignment glint see...
WebGLRenderingContext - Web APIs
the user's xr hardware, re-creating the context if necessary with a new configuration to do so. this can be used to start an application using standard 2d presentation, then transition to using a vr or ar mode later. viewing and clipping webglrenderingcontext.scissor() defines the scissor box. webglrenderingcontext.viewport() sets the viewport. state information webglrenderingcontext.
activetexture() selects the
active texture unit. webglrenderingcontext.blendcolor() sets the source and destination blending factors. webglrenderingcontext.blendequation() sets both the rgb blend equation and alpha blend equation to a single equation. webglrenderingcontext.blendequationseparate() sets the rgb blend equation and alpha blend equation separately. webglrenderingcontext.blendfunc() ...
...ses the specified webglprogram as part the current rendering state. webglrenderingcontext.validateprogram() validates a webglprogram. uniforms and attributes webglrenderingcontext.disablevertexattribarray() disables a vertex attribute array at a given position. webglrenderingcontext.enablevertexattribarray() enables a vertex attribute array at a given position. webglrenderingcontext.get
activeattrib() returns information about an
active attribute variable. webglrenderingcontext.get
activeuniform() returns information about an
active uniform variable. webglrenderingcontext.getattriblocation() returns the location of an attribute variable. webglrenderingcontext.getuniform() returns the value of a uniform variable at a given location. webglrenderingcontext.getuniformlocation() ret...
WebGL: 2D and 3D graphics for the web - Web APIs
webgl does so by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements. this conformance makes it possible for the api to take advantage of hardware graphics acceleration provided by the user's device. support for webgl is present in firefox 4+, google chrome 9+, opera 12+, safari 5.1+, internet explorer 11+, and microsoft edge build 10240+; however, the user's device must also have hardware that supports these features. ...
...0240+; however, the user's device must also have hardware that supports these features. the webgl 2 api introduces support for much of the opengl es 3.0 feature set; it's provided through the webgl2renderingcontext interface. the <canvas> element is also used by the canvas api to do 2d graphics on web pages. ...
Signaling and video calling - Web APIs
). sdp the sdp (session description protocol) string describing the local end of the connection from the perspective of the sender (or the remote end of the connection from the receiver's point of view). at this point, the two participants know which codecs and codec parameters are to be used for this call. they still don't know how to transmit the media data itself though. this is where inter
active connectivity establishment (ice) comes in. exchanging ice candidates two peers need to exchange ice candidates to negotiate the actual connection between them. every ice candidate describes a method that the sending peer is able to use to communicate. each peer sends candidates in the order they're discovered, and keeps sending candidates until it runs out of suggestions, even if media has alre...
...resolution, or to an alternative codec. this triggers a new exchange of candidates, after which a another media format and/or codec change may take place. you can learn more about the codecs which webrtc requires browsers to support, which additional codecs are supported by which browsers, and how to choose the best codecs to use in the guide codecs used by webrtc. optionally, see rfc 8445: inter
active connectivity establishment, section 2.3 ("negotiating candidate pairs and concluding ice") if you want greater understanding of how this process is completed inside the ice layer. you should note that candidates are exchanged and media starts to flow as soon as the ice layer is satisfied. this is all taken care of behind the scenes. our role is to simply send the candidates, back and forth, throu...
Inputs and input sources - Web APIs
the use of a joystick or motion-sensing controller to move a cursor. actions include both selection actions, such as clicking on a button, and squeeze actions, such as pulling a trigger or tightening your grip while wearing haptic gloves. by combining these two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an inter
active simulated environment. input device types webxr supports a variety of different types of devices to handle targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously perform both targeting and selection. motion-sensing controllers, which use accelerometers, magnetometers, an...
...nipulating it by delivering, in order, the events selectstart, select, and selectend. each of these events is of type xrinputsourceevent. note: if an input source doesn't have a primary action, the input source is considered to be an auxiliary input source. when the user points a device along a target ray in your 3d space and then triggers a select action, the following events are sent to the
active xrsession: a selectstart event, indicating that the user has performed the activity that begins the primary action. this may be a gesture, depressing a button, or the like. if the primary action ends successfully (for example, due to the user releasing the button or trigger), rather than because of an error, the select event is sent. after the select event is sent or if the controller on whi...
WebXR permissions and security - Web APIs
e xr-spatial-tracking feature policy. once that check is passed, the request to enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched web application. the document is considered trustworthy, in that it is responsible and is both currently
active and has focus. the user's intent to enter immersive vr mode is well understood; see user intent below for details. if all of that is true, the promise returned by requestsession() is resolved, and the new xrsession object is passed into the fulfillment handler. otherwise, an appropriate exception is thrown, such as securityerror if the document doesn't have permission to enter immersive mode. ...
...ion, the request is denied and false is delivered to the promise's fulfillment handler. if the document making the request isn't the one which is responsible for the script, the request is denied. if the document making the request isn't trustworthy, the request is denied and false is returned through the promise's fulfillment routine. a trustworthy document is one which is both responsible and
active, and which currently has focus. if the user's intent to open an inline xr presentation is not well understood, the request is denied. understanding of the user's intent may be either implicit or explicit. note: additional requirements may be put into effect due to the specific features requested by the options object when calling requestsession(). user intent user intent is the concept of ...
Web Animations API Concepts - Web APIs
to learn how to put the api to use, check out its sister article, using the web animations api. the web animations api fills the gap between declarative css animations and transitions, and dynamic javascript animations. 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 callbacks to create inter
active animations that adapt and react to changing inputs. history over a decade ago, synchronized multimedia integration language, or smil (pronounced "smile"), brought animation to svg. back then it was the only animation engine browsers had to worry about. while four out of five browsers supported smil, it only animated svg elements, could not be used from css, and was very complex — often leadin...
...ts working together. by assembling these disparate objects, we can create animations of our own. timeline timeline objects provide the useful property currenttime, which lets us see how long the page has been opened for: it's the "current time" of the document's timeline, which started when the page was opened. as of this writing, there’s only one kind of timeline object: the one based on the
active document’s timeline. in the future we may see timeline objects that correspond to the length of the page, perhaps a scrolltimeline, or other things entirely. animation animation objects can be imagined as dvd players: they’re used for controlling media playback, but without media to play, they don’t do anything. animation objects accept media in the form of animation effects, specifically...
Window.getComputedStyle() - Web APIs
individual css property values are accessed through apis provided by the object, or by indexing with css property names. syntax var style = window.getcomputedstyle(element [, pseudoelt]); element the element for which to get the computed style. pseudoeltoptional a string specifying the pseudo-element to match. omitted (or null) for real elements. ...
...e, ::marker, ::line-marker — see the pseudo-element spec). <style> h3::after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselector('h3'); var result = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains
active values for css property longhand names. for example, border-bottom-width instead of the border-width and border shorthand property names. it is safest to query values with only longhand names like font-size. shorthand names like font will not work with most browsers. css property values may be accessed using the getpropertyvalue(propname) api or by indexing directly into the object such as obj['...
Privileged features - Web APIs
titlebar. if set to no or 0, this feature removes the titlebar from the new secondary window. mozilla and firefox users can force new windows to always render the titlebar by setting dom.disable_window_open_feature.titlebar to true in about:config or in their user.js file. alwaysraised if on, the new window will always be displayed on top of other browser windows, regardless of whether it is
active or not. alwayslowered if on, the new created window floats below, under its own parent when the parent window is not minimized. alwayslowered windows are often referred as pop-under windows. the alwayslowered window can not be on top of the parent but the parent window can be minimized. in ns 6.x, the alwayslowered window has no minimize system command icon and no restore/maximize system comman...
...are often referred as pop-under windows. the alwayslowered window can not be on top of the parent but the parent window can be minimized. in ns 6.x, the alwayslowered window has no minimize system command icon and no restore/maximize system command. alwaysontop if on, the new window will always be displayed on top of all other windows (browser windows and otherwise), regardless of whether it is
active or not. this was added in firefox 66 (see bug 1519893). z-lock same as alwayslowered. close when set to no or 0, this feature removes the system close command icon and system close menu item. it will only work for dialog windows (dialog feature set). close=no will override minimizable=yes. mozilla and firefox users can force new windows to always have a close button by setting dom.disable_w...
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
note: the minimum delay, dom_min_timeout_value, is 4 ms (stored in a preference in firefox: dom.min_timeout_value), with a dom_clamp_timeout_nesting_level of 5. note: 4 ms is specified by the html5 spec and is consistent across browsers released in 2010 and onward. prior to (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the minimum timeout value for nested timeouts was 10 ms. timeouts in in
active tabs throttled to ≥ 1000ms to reduce the load (and associated battery usage) from background tabs, timeouts are throttled to firing no more often than once per second (1,000 ms) in in
active tabs. firefox implements this behavior since version 5 (see bug 633421, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). chrome implements this behavior since ve...
...1000ms constant can be tweaked through the dom.min_background_timeout_value preference). chrome implements this behavior since version 11 (crbug.com/66078). firefox for android uses a timeout value of 15 minutes for background tabs since bug 736602 in firefox 14, and background tabs can also be unloaded entirely. firefox 50 no longer throttles background tabs if a web audio api audiocontext is
actively playing sound. firefox 51 further amends this such that background tabs are no longer throttled if an audiocontext is present in the tab at all, even if no sound is being played. these resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background. throttling of tracking timeout scripts since firefox...
Using XMLHttpRequest in IE6 - Web APIs
xmlhttprequest was first introduced by microsoft in internet explorer 5.0 as an
activex control. however, in ie7 and other browsers xmlhttprequest is a native javascript object. ...
...sers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the
activex control var request = new
activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
XRSession.oninputsourceschange - Web APIs
the oninputsourcechange attribute of the xrsession object is the event handler for the inputsourcechange event, which is dispatched when session's list of
active xr input sources has changed. the list itself is accessible via xrsession.inputsources. note: the xrinputsource objects in xrsession.inputsources array are "live", so values within them are updated in-place. therefore if you wish to compare input states between frames, you should make a copy of the content of the state in question. syntax xrsession.oninputsourceschange = function(event) { ... ...
...te: the xrinputsource objects in xrsession.inputsources array are "live", so values within them are updated in-place. therefore if you wish to compare input states between frames, you should make a copy of the content of the state in question. syntax xrsession.oninputsourceschange = function(event) { ... } example xrsession.oninputsourceschange = function(event) { console.log("the list of
active xr input sources has changed.") } specifications specification status comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification. working draft initial definition. ...
XRSystem: requestSession() - Web APIs
syntax var sessionpromise = xr.requestsession(sessionmode, sessioninit) parameters sessionmode a domstring whose value is one of those included in the xrsessionmode enum. ...
...hat resolves with an xrsession object if the device and user agent support the requested mode and features. exceptions this method doesn't throw true exceptions; instead, it rejects the returned promise, passing into it a domexception whose name is one of the following: invalidstateerror the requested session mode is immersive-vr but there is already an immersive vr session either currently
active or in the process of being set up. there can only be one immersive vr session at a time. notsupportederror there is no webxr-compatible device available, or the device does not support the specified sessionmode; this can also be thrown if any of the required options are unsupported. securityerror permission to enter the specified xr mode is denied. this can happen for a number of reasons, w...
Using the alertdialog role - Accessibility
to be marked up as the alert dialog's accessible description (using aria-describedby). unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears. generally alert dialogs have at least a confirmation, close or cancel button that can be used to move focus to. additionally, alert dialogs can have other inter
active controls such as text fields, tabs or checkboxes. which particular control focus should be moved to depends on the purpose of the dialog. the tab order inside the alert dialog must wrap. the difference with regular dialogs is that the alertdialog role should only used when an alert, error, or warning occurs. in other words, when a dialog's information and controls require the user's immediate ...
...nly used when an alert, error, or warning occurs. in other words, when a dialog's information and controls require the user's immediate attention alertdialog should be used instead of dialog. it is up to the developer to make this distinction though. because of its urgent nature, alert dialogs must always be modal. note: this role should only be used for alert messages that have associated inter
active controls. if an alert dialog only contains static content and has no inter
active controls at all, alertdialog is likely not the right role to use here. the alert role should be used instead in that case (as the described in the using the alert role technique). possible effects on user agents and assistive technology when the alertdialog role is used, the user agent should do the following: ...
Using the aria-hidden attribute - Accessibility
description adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. this can improve the experience for assistive technology users by hiding: purely decorative content, such as icons or images duplicated content, such as repeated text offscreen or collapsed content, such as menus according to the fourth rule of aria, aria-hidden="true" should not be used on a focusable element. ...
... 1.1 notes that aria-hidden="false" currently behaves inconsistently across browsers. deciding between aria-hidden="true", role="presentation", and role="none" on the surface, the aria-hidden="true", role="presentation", and role="none" attributes seem similar because they: hide content from assistive technology cannot be used on a focusable element cannot be used on the parent of an inter
active element despite these similarities, the intent behind each attribute is different. aria-hidden="true" will remove the entire element from the accessibility api. role="presentation" and role="none" will remove the semantic meaning of an element while still exposing it to assistive technology. values false (default) the element is exposed to the accessibility api. true the elemen...
ARIA: cell role - Accessibility
required cell parent. rowgroup is an optional contextual row parent. it establishes a relationship between descendant rows. it is a structural equivalent to the thead, tfoot, and tbody elements in an html table element. role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row containing cells. ...
... role="treegrid" similar to a grid, but with rows that can be expanded and collapsed in the same manner as for a tree. subclass roles role="gridcell" a cell in a row within a grid or treegrid. ...
ARIA: Main role - Accessibility
ody> <!-- primary navigation --> <div role="main"> <h1>the the first indochina war</h1> <!-- article content --> </div> <!-- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document. ...
...- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document. if a document contains two main roles, say updating page content when triggered by javascript, the in
active main role's presence should be removed from assistive technology via techniques such as toggling the hidden attribute. <main> <h1>
active <code>main</code> element</h1> <!-- content --> </main <main hidden> <h1>hidden <code>main</code> element</h1> <!-- content --> </main> best practices prefer html using the <main> element will automatically communicate a section has a role of main. if at all possible, prefer using it instead. skip navigation skip navigation, also known as "skipnav", is a technique that allows an assi...
ARIA: checkbox role - Accessibility
elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. ...
..." id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript. similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. since a checkbox is an inter
active control, it must be focusable and keyboard accessible. if the role is applied to a non-focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for activating a checkbox is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the checkbox is activated. associated wai-aria roles, states, and properties ...
WAI-ARIA Roles - Accessibility
e can be used in combination with the aria-pressed attribute to create toggle buttons.aria: cell rolethe cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable inter
active controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to t...
...should be used on an element that wraps an element with an insertion role, and one with a deletion role.aria: switch rolethe aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."aria: tab rolethe aria tab role indicates an inter
active element inside a tablist that, when activated, displays its associated tabpanel.aria: table rolethe table value of the aria role attribute identifies the element containing the role as having a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element.aria: tabpanel rolethe aria tabpanel role indicatesaria: textbox rolethe textbox rol...
::part() - CSS: Cascading Style Sheets
css pseudo-element represents any element within a shadow tree that has a matching part attribute. ...
...e> <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 template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template...
forced-colors - CSS: Cascading Style Sheets
feature is used to detect if the user agent has enabled a forced colors mode where it enforces a user-chosen limited color palette on the page. note: this feature is not supported by any user agent and its specifics are subject to change. syntax the forced-colors media feature indicates whether or not the browser is currently in forced-colors mode. values none forced colors mode is not
active; the page’s colors are not being forced into a limited palette.
active indicates that forced colors mode is
active. the browser provides the color palette to authors through the css system color keywords and, if appropriate, it triggers the appropriate value of prefers-color-scheme so that authors can adapt the page. usage notes properties affected by forced-color mode in forced colors mo...
...the operating system in use. examples note: no browser currently implements this feature so the following example will not work. this example has an annoying color palette by default. this example does not take advantage of the colors provided by the user agent. 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. editor's draft initial definition. ...
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
ature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation. this will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight. syntax the -ms-high-contrast media feature is specified as one of the following values. values
active indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation. black-on-white indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation. white-on-black indicates that the subsequent styling rules will be applied when the syst...
... that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation. ...
Pseudo-classes - CSS: Cascading Style Sheets
the position of the mouse (like :hover, which lets you know if the mouse is over an element or not). note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. syntax selector:pseudo-class { property: value; } like regular classes, you can chain together as many pseudo-classes as you want in a selector. ...
... ...
background-clip - CSS: Cascading Style Sheets
if the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference. ...
... 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. ...
background-image - CSS: Cascading Style Sheets
the background images are drawn on stacking context layers on top of each other. the first layer specified is drawn as if it is closest to the user. the borders of the element are then drawn on top of them, and the background-color is drawn beneath them. ...
... the background images are drawn on stacking context layers on top of each other. the first layer specified is drawn as if it is closest to the user. the borders of the element are then drawn on top of them, and the background-color is drawn beneath them. ...
box-shadow - CSS: Cascading Style Sheets
the box-shadow css property adds shadow effects around an element's frame. you can set multiple effects separated by commas. a box shadow is described by x and y offsets relative to the element, blur and spread radius, and color. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generat...
...-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an inter
active tool allowing you to generate a box-shadow. syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-sh...
box-sizing - CSS: Cascading Style Sheets
by default in the css box model, the width and height you assign to an element is applied only to the element's content box. if the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. ...
... by default in the css box model, the width and height you assign to an element is applied only to the element's content box. if the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. ...
column-count - CSS: Cascading Style Sheets
syntax /* keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width. ...
... syntax /* keyword value */ column-count: auto; /* <integer> value */ column-count: 3; /* global values */ column-count: inherit; column-count: initial; column-count: unset; values auto the number of columns is determined by other css properties, such as column-width. ...
column-fill - CSS: Cascading Style Sheets
syntax /* keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the keyword values listed below. ...
... syntax /* keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the keyword values listed below. ...
opacity() - CSS: Cascading Style Sheets
note: this function is similar to the more established opacity property. the difference is that with filters, some browsers provide hardware acceleration for better performance. syntax opacity(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. ...
... note: this function is similar to the more established opacity property. the difference is that with filters, some browsers provide hardware acceleration for better performance. syntax opacity(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. ...
font-optical-sizing - CSS: Cascading Style Sheets
syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. ...
... syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. ...
font-synthesis - CSS: Cascading Style Sheets
syntax this property can take any one of the following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. ...
... syntax this property can take any one of the following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. ...
<gradient> - CSS: Cascading Style Sheets
a css gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element to which it applies. syntax the <gradient> data type is defined with one of the function types listed below. ...
... a css gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. its concrete size will match the size of the element to which it applies. syntax the <gradient> data type is defined with one of the function types listed below. ...
grid-auto-columns - CSS: Cascading Style Sheets
if a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
... if a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
grid-auto-rows - CSS: Cascading Style Sheets
if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
... if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
grid-template-areas - CSS: Cascading Style Sheets
those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area. ...
... those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area. ...
grid - CSS: Cascading Style Sheets
note: you can only specify the explicit or the implicit grid properties in a single grid declaration. the sub-properties you don’t specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
... note: you can only specify the explicit or the implicit grid properties in a single grid declaration. the sub-properties you don’t specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
list-style-type - CSS: Cascading Style Sheets
the color of the marker will be the same as the computed color of the element it applies to. only a few elements (<li> and <summary>) have a default value of display: list-item. however, the list-style-type property may be applied to any element whose display value is set to list-item. ...
... the color of the marker will be the same as the computed color of the element it applies to. only a few elements (<li> and <summary>) have a default value of display: list-item. however, the list-style-type property may be applied to any element whose display value is set to list-item. ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
e scroll-margin-inline-end property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-inline-end: 10px; scroll-margin-inline-end: 1em; /* global values */ scroll-margin-inline-end: inherit; scroll-margin-inline-end: initial; scroll-margin-inline-e...
...; scroll-margin-inline-end: initial; scroll-margin-inline-end: unset; values <length> an outset from the inline end edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the inter
active example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk ...
scroll-margin-inline-start - CSS: Cascading Style Sheets
roll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-inline-start: 10px; scroll-margin-inline-start: 1em; /* global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-...
...ll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <length> an outset from the inline start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> examples simple demonstration this example implements something very similar to the inter
active example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk t...
scroll-margin - CSS: Cascading Style Sheets
the scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10px; scroll-margin: 1em .5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge...
...ed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the inter
active example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk t...
top - CSS: Cascading Style Sheets
the effect of top depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. ...
... the effect of top depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. ...
scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a transformation that resizes an element along the z-axis. its result is a <transform-function> data type. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. ...
...ansformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalez(-1) defines an axial symmetry, with the z-axis passing through the origin (as specified by the transform-origin property). in the above inter
active examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: scalez(sz) is equivalent to to scale3d(1, 1, sz). syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element. ...
translate3d() - CSS: Cascading Style Sheets
this transformation is characterized by a three-dimensional vector. its coordinates define how much the element moves in each direction. syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector. ...
... this transformation is characterized by a three-dimensional vector. its coordinates define how much the element moves in each direction. syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector. ...
Demos of open web technologies
mozilla supports a wide variety of exciting open web technologies, and we encourage their use. this page offers links to interesting demonstrations of these technologies. if you know of a good demonstration or application of open web technology, please add a link to the appropriate section here. ...
...canvas blob sallad: an inter
active blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (inter
active) 3d objects demo (inter
active) blobular (inter
active) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie ...
Adding captions and subtitles to HTML5 video - Developer guides
var subtitlemenubuttons = []; var createmenuitem = function(id, lang, label) { var listitem = document.createelement('li'); var button = listitem.appendchild(document.createelement('button')); button.setattribute('id', id); button.classname = 'subtitles-button'; if (lang.length > 0) button.setattribute('lang', lang); button.value = label; button.setattribute('data-state', 'in
active'); button.appendchild(document.createtextnode(label)); button.addeventlistener('click', function(e) { // set all buttons to in
active subtitlemenubuttons.map(function(v, i, a) { subtitlemenubuttons[i].setattribute('data-state', 'in
active'); }); // find the language to activate var lang = this.getattribute('lang'); for (var i = 0; i < video.texttra...
...it also sets up the required event listeners on the button to ...
Rich-Text Editing in Mozilla - Developer guides
en switched to designmode, the document object exposes the document.execcommand method which allows one to run commands to manipulate the contents of the editable region. most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting). when using contenteditable, calling execcommand will affect the currently
active editable element. internet explorer differences one major difference between mozilla and internet explorer that affects designmode is the generated code in the editable document: while internet explorer uses html tags (em, i, etc), mozilla 1.3 will generate by default spans with inline style rules. the stylewithcss command can be used to toggle between css and html markup creation. figure 1 : ...
...vascript helper class, xbdesignmode, which is a wrapper for the designmode feature which hides the differences between ie and mozilla. event handling disabled a further difference for mozilla is that once a document is switched to designmode, all events on that particular document are disabled. once designmode is turned off however (as this now seems possible in mozilla 1.5) the events become
active again. more information can be found in the rich text editing section of migrate apps from internet explorer to mozilla. examples please note: the example files are still being migrated from another site. they are not available at this time. --fumble 18:13, 24 apr 2005 (pdt) example 1 the first example is an html document setting its own designmode to "on". this makes the entire document edi...
Using HTML sections and outlines - Developer guides
; </script> <![endif]--> as a last precaution, you could also add an explicit <noscript> element inside the <head> element to warn any users that have javascript disabled that your page relies on javascript: <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented computer programming language commonly used to create inter
active 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 fallback for the case where this latter browser is configured not to use scripting: <!--[if lt ie 9]> ...
...this isn't a really bad thing neccessarily — sites will often have a few validation errors — but it's something to be aware of still. conclusion the new semantic elements introduced in html5 bring the abi...
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the html <audio> element is used to embed sound content in documents. it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. it can also be the destination for streamed media, using a mediastream. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the above example shows simple usage of the <audio> element. in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whet...
...s format (webvtt) webaim: captions, transcripts, and audio descriptions mdn understanding wcag, guideline 1.2 explanations understanding success criterion 1.2.1 | w3c understanding wcag 2.0 understanding success criterion 1.2.2 | w3c understanding wcag 2.0 technical summary content categories flow content, phrasing content, embedded content. if it has a controls attribute: inter
active content and palpable content. permitted content if the element has a src attribute: zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements. else: zero or more <source> elements followed by zero or more <track> elements followed by transparent content that contains no <audio> or <video> media elements. tag omission ...
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
tag omission none, both the starting and ending tag are mandatory. ...
...nvas content is not exposed to accessibility tools as semantic html is. in general, you should avoid using canvas in an accessible website or app. the following guides can help to make it more accessible. mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html5 canvas accessibility in firefox 13 – by steve faulkner best practices for inter
active canvas elements specifications specification status comment html living standardthe definition of '<canvas>' in that specification. living standard html5the definition of '<canvas>' in that specification. recommendation initial definition ...
<details>: The Details disclosure element - HTML: Hypertext Markup Language
y or label can be provided using the <summary> element. a disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. if the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note: the common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties." a <details> widget can be in one of two states. ...
...nfortunately, at this time there's no built-in way to animate the transition between open and closed. fully standards-compliant implementations automatically apply the css display: list-item to the <summary> element. you can use this to customize its appearance further. see customizing the disclosure widget for further details. content categories flow content, sectioning root, inter
active content, palpable content. permitted content one <summary> element followed by flow content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role group permitted aria roles no role permitted dom interface htmldetailselement attrib...
<img>: The Image Embed element - HTML: Hypertext Markup Language
the above example shows usage of the <img> element: the src attribute is required, and contains the path to the image you want to embed. the alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. ...
...tion that's particularly important or valuable for the user, present it inline using one of the methods mentioned above instead of using title. using the html title attribute – updated | the paciello group technical summary content categories flow content, phrasing content, embedded content, palpable content. if the element has a usemap attribute, it also is a part of the inter
active content category. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts embedded content. implicit aria role with non-empty alt attribute or no alt attribute: img with empty alt attribute: no corresponding role permitte...
<input type="radio"> - HTML: Hypertext Markup Language
<input> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options. only one radio button in a given group can be selected at the same time. radio buttons are typically rendered as small circles, which are filled or highlighted when selected. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. they are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below. note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed...
...by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own...
<ruby> - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
... content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
<select>: The HTML Select element - HTML: Hypertext Markup Language
the above example shows typical <select> usage. it is given an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server. each menu option is defined by an <option> element nested inside the <select>. ...
... we've included <optgroup> elements to divide the options up into different groups. this is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented. the "hamster" option includes a disabled attribute and therefore can't be selected at all. technical summary content categories flow content, phrasing content, inter
active content, listed, labelable, resettable, and submittable form-associated element permitted content zero or more <option> or <optgroup> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role combobox with no multiple attribute and no size attribute gr...
<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 feedback form. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted. rows and cols attributes to allow you to specify an exact size for th...
...ote: in browsers other than firefox, such as chrome, the disabled textarea content may be selectable and copyable. <textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>i am a readonly textarea</textarea> technical summary content categories flow content, phrasing content, inter
active content, listed, labelable, resettable, and submittable form-associated element. permitted content text tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role textbox permitted aria roles no role permitted dom interface htmltextareaele...
dir - HTML: Hypertext Markup Language
it can have the following values: ltr, which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. ...
...haracter with a strong directionality, then applies that directionality to the whole element. usage notes: this attribute is mandatory for the <bdo> element where it has a different semantic meaning. this attribute is not inherited by the <bdi> element. if not set, its value is auto. this attribute can be overridden by the css properties direction and unicode-bidi, if a css page is
active and the element supports these properties. as the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related css properties when possible. that way, the text will display correctly even on a browser that doesn't support css or has the css deactivated. the auto value shou...
hidden - HTML: Hypertext Markup Language
the hidden global attribute is a boolean attribute indicating that the element is not yet, or is no longer, relevant. for example, it can be used to hide elements of the page that can't be used until the login process has been completed. browsers won't render elements with the hidden attribute set. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the hidden attribute must not be used to hide content just from one presentation. if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers. hidden elements shouldn't be linked from non-hidden elements, and elements that are ...
...elements and scripts may, however, refer to elements that are hidden in other contexts. for example, it would be incorrect to use the href attribute to link to a section marked with the hidden attribute. ...
spellcheck - HTML: Hypertext Markup Language
it may have the following values: true, which indicates that the element should be, if possible, checked for spelling errors; false, which indicates that the element should not be checked for spelling errors. note: the spellcheck attribute is an enumerated one and not a boolean one. ...
... it may have the following values: true, which indicates that the element should be, if possible, checked for spelling errors; false, which indicates that the element should not be checked for spelling errors. note: the spellcheck attribute is an enumerated one and not a boolean one. ...
HTTP Index - HTTP
tised in the content-type headers should not be changed and be followed. this allows to opt-out of mime type sniffing, or, in other words, it is a way to say that the webmasters knew what they were doing. 199 x-dns-prefetch-control dns, http, x-dns-prefetch-control, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers pro
actively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth. 200 x-forwarded-for http, http header, non-standard, reference, request header, header the x-forwarded-for (xff) header is a de-facto standard header for identifying the originating ip address ...
...response status code indicates that the request method is known by the server but is not supported by the target resource. 241 406 not acceptable http, reference, status code the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's pro
active content negotiation headers, and that the server is unwilling to supply a default representation. 242 407 proxy authentication required client error, http, reference, status code the http 407 proxy authentication required client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for a proxy server that...
Default parameters - JavaScript
syntax function [name]([param1[ = defaultvalue1 ][, ..., paramn[ = defaultvaluen ]]]) { statements } description in javascript, function parameters default to undefined. however, it's often useful to set a different default value. this is where default parameters can help. ...
... syntax function [name]([param1[ = defaultvalue1 ][, ..., paramn[ = defaultvaluen ]]]) { statements } description in javascript, function parameters default to undefined. however, it's often useful to set a different default value. this is where default parameters can help. ...
The arguments object - JavaScript
description note: if you're writing es6 compatible code, then rest parameters should be preferred. note: “array-like” means that arguments has a length property and properties indexed from zero, but it doesn't have array's built-in methods like foreach() or map(). ...
... description note: if you're writing es6 compatible code, then rest parameters should be preferred. note: “array-like” means that arguments has a length property and properties indexed from zero, but it doesn't have array's built-in methods like foreach() or map(). ...
getter - JavaScript
syntax {get prop() { ... } } {get [expression]() { ... } } parameters prop the name of the property to bind to the given function. expression starting with ecmascript 2015, you can also use expressions for a computed property name to bind to the given function. ...
... syntax {get prop() { ... } } {get [expression]() { ... } } parameters prop the name of the property to bind to the given function. expression starting with ecmascript 2015, you can also use expressions for a computed property name to bind to the given function. ...
Rest parameters - JavaScript
syntax function f(a, b, ...theargs) { // ... } description a function's last parameter can be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. only the last parameter can be a "rest parameter". ...
... syntax function f(a, b, ...theargs) { // ... } description a function's last parameter can be prefixed with ... which will cause all remaining (user supplied) arguments to be placed within a "standard" javascript array. only the last parameter can be a "rest parameter". ...
setter - JavaScript
syntax {set prop(val) { . . . }} {set [expression](val) { . . . }} parameters prop the name of the property to bind to the given function. val an alias for the variable that holds the value attempted to be assigned to prop. ...
... syntax {set prop(val) { . . . }} {set [expression](val) { . . . }} parameters prop the name of the property to bind to the given function. val an alias for the variable that holds the value attempted to be assigned to prop. ...
Array.prototype.flat() - JavaScript
syntax var newarray = arr.flat([depth]); parameters depth optional the depth level specifying how deep a nested array structure should be flattened. defaults to 1. return value a new array with the sub-array elements concatenated into it. ...
... syntax var newarray = arr.flat([depth]); parameters depth optional the depth level specifying how deep a nested array structure should be flattened. defaults to 1. return value a new array with the sub-array elements concatenated into it. ...
Array.prototype.includes() - JavaScript
syntax arr.includes(valuetofind[, fromindex]) parameters valuetofind the value to search for. note: when comparing strings and characters, includes() is case-sensitive. fromindex optional the position in this array at which to begin searching for valuetofind. ...
... syntax arr.includes(valuetofind[, fromindex]) parameters valuetofind the value to search for. note: when comparing strings and characters, includes() is case-sensitive. fromindex optional the position in this array at which to begin searching for valuetofind. ...
Array.prototype.indexOf() - JavaScript
syntax arr.indexof(searchelement[, fromindex]) parameters searchelement element to locate in the array. fromindex optional the index to start the search at. if the index is greater than or equal to the array's length, -1 is returned, which means the array will not be searched. ...
... syntax arr.indexof(searchelement[, fromindex]) parameters searchelement element to locate in the array. fromindex optional the index to start the search at. if the index is greater than or equal to the array's length, -1 is returned, which means the array will not be searched. ...
Array.prototype.shift() - JavaScript
syntax arr.shift() return value the removed element from the array; undefined if the array is empty. description the shift method removes the element at the zeroeth index and shifts the values at consecutive indexes down, then returns the removed value. ...
... syntax arr.shift() return value the removed element from the array; undefined if the array is empty. description the shift method removes the element at the zeroeth index and shifts the values at consecutive indexes down, then returns the removed value. ...
BigInt.asIntN() - JavaScript
syntax bigint.asintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as a signed integer. ...
... syntax bigint.asintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as a signed integer. ...
BigInt.asUintN() - JavaScript
syntax bigint.asuintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as an unsigned integer. ...
... syntax bigint.asuintn(width, bigint); parameters width the amount of bits available for the integer size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as an unsigned integer. ...
BigInt.prototype.toLocaleString() - JavaScript
syntax bigintobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. ...
... syntax bigintobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. ...
DataView.prototype.getBigInt64() - JavaScript
syntax dataview.getbigint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from. littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format. ...
... syntax dataview.getbigint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from. littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format. ...
DataView.prototype.getBigUint64() - JavaScript
syntax dataview.getbiguint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from. littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format. ...
... syntax dataview.getbiguint64(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view to read the data from. littleendian optional indicates whether the 64-bit int is stored in little- or big-endian format. ...
DataView.prototype.getFloat64() - JavaScript
syntax dataview.getfloat64(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format. ...
... syntax dataview.getfloat64(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format. ...
DataView.prototype.getInt8() - JavaScript
syntax dataview.getint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data. return value a signed 8-bit integer number. errors thrown rangeerror thrown if the byteoffset is set such as it would read beyond the end of the view. ...
... syntax dataview.getint8(byteoffset) parameters byteoffset the offset, in byte, from the start of the view where to read the data. return value a signed 8-bit integer number. errors thrown rangeerror thrown if the byteoffset is set such as it would read beyond the end of the view. ...
DataView.prototype.getUint16() - JavaScript
syntax dataview.getuint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format. ...
... syntax dataview.getuint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format. ...
DataView.prototype.getUint32() - JavaScript
syntax dataview.getuint32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format. ...
... syntax dataview.getuint32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format. ...
DataView.prototype.setFloat32() - JavaScript
syntax dataview.setfloat32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 32-bit float is stored in little- or big-endian format. ...
... syntax dataview.setfloat32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 32-bit float is stored in little- or big-endian format. ...
DataView.prototype.setFloat64() - JavaScript
syntax dataview.setfloat64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format. ...
... syntax dataview.setfloat64(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 64-bit float is stored in little- or big-endian format. ...
DataView.prototype.setInt16() - JavaScript
syntax dataview.setint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format. ...
... syntax dataview.setint16(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format. ...
DataView.prototype.setInt32() - JavaScript
syntax dataview.setint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format. ...
... syntax dataview.setint32(byteoffset, value [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to store the data. value the value to set. littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format. ...
Date.prototype.getTimezoneOffset() - JavaScript
syntax dateobj.gettimezoneoffset() return value a number representing the time-zone offset, in minutes, from the date based on current host system settings to utc. description the time-zone offset is the difference, in minutes, from local time to utc. ...
... syntax dateobj.gettimezoneoffset() return value a number representing the time-zone offset, in minutes, from the date based on current host system settings to utc. description the time-zone offset is the difference, in minutes, from local time to utc. ...
Date.prototype.getUTCFullYear() - JavaScript
syntax dateobj.getutcfullyear() return value a number representing the year in the given date according to universal time. description the value returned by getutcfullyear() is an absolute number that is compliant with year-2000, for example, 1995. ...
... syntax dateobj.getutcfullyear() return value a number representing the year in the given date according to universal time. description the value returned by getutcfullyear() is an absolute number that is compliant with year-2000, for example, 1995. ...
Date.prototype.getUTCHours() - JavaScript
syntax dateobj.getutchours() return value an integer number, between 0 and 23, representing the hours in the given date according to universal time. examples using getutchours() the following example assigns the hours portion of the current time to the variable hours. ...
... syntax dateobj.getutchours() return value an integer number, between 0 and 23, representing the hours in the given date according to universal time. examples using getutchours() the following example assigns the hours portion of the current time to the variable hours. ...
Date.prototype.setDate() - JavaScript
syntax dateobj.setdate(dayvalue) parameters dayvalue an integer representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the given date (the date object is also changed in place). ...
... syntax dateobj.setdate(dayvalue) parameters dayvalue an integer representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the given date (the date object is also changed in place). ...
Date.prototype.setFullYear() - JavaScript
syntax dateobj.setfullyear(yearvalue[, monthvalue[, datevalue]]) parameters yearvalue an integer specifying the numeric value of the year, for example, 1995. monthvalue optional. an integer between 0 and 11 representing the months january through december. datevalue optional. ...
... syntax dateobj.setfullyear(yearvalue[, monthvalue[, datevalue]]) parameters yearvalue an integer specifying the numeric value of the year, for example, 1995. monthvalue optional. an integer between 0 and 11 representing the months january through december. datevalue optional. ...
Date.prototype.setMilliseconds() - JavaScript
syntax dateobj.setmilliseconds(millisecondsvalue) parameters millisecondsvalue a number between 0 and 999, representing the milliseconds. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
... syntax dateobj.setmilliseconds(millisecondsvalue) parameters millisecondsvalue a number between 0 and 999, representing the milliseconds. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
Date.prototype.setUTCDate() - JavaScript
syntax dateobj.setutcdate(dayvalue) parameters dayvalue an integer from 1 to 31, representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
... syntax dateobj.setutcdate(dayvalue) parameters dayvalue an integer from 1 to 31, representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
Date.prototype.setUTCMilliseconds() - JavaScript
syntax dateobj.setutcmilliseconds(millisecondsvalue) parameters millisecondsvalue a number between 0 and 999, representing the milliseconds. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
... syntax dateobj.setutcmilliseconds(millisecondsvalue) parameters millisecondsvalue a number between 0 and 999, representing the milliseconds. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
Function.prototype.call() - JavaScript
syntax func.call([thisarg[, arg1, arg2, ...argn]]) parameters thisarg optional the value to use as this when calling func. caution: in certain cases, thisarg may not be the actual value seen by the method. ...
... syntax func.call([thisarg[, arg1, arg2, ...argn]]) parameters thisarg optional the value to use as this when calling func. caution: in certain cases, thisarg may not be the actual value seen by the method. ...
Intl.Collator() constructor - JavaScript
syntax new intl.collator([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. ...
... syntax new intl.collator([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. ...
Intl.DateTimeFormat - JavaScript
constructor intl.datetimeformat() creates a new datetimeformat object. 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. ...
... constructor intl.datetimeformat() creates a new datetimeformat object. 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. ...
Intl.ListFormat() constructor - JavaScript
syntax new intl.listformat([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. ...
... syntax new intl.listformat([locales[, options]]) parameters locales optional. a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. options optional. ...
Intl.ListFormat - JavaScript
constructor intl.listformat() creates a new listformat object. static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
... constructor intl.listformat() creates a new listformat object. static methods intl.listformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
Intl.NumberFormat - JavaScript
constructor intl.numberformat() creates a new numberformat object. 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. ...
... constructor intl.numberformat() creates a new numberformat object. 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. ...
Map.prototype.forEach() - JavaScript
syntax mymap.foreach(callback([value][,key][,map])[, thisarg]) parameters callback function to execute for each entry of mymap. it takes the following arguments: value optional value of each iteration. key optional key of each iteration. ...
... syntax mymap.foreach(callback([value][,key][,map])[, thisarg]) parameters callback function to execute for each entry of mymap. it takes the following arguments: value optional value of each iteration. key optional key of each iteration. ...
Math.max() - JavaScript
syntax math.max([value1[, value2[, ...]]]) parameters value1, value2, ... numbers. return value the largest of the given numbers. if at least one of the arguments cannot be converted to a number, nan is returned. ...
... syntax math.max([value1[, value2[, ...]]]) parameters value1, value2, ... numbers. return value the largest of the given numbers. if at least one of the arguments cannot be converted to a number, nan is returned. ...
Math.trunc() - JavaScript
syntax math.trunc(x) parameters x a number. return value the integer part of the given number. description unlike the other three math methods: math.floor(), math.ceil() and math.round(), the way math.trunc() works is very simple. ...
... syntax math.trunc(x) parameters x a number. return value the integer part of the given number. description unlike the other three math methods: math.floor(), math.ceil() and math.round(), the way math.trunc() works is very simple. ...
Number.isSafeInteger() - JavaScript
a safe integer is an integer that can be exactly represented as an ieee-754 double precision number, and whose ieee-754 representation cannot be the result of rounding any other integer to fit the ieee-754 representation. ...
... a safe integer is an integer that can be exactly represented as an ieee-754 double precision number, and whose ieee-754 representation cannot be the result of rounding any other integer to fit the ieee-754 representation. ...
Number.parseInt() - JavaScript
syntax number.parseint(string,[ radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
... syntax number.parseint(string,[ radix]) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. ...
Number.prototype.toExponential() - JavaScript
syntax numobj.toexponential([fractiondigits]) parameters fractiondigits optional. an integer specifying the number of digits after the decimal point. defaults to as many digits as necessary to specify the number. ...
... syntax numobj.toexponential([fractiondigits]) parameters fractiondigits optional. an integer specifying the number of digits after the decimal point. defaults to as many digits as necessary to specify the number. ...
Number.prototype.toLocaleString() - JavaScript
syntax numobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. ...
... syntax numobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventions should be used. ...
Number.prototype.valueOf() - JavaScript
syntax numobj.valueof() return value a number representing the primitive value of the specified number object. description this method is usually called internally by javascript and not explicitly in web code. ...
... syntax numobj.valueof() return value a number representing the primitive value of the specified number object. description this method is usually called internally by javascript and not explicitly in web code. ...
Object.defineProperties() - JavaScript
syntax object.defineproperties(obj, props) parameters obj the object on which to define or modify properties. props an object whose keys represent the names of properties to be defined or modified and whose values are objects describing those properties. ...
... syntax object.defineproperties(obj, props) parameters obj the object on which to define or modify properties. props an object whose keys represent the names of properties to be defined or modified and whose values are objects describing those properties. ...
Object.fromEntries() - JavaScript
syntax object.fromentries(iterable); parameters iterable an iterable such as array or map or other objects implementing the iterable protocol. return value a new object whose properties are given by the entries of the iterable. ...
... syntax object.fromentries(iterable); parameters iterable an iterable such as array or map or other objects implementing the iterable protocol. return value a new object whose properties are given by the entries of the iterable. ...
Promise() constructor - JavaScript
syntax new promise(executor) parameters executor a function to be executed by the constructor, during the process of constructing the promiseobj. the executor is custom code that ties an outcome to a promise. you, the programmer, write the executor. ...
... syntax new promise(executor) parameters executor a function to be executed by the constructor, during the process of constructing the promiseobj. the executor is custom code that ties an outcome to a promise. you, the programmer, write the executor. ...
Reflect.defineProperty() - JavaScript
syntax reflect.defineproperty(target, propertykey, attributes) parameters target the target object on which to define the property. propertykey the name of the property to be defined or modified. attributes the attributes for the property being defined or modified. ...
... syntax reflect.defineproperty(target, propertykey, attributes) parameters target the target object on which to define the property. propertykey the name of the property to be defined or modified. attributes the attributes for the property being defined or modified. ...
Reflect.deleteProperty() - JavaScript
syntax reflect.deleteproperty(target, propertykey) parameters target the target object on which to delete the property. propertykey the name of the property to be deleted. return value a boolean indicating whether or not the property was successfully deleted. ...
... syntax reflect.deleteproperty(target, propertykey) parameters target the target object on which to delete the property. propertykey the name of the property to be deleted. return value a boolean indicating whether or not the property was successfully deleted. ...
Reflect.get() - JavaScript
syntax reflect.get(target, propertykey[, receiver]) parameters target the target object on which to get the property. propertykey the name of the property to get. receiver optional the value of this provided for the call to target if a getter is encountered. ...
... syntax reflect.get(target, propertykey[, receiver]) parameters target the target object on which to get the property. propertykey the name of the property to get. receiver optional the value of this provided for the call to target if a getter is encountered. ...
RegExp.prototype[@@matchAll]() - JavaScript
syntax regexp[symbol.matchall](str) parameters str a string that is a target of the match. return value an iterator. description this method is called internally in string.prototype.matchall(). for example, the following two examples return same result. ...
... syntax regexp[symbol.matchall](str) parameters str a string that is a target of the match. return value an iterator. description this method is called internally in string.prototype.matchall(). for example, the following two examples return same result. ...
RegExp.prototype.test() - JavaScript
syntax regexobj.test(str) parameters str the string against which to match the regular expression. returns true if there is a match between the regular expression and the string str. otherwise, false. description use test() whenever you want to know whether a pattern is found in a string. ...
... syntax regexobj.test(str) parameters str the string against which to match the regular expression. returns true if there is a match between the regular expression and the string str. otherwise, false. description use test() whenever you want to know whether a pattern is found in a string. ...
Set() constructor - JavaScript
syntax new set([iterable]) parameters iterable optional if an iterable object is passed, all of its elements will be added to the new set. if you don't specify this parameter, or its value is null, the new set is empty. return value a new set object. ...
... syntax new set([iterable]) parameters iterable optional if an iterable object is passed, all of its elements will be added to the new set. if you don't specify this parameter, or its value is null, the new set is empty. return value a new set object. ...
Set.prototype.forEach() - JavaScript
syntax myset.foreach(callback[, thisarg]) parameters callback function to execute for each element, taking three arguments: currentvalue, currentkey the current element being processed in the set. as there are no keys in set, the value is passed for both arguments. ...
... syntax myset.foreach(callback[, thisarg]) parameters callback function to execute for each element, taking three arguments: currentvalue, currentkey the current element being processed in the set. as there are no keys in set, the value is passed for both arguments. ...
SharedArrayBuffer.prototype.byteLength - JavaScript
description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the shared array is constructed and cannot be changed. ...
... description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the shared array is constructed and cannot be changed. ...
String.fromCharCode() - JavaScript
syntax string.fromcharcode(num1[, ...[, numn]]) parameters num1, ..., numn a sequence of numbers that are utf-16 code units. the range is between 0 and 65535 (0xffff). numbers greater than 0xffff are truncated. no validity checks are performed. ...
... syntax string.fromcharcode(num1[, ...[, numn]]) parameters num1, ..., numn a sequence of numbers that are utf-16 code units. the range is between 0 and 65535 (0xffff). numbers greater than 0xffff are truncated. no validity checks are performed. ...
String.prototype.matchAll() - JavaScript
syntax str.matchall(regexp) parameters regexp a regular expression object. if a non-regexp object obj is passed, it is implicitly converted to a regexp by using new regexp(obj). the regexp object must have the /g flag, otherwise a typeerror will be thrown. ...
... syntax str.matchall(regexp) parameters regexp a regular expression object. if a non-regexp object obj is passed, it is implicitly converted to a regexp by using new regexp(obj). the regexp object must have the /g flag, otherwise a typeerror will be thrown. ...
String.prototype.substring() - JavaScript
syntax str.substring(indexstart[, indexend]) parameters indexstart the index of the first character to include in the returned substring. indexend optional the index of the first character to exclude from the returned substring. ...
... syntax str.substring(indexstart[, indexend]) parameters indexstart the index of the first character to include in the returned substring. indexend optional the index of the first character to exclude from the returned substring. ...
String.prototype.toLocaleLowerCase() - JavaScript
syntax str.tolocalelowercase() str.tolocalelowercase(locale) str.tolocalelowercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings. ...
... syntax str.tolocalelowercase() str.tolocalelowercase(locale) str.tolocalelowercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings. ...
String.prototype.toLocaleUpperCase() - JavaScript
syntax str.tolocaleuppercase() str.tolocaleuppercase(locale) str.tolocaleuppercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings. ...
... syntax str.tolocaleuppercase() str.tolocaleuppercase(locale) str.tolocaleuppercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings. ...
String.prototype.trimStart() - JavaScript
syntax str.trimstart(); str.trimleft(); return value a new string representing the calling string stripped of whitespace from its beginning (left end). description the trimstart() / trimleft() methods return the string stripped of whitespace from its left end. ...
... syntax str.trimstart(); str.trimleft(); return value a new string representing the calling string stripped of whitespace from its beginning (left end). description the trimstart() / trimleft() methods return the string stripped of whitespace from its left end. ...
TypedArray.prototype.buffer - JavaScript
description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the typedarray is constructed and cannot be changed. typedarray is one of the typedarray objects. ...
... description the buffer property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the typedarray is constructed and cannot be changed. typedarray is one of the typedarray objects. ...
WeakMap.prototype.set() - JavaScript
syntax wm.set(key, value); parameters key required. must be object. the key of the element to add to the weakmap object. value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
... syntax wm.set(key, value); parameters key required. must be object. the key of the element to add to the weakmap object. value required. any value. the value of the element to add to the weakmap object. return value the weakmap object. ...
WeakSet.prototype.has() - JavaScript
syntax ws.has(value); parameters value required. the object to test for presence in the weakset. return value boolean returns true if an element with the specified value exists in the weakset object; otherwise false. ...
... syntax ws.has(value); parameters value required. the object to test for presence in the weakset. return value boolean returns true if an element with the specified value exists in the weakset object; otherwise false. ...
parseFloat() - JavaScript
syntax parsefloat(string) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. return value a floating point number parsed from the given string. ...
... syntax parsefloat(string) parameters string the value to parse. if this argument is not a string, then it is converted to one using the tostring abstract operation. leading whitespace in this argument is ignored. return value a floating point number parsed from the given string. ...
Bitwise NOT (~) - JavaScript
syntax ~a description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
... syntax ~a description the operands are converted to 32-bit integers and expressed by a series of bits (zeroes and ones). numbers with more than 32 bits get their most significant bits discarded. ...
Unary negation (-) - JavaScript
syntax operator: -x examples negating numbers const x = 3; const y = -x; // y = -3 // x = 3 negating non-numbers the unary negation operator can convert a non-number into a number. ...
... syntax operator: -x examples negating numbers const x = 3; const y = -x; // y = -3 // x = 3 negating non-numbers the unary negation operator can convert a non-number into a number. ...
in operator - JavaScript
syntax prop in object parameters prop a string or symbol representing a property name or array index (non-symbols will be coerced to strings). object object to check if it (or its prototype chain) contains the property with specified name (prop). ...
... syntax prop in object parameters prop a string or symbol representing a property name or array index (non-symbols will be coerced to strings). object object to check if it (or its prototype chain) contains the property with specified name (prop). ...
function* - JavaScript
you can also define generator functions using the generatorfunction constructor, or the function expression syntax. syntax function* name([param[, param[, ... param]]]) { statements } name the function name. param optional the name of a formal parameter for the function. ...
... you can also define generator functions using the generatorfunction constructor, or the function expression syntax. syntax function* name([param[, param[, ... param]]]) { statements } name the function name. param optional the name of a formal parameter for the function. ...
if...else - JavaScript
syntax if (condition) statement1 [else statement2] condition an expression that is considered to be either truthy or falsy. statement1 statement that is executed if condition is truthy. can be any statement, including further nested if statements. ...
... syntax if (condition) statement1 [else statement2] condition an expression that is considered to be either truthy or falsy. statement1 statement that is executed if condition is truthy. can be any statement, including further nested if statements. ...
try...catch - JavaScript
syntax try { try_statements } [catch (exception_var_1 if condition_1) { // non-standard catch_statements_1 }] ... [catch (exception_var_2) { catch_statements_2 }] [finally { finally_statements }] try_statements the statements to be executed. ...
... syntax try { try_statements } [catch (exception_var_1 if condition_1) { // non-standard catch_statements_1 }] ... [catch (exception_var_2) { catch_statements_2 }] [finally { finally_statements }] try_statements the statements to be executed. ...
var - JavaScript
syntax var varname1 [= value1] [, varname2 [= value2] ... [, varnamen [= valuen]]]; varnamen variable name. it can be any legal identifier. valuen optional initial value of the variable. it can be any legal expression. default value is undefined. ...
... syntax var varname1 [= value1] [, varname2 [= value2] ... [, varnamen [= valuen]]]; varnamen variable name. it can be any legal identifier. valuen optional initial value of the variable. it can be any legal expression. default value is undefined. ...
JavaScript
vascript guide javascript guide a much more detailed guide to the javascript language, aimed at those with previous programming experience either in javascript or another language. intermediate understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing developers with proven tools for building scalable, inter
active web applications. 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. a re-introduction to javascript an overview for those who think they know about javascript. javascript data structures overview of available data structures in ...
...unctions to develop your applications. tools & resources helpful tools for writing and debugging your javascript code. firefox developer tools web console, javascript profiler, debugger, and more. javascript shells a javascript shell allows you to quickly test snippets of javascript code. learn javascript an excellent resource for aspiring web developers — learn javascript in an inter
active environment, with short lessons and inter
active tests, guided by automated assessment. the first 40 lessons are free, and the complete course is available for a small one-time payment. togetherjs collaboration made easy. by adding togetherjs to your site, your users can help each other out on a website in real-time! stack overflow stack overflow questions tagged with "javascript". javascript...
Graphic design for responsive sites - Progressive web apps (PWAs)
h detail images, such as photographs. using fonts for icons another technique to consider is using web fonts for icons. text is infinitely scalable on the web, and you can also use css text properties to style your web font icons, such as text-shadow and color. making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome. inter
active images if your images need to feature some level of interactivity, such as links, other clickable areas, or animation, there are a number of options available. css as well as adding programmatic graphical effects to links (and anywhere else you might want them), css3 also allows you to write declarative animations and transitions. these may not be supported in older browsers like ie6-8, but ...
... is very powerful when combined with other technologies, although its complexity is a barrier for non-developers. svg svg, just like html/css, can be manipulated via javascript. so adding interactivity is not difficult. you can also add links direcly into svg and can create animations using smil (synchronized multimedia intergration language). webgl/canvas you can create a canvas to draw inter
active graphics on using the html <canvas> element, then use the canvas api to create shapes, lines, import image files, create text, do compositing operations, and much more. standard javascript can then be used to animate the image output, etc. you can create 2d imagery using the regular 2d canvas context, or 3d imagery using the more nascent webgl api. canvas is very powerful, but it needs to be use...
end - SVG: Scalable Vector Graphics
the end attribute defines an end value for the animation that can constrain the
active duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list> animatable no the <end-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. ...
... value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation end time is defined relative to the begin or
active end of another animation. a valid syncbase-value consists of an id reference to another animation element followed by a dot and either begin or end to identify whether to synchronize with the beginning or
active end of the referenced animation element. an optional offset value as defined in <offset-value> can be appended. <event-value> this value defines an event and an optional offset that de...
max - SVG: Scalable Vector Graphics
the max attribute specifies the maximum value of the
active animation duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies t...
...the value must be greater than 0. specifications specification status comment svg animations level 2the definition of 'max' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'max' in that specification. recommendation initial definition ...
min - SVG: Scalable Vector Graphics
the min attribute specifies the minimum value of the
active animation duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the ...
...the value must be greater than 0. specifications specification status comment svg animations level 2the definition of 'min' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'min' in that specification. recommendation initial definition ...
restart - SVG: Scalable Vector Graphics
viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennot
active"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennot
active | never default value always animatable no always this val...
.../a> </svg> document.getelementbyid("restart").addeventlistener("click", evt => { document.queryselectorall("animate").foreach(element => { element.beginelement(); }); }); usage notes value always | whennot
active | never default value always animatable no always this value indicates that the animation can be restarted at any time. whennot
active this value indicates that the animation can only be restarted when it is not
active (i.e. after the
active end). attempts to restart the animation during its
active duration are ignored. never this value indicates that the animation cannot be restarted for the time the document is loaded. specifications specification status comment svg animations level 2the de...
<a> - SVG: Scalable Vector Graphics
sual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s. see warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* even for text, svg uses fill over color */ text-decoration: underline; } svg|a:hover, svg|a:
active { outline: dotted 1px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. value type: <string>...
...p-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
Paths - SVG: Scalable Vector Graphics
on travelling clockwise or counter-clockwise. each ellipse has one short arc and one long arc. the two ellipses are just mirror images of each other. they are flipped along the line formed from the start→end points. if the start→end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start→end points. the inter
active codepen at the bottom of this page demonstrates this well. to determine if an ellipse's radii are large enough to require expanding, a system of equations would need to be solved, such as this on wolfram alpha. this computation is for the non-rotated ellipse with start→end (110, 215)→(150.71, 170.29). the solution, (x, y), is the center of the ellipse(s). the solution will be imaginary if the...
...inite number of circles that could be chosen, and the actual path is undefined. it's possible to approximate them by making the start and end points of the path slightly askew, and then connecting them with another path segment. ...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
colors set by css. when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. ...
... css. when the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. ...
How to fix a website with blocked mixed content - Web security
consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. ...
...consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. ...
2015 MDN Fellowship Program - Archive of obsolete content
usted resource for literally millions of developers on a regular basis. in 2015, mdn will expand the impact of this content by developing kits of key learning materials, including such elements as code samples, videos and other elements being finalized. activities and deliverables act as lead curator for technical curriculum addressing a key web technology, developing code samples, videos, inter
active exercises and other components to be determined. 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. required skills and experience experienced web developer with expertise in javascript, css, html and/or other key technologies. profici...
system - Archive of obsolete content
ofile directory. this function exposes that functionality to add-on authors. for the full list of "special" directories and their ids, see "getting_files in special directories". for example: // get firefox profile path var profilepath = require('sdk/system').pathfor('profd'); // get os temp files directory (/tmp) var temps = require('sdk/system').pathfor('tmpd'); // get os desktop path for an
active user (~/desktop on linux // or c:\documents and settings\username\desktop on windows). var desktoppath = require('sdk/system').pathfor('desk'); parameters id : string the id of the special directory. returns string : the path to the directory. properties env this object provides access to environment variables. you can get the value of an environment variable by accessing the property wi...
widget - Archive of obsolete content
pts in separate files and pass their urls using the contentscriptfile property. see working with content scripts for more information. var widgets = require("sdk/widget"); // a basic click-able image widget. widgets.widget({ id: "google-link", label: "widget with an image and a click handler", contenturl: "http://www.google.com/favicon.ico", onclick: function() { require("sdk/tabs").
activetab.url = "http://www.google.com/"; } }); // a widget that changes display on mouseover. widgets.widget({ id: "mouseover-effect", label: "widget with changing image on mouseover", contenturl: "http://www.yahoo.com/favicon.ico", onmouseover: function() { this.contenturl = "http://www.bing.com/favicon.ico"; }, onmouseout: function() { this.contenturl = "http://www.yahoo.com/fa...
dev/panel - Archive of obsolete content
property debuggee. debuggee is a messageport object that you can use to exchange messages with the debugger server. optional dispose function a function that will be called when the panel is about to be destroyed. you can use it to do any cleanup. optional onready function an event handler that will be called when the document in the panel becomes inter
active. it's equivalent to document.readystate === "inter
active". at this point you can send the panel document messages. optional onload function an event handler that will be called after the document in the panel is fully loaded. it's equivalent to document.readystate === "complete". optional once you've defined the panel's constructor you have to export it so it can be ca...
ui/frame - Archive of obsolete content
containing this frame. after receiving this message, you ahould not attempt to communicate with the frame scripts. ready this event is emitted while a frame instance is being loaded, at the point where it becomes possible to interact with the frame although sub-resources may still be in the process of loading. it's the equivalent of the point where the frame's document.readystate becomes "inter
active": 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. ...
Low-Level APIs - Archive of obsolete content
pose powerful low-level capabilities such as window/utils and net/xhr. you can use these modules in your add-on if you need to, but should be aware that the cost of privileged access is the need to take more elaborate security precautions. in many cases these modules have simpler, more restricted analogs among the "high-level apis" (for example, windows or request). these modules are still in
active development, and we expect to make incompatible changes to them in future releases. /loader create commonjs module loaders. chrome the chrome module gives an add-on sdk add-on access to the components object, which in turn gives it access to a large set of privileged low-level firefox apis. console/plain-text constructor for a console instance. console/traceback functionality simila...
Creating Event Targets - Archive of obsolete content
the guide to event-driven programming with the sdk describes how to consume events: that is, how to listen to events generated by event targets. for example, you can listen to the tabs module's ready event or the panel object's show event. with the sdk, it's also simple to implement your own event targets. this is especially useful if you want to build your own modules, either to organize your add-on better or to enable other developers to reuse your code. ...
Tutorials - Archive of obsolete content
when new web pages are loaded, and access their content. get the list of open tabs use the tabs module to iterate through the currently open tabs, and access their content. modify web pages modify web pages based on url create filters for web pages based on their url: whenever a web page whose url matches the filter is loaded, execute a specified script in it. modify the
active web page dynamically load a script into the currently
active web page. development techniques logging log messages to the console for diagnostic purposes. creating reusable modules structure your add-on in separate modules to make it easier to develop, debug, and maintain. create reusable packages containing your modules, so other add-on developers can use them too. unit testing...
Miscellaneous - Archive of obsolete content
if you wish to block selected scripts based on their uri, implement nsicontentpolicy. using string bundles from javascript assuming the extension has myext.properties with name/value pairs such as: invalid.url=the speficied url, %...
Progress Listeners - Archive of obsolete content
with tab switching events. progress listeners implement the nsiwebprogresslistener interface. note that if you just want to execute your code each time a page loads, you can use an an easier method, onpageload(). note that onpageload does not fire for back button clicks. in the examples below the progress listener is attached to the tabbrowser, which means you don't get any notifications for in
active tabs. firefox 3.5 includes a way to set up a listener for all tabs, selected and not: listening to events on all tabs. example create an object which implements nsiwebprogresslistener: const state_start = ci.nsiwebprogresslistener.state_start; const state_stop = ci.nsiwebprogresslistener.state_stop; var mylistener = { queryinterface: xpcomutils.generateqi(["nsiwebprogresslistener", ...
JavaScript Daemons Management - Archive of obsolete content
in the javascript programming language, daemons are all processes created by javascript timers or by a worker instantiation. here are some code snippets that simplify and abstract the management of daemons. the following daemons management framework is the major version of setinterval – a little framework. introduction sometimes a page uses dozens and dozens of animations. ...
XPath - Archive of obsolete content
//add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; } var fields = [];//store the results if(window.
activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields)...
Extension Versioning, Update and Compatibility - Archive of obsolete content
prefix, when setting new value to updatehash:sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6 when a hash is specified the downloaded file is compared with the hash and an error shown if it does not match. there are quite a few tools you may use to generate hashes: various unix flavors include sha1sum, sha256sum and so on. windows users should consider hashtab for inter
active (non-build-script) use. there are also gnu ports for win (besides usual suspects like cygwin), which are good for non-inter
active use: sha256sum file there is also md5deep, which is cross platform: sha256deep file openssl also generates hashes for you: openssl sha256 file if you're on windows, hashtab is a shell extension... simple right-click gives you hash values for any file. there i...
Interaction between privileged and non-privileged pages - Archive of obsolete content
child elements on the event target element (<myextensiondataelement/> in this example). you can optionally clean up the created element, or create it once when the web page loads then re-use it each time. another option is to send a return event from the extension to the web page. this can be done using the same principle as the above example. there is only one extension, but there can be many
active web pages. so to trigger the right event on the right page we have to tell the extension which page to call. the information we need for that is contained in evt.target.ownerdocument. we can extend the above example with some data transfer from the extension to the web page. in the following code sample 2 methods are combined: setting an extra attribute in the original event target element, and ...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
end that you always use this declaration to limit access to the parent frame. in certain circumstances, you may want to declare type="content-primary". a browser element with this declaration is treated as a special browser among other xul documents, such that the window object displaying its web page can be accessed using the window.content property. in firefox itself, the content region of the
active tab is declared as a browser element with type="content-primary". keyboard shortcuts to implement keyboard shortcuts (pressing a key while holding down modifier keys like control or shift.) in a dhtml-based interface, you need a script that will intercept keyboard inputs. in xul, you can define keyboard shortcuts simply by using the key element, as shown in listing 19. <key id="key-save" key=...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
bute determines where the element gets added. test install and operational check this brings us to the point where we finally install our hello world extension. using the normal xpi-style installer would just be added trouble in this case, so we won’t use it. for source files under development, we do test installs. placing pointer files first, navigate to the profile folder of the currently
active profile4, and open the extensions folder within it. create a new file there with the name you used as the hello world extension id in the install manifest, helloworld@xuldev.org. set the contents of that file to be the full path to the work folder for your extension source files, c:\extensions\helloworld. listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworl...
Adding windows and dialogs - Archive of obsolete content
ompts.alert(window, "alert title", "hello!"); you should of course use localized strings instead of hard-coded ones. the prompt service allows you to set the title of the dialog however you want it, and also lets you specify the window you want to use as a parent for the alert. this normally should be set to the current window. you can pass a null value and the service will pick the currently
active window. confirm confirmation dialogs display a text with a yes / no question, and prompts the user to choose an answer. in html you can use the window.confirm function for this. the prompt service has a confirm method with similar behavior: let prompts = cc["@mozilla.org/embedcomp/prompt-service;1"]. getservice(ci.nsipromptservice); if (prompts.confirm(window, "confirm title", "would ...
Appendix F: Monitoring DOM changes - Archive of obsolete content
ient (they run for every http request, and considerably more often for some methods), they work very well for certain applications pure css pure css can be more powerful than most people suspect. it is often possible to do things for which people have traditionally resorted to javascript with css alone. in particular, the ::before and ::after pseudo-elements, and pseudo-classes like :hover and :
active can be used to achieve extremely complex dynamic behavior. late binding and event delegation often times, it suffices to bind event listeners to top-level elements and check for matching elements when the event fires. for instance, rather than watching for the creation of <a> elements and adding event listeners to them as they are created, an event listener can be added to the root <html> eleme...
Mozilla Documentation Roadmap - Archive of obsolete content
at have the answers. you'll need an irc client in order to do this, and the chatzilla extension works well for this purpose. problems using irc include: finding help when you have a big timezone difference with the united states, and no records of previously asked questions and their answers. another somewhat obscure communication channel is the mozilla newsgroups. they are also very diverse and
active, and there's a good chance you'll get your queries answered. thunderbird also comes in handy for reading and posting to the newsgroups. another advantage is that discussions are archived and searchable through google groups. other and finally, a couple resources you should also keep in mind: other extensions. there are thousands of extensions out there, and you may strike luck and find one t...
Setting Up a Development Environment - Archive of obsolete content
u should type this: bash -c "make" or replace "make" with "make clean" for the clean command. the "bash -c" part forces komodo to use bash, which for some reason can't be set properly as the default command shell. it isn't necessary to add this, but it's better so that it is consistent with the make command we'll see next. in the "start in" textbox you should choose %p (directory path of
active project). if you don't see this textbox, click on the "more" button. you also have the option to save the command, by clicking on the "add to toolbox" checkbox. to see the toolbox, click on view > tabs > toolbox, from the main menu. with that, you should now have a very easy way to build your xpi, by just double clicking on the created commands. we can make it even better. once you're testing an...
The Essentials of an Extension - Archive of obsolete content
he content directory. let's look at the xul file first. xul files are xml files that define the user interface elements in firefox and firefox extensions. xul was inspired by html, so you'll see many similarities between the two. however, xul is also an improvement over html, having learned from many of the mistakes made during the evolution of html. xul allows you to create richer and more inter
active interfaces than the ones you can create with html, or at least xul makes it easier. xul files usually define one of two things: windows or overlays. the file you opened before, downloads.xul, has the code that defines the downloads window. the xul file included in the hello world extension is an overlay. an overlay extends an existing window, adding new elements to it or replacing some of the el...
Performance best practices in extensions - Archive of obsolete content
that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the pro
active checking of add-ons section. see common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks. as well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage. for example, bug 719601 featured a "system principal" javascript compartme...
Index of archived content - Archive of obsolete content
ting addons broken by private browsing changes using dependent libraries in extension components using the stylesheet service bookmarks.export() bookmarks.import() adding preferences to an extension an interview with douglas bowman of wired news archived mozilla and build documentation
activex control for hosting netscape plug-ins in ie archived spidermonkey docs file object open merging tracemonkey repo spidermonkey coding conventions autodial for windows nt automated testing tips and tricks ...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
lly creates the tabbed menu if the browser has support to xmlhttprequest, since the mechanism used here is xmlhttprequest ***** --> <script type="text/javascript" language="javascript"> //// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new
activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/centra...
Localizing an extension - Archive of obsolete content
ntity menu_apple.label "apple (aapl)"> <!entity menu_google.label "google (goog)"> <!entity menu_microsoft.label "microsoft (msft)"> <!entity menu_yahoo.label "yahoo (yhoo)"> update the xul files each xul file needs to reference its corresponding locale file. we also need to update the code to use the entities instead of the strings, so that the substitutions take place based on the currently
active locale. to add a reference to the correct locale file for a given xul file, we need to add one line to the xul file. to options.xul, we add this line: <!doctype window system "chrome://stockwatcher2/locale/options.dtd"> we add a similar line to the stockwatcher.xul file: <!doctype overlay system "chrome://stockwatcher2/locale/stockwatcher2.dtd"> in larger applications you might need to use en...
MMgc - Archive of obsolete content
n is that a lot of time may be spent in the garbage collector. this time will pause the entire application, and give the impression of poor performance. even with an incremental collector that doesn't have big pauses, a gc sweep only kicks in every so often, so memory usage can grow very quickly to a high peak before the gc collects unused objects. so, some kind of reference counting is still attr
active to lower the amount of work the gc has to do, and to get more immediacy on memory reclamation. however, reference counting is also slow because the reference counts need to be constantly maintained. so, it's attr
active to find some form of reference counting that doesn't require maintaining reference counts for every single reference. enter deferred reference counting in deferred reference counti...
Defining Cross-Browser Tooltips - Archive of obsolete content
ent to the user. in this approach, the server checks outgoing html for elements that have an alt attribute but no title attribute, and inserts a title attribute with the same content as the alt attribute. a variant on christian's original suggestion was made by "ct" in bug 25537. a similar solution can be employed for web servers that are based on content management systems, including microsoft's
active server pages, which make such substitutions fairly simple. recommendations use the title attribute (instead of alt) to ensure desired tooltip behavior in multiple browsers. authors able to run content-rewriting proxy servers can use them to dynamically alter outgoing content to ensure both the title and alt attributes are present. related links html 4.01 specification: 13.8 how to speci...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
4) call ldap servers to get ldap attributes (mail & cn), this will finally call processldapvalues, "3)" just above. getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } thunderbird.cfg (version 2 with ad) using thunderbird 9.0.1 and try to use a
active directory (windows server 2008) as ldap-source did not work with version 1. here's my own version. //note: for accessing the
active directory of windows server later than 2000 //it is necessary to allow anonymous read access. please see //(german) http://interop.blog.de/2010/02/13/kapitel-1-ldap-anfragen-linux-ad-8001564/ //or search the net how to do it. if it is not possible to give access to ...
Chromeless - Archive of obsolete content
the aim is to enable developers to create full blown desktop applications using only web technologies. chromeless apps have access to a collection of javascript apis that provide them with deep desktop integration. one of the core capabilities of the chromeless platform is the ability to safely embed untrusted web applications inside these applications. chromeless vs prism/webrunner prism (an ex-mozilla labs project, now discontinued but kept going independently of mozilla under the [now discontinued] webrunner name) was/is a way to make web pages superficially appear to be native applications. ...
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
terface in mozilla for retrieving documents via http. although it is designed to retrieve xml content and parse it into a dom, it can retrieve (but not parse) other kinds of content as well. in this case we use it to retrieve an html page containing a brief summary of the current tinderbox state. that document gets updated by the tinderbox server every time a build finishes. it displays a list of
active tinderbox clients along with the result of their last build attempt. xmlhttprequest is easy to use in the simple case we have here. we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the document finishes loading, call its open method with the type of http request we want to make and the url of the docume...
In-Depth - Archive of obsolete content
of some icons setup to use the -moz-image-region style. each row is a different icon in one of its 4 different states (normal, hover, mouse down, and disabled). to cut the pieces out you need to define rectangles in the css file like this: #button-send { -moz-image-region: rect(294px 23px 315px 0px); } #button-send:hover { -moz-image-region: rect(294px 46px 315px 23px); } #button-send:hover:
active { -moz-image-region: rect(294px 69px 315px 46px); } #button-send[disabled="true"] { -moz-image-region: rect(294px 92px 315px 69px) !important; } the properties for rect are listed in a clockwise fashion - top, right, bottom, left. adding an image to the right of a toolbar this tutorial is done with mozilla 1.2 in mind. the layout of files can and probably will change over time, but the bas...
DTrace - Archive of obsolete content
probe data can be collected with scripts written in d (no, not that one). mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.5. dtrace has been largely supplanted by the gecko profiler and other tools, so this documentation has been archived. ...
Download Manager improvements in Firefox 3 - Archive of obsolete content
nterfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download list, retrieve information about past and present downloads, and request notifications as to the progress of downloads. nsidownload describes a file in the download queue; these files may currently be queued for download,
actively being downloaded, or finished being downloaded. nsidownloadprogresslistener applications and extensions implement this interface to be made aware of changes in the status of downloads. nsidownloadmanagerui implement this interface to replace or augment the download manager user interface. other download manager documentation download manager preferences ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
ant members of each object that control reflow processing. nsframe the base class for all frames. mflags flags set on the frame to indicate its state. these flags can be grouped into two categories: flags which affect all frames ("public" flags), and flags that are reserved for an individual frame's private use ("private" flags). ns_frame_in_reflow this bit is set when the frame is being
actively being reflowed. by default it is set in willreflow(), and unset in didreflow(). many frames' reflow() method verifies that the bit is set with an assertion. ns_frame_first_reflow this flag is set on a newly created frame, and later cleared by the frame's reflow() method when the frame has had its initial reflow. ns_frame_sync_frame_and_view ns_frame_outside_children this flag is set if th...
Content states and the style system - Archive of obsolete content
we will focus on describing how changes in content state are handled. generally, whenever a node's content state changes, style has to be reresolved (recomputed) for that node and all of its descendants. this is an expensive operation, however, so the style system tries to minimize the number of style reresolves it does. ...
Style System Overview - Archive of obsolete content
roken (has many bugs that reresolvestylecontext used to have). dynamic changes to content: optimizations we optimize attribute changes by storing all the attributes that have an effect on which rules match and only doing a reresolvestylecontext if the attribute has an effect. nsistylesheet::attributeaffectsstyle (should be on nsistyleruleprocessor). we optimize event state changes (:hover, :
active, etc.) using nsistyleruleprocessor::hasstatedependentstyle, which is much more accurate. the cssruleprocessor implementation does a slightly modified form of selector matching to implement it (includes matching on the middle of selectors to catch p:hover a). style attribute changes we handle style attribute (“inline style”) changes in a different way from other changes to style rules. a...
Basics - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! class console writes some information to the error console. you can find the console in the extra menu of firefox. the namespace for this api is console. methods info()this method does stuff. log(stringstring)this method writes a notification message to the console. stringthe message to add to the consolestring console.log("hello world!"); arn()this method does stuff. error()this method does stuff. exception()this method does stuff. logfromcaller()this method does stuff. ...
System - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under
active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! clipboard interactions with the os clipboard system information get information about the platform on which jetpack is running visual effects os-level visual effects abilities devices methods for accessing and controlling devices (ex. ipod, zune, cell phones, usb devices) ...
Notifications - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! the notification box appears at the bottom right corner of the browser and displays important information to the user. the namespace for this class is jetpack.notifications. methods show(titlestring, [body as string] iconstring)draws a notification box. ...
Panel - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under
active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! please refer to the panels jep. ...
Selection - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! jetpack's selection api provides a method for detecting the selections made by the user. features can get, set, and listen for selection events in html or plain text. the namespace for this api is jetpack.selection. ...
Tabs - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! in this class you can find information about the tabs in your firefox window. the namespace for this class is jetpack.tabs. ...
slideBar - Archive of obsolete content
read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! slidebar is a reinvention of the old sidebar features of browsers. they allow quick access to a wide range of both temporary and permanent information at the side of your browser window. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. ...
UI - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under
active development. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! menu accessing, modifying, and creating menus in the browser slidebar ui mechanism for displaying jetpack content in a slide-out animated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting ...
Mozilla Application Framework - Archive of obsolete content
in each file bonsai a web interface to the checkin log that you can query for checkins between certain dates, of certain files, or by certain developers. tinderbox our 24/7 build and test webtool that constantly builds, tests, and reports on the mozilla application suite on multiple platforms so you can see the state of the application at any given point in time. community a large,
active development community that interacts via newsgroups, mailing lists, irc channels, and web sites. flexible licensing with three licenses to choose from (mpl, lgpl, and gpl) so you can develop both open source and proprietary applications and combine the mozilla framework with other libraries. dozens of existing applications from both large and small development teams. did you know? the mozi...
Frequently Asked Questions - Archive of obsolete content
an svg user you can help by testing the svg enabled nightlies and filing bugs with minimal testcases whenever you encounter a problem. if you can't do either of these things you should still feel free to ask us friendly questions and give us constructive feedback. who's currently working on what? other than reviewing patches and fixing the occassional bug, alex is currently taking a break from
active svg development to concentrate on 'real work' and cool stuff like xtf and jssh. tim is working on implementing <filter> and working on items that need to be done before turning on svg by default. after recently implementing gradients, scooter is working on fixing some issues that remain outstanding and fixing <switch>. jonathan is working on various bugs, especially those that need to be fixed be...
Cmdline tests - Archive of obsolete content
the cmdline testsuite is located in test/cmdline. the testsuite allows more flexibility by coding scripts in python allowing any executable to run, sending commands to stdin, and asserting output using regular expressions. see test/cmdline/readme document for more information. ...
Tamarin Build System Documentation - Archive of obsolete content
l/run-acceptance-release.sh <optional hg revision number like 1902> how do i navigate the build status page? the page is divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow color: red means failed, green passed, and yellow has warnings. the phase state is idle or
active click on the phase (e.g. compile, smoke, or test to show the build slaves from the most recent phase run or click on an individual box to display the test result below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submissio...
Video presentations - Archive of obsolete content
this article is a jumping-off point to help you find those presentations. architecture these presentations provide an architectural overview of the codebase. how pages are built using the dom this presentation describes how documents are loaded and the dom tree is constructed. (as quicktime; 198 mb) laying out and drawing documents (slides) this presentation describes how a document is laid out and painted to the display by the gecko engine. (as quicktime; 282 mb) community these presentations provide insight into the mozilla community and how the project works. ...
Using XPInstall to Install Plugins - Archive of obsolete content
ny plugins may involve more than one dll, or perhaps additional native code. it is, however, a safe assumption for most plugins, especially macromedia's flash plugin which consists of a single dll (on windows this is npswf32.dll) and a single xpt file for scriptability (called flashplayer.xpt). it further installs to a secondary location on the user's desktop. in particular, like many ocx files (
activex controls) it installs to a special directory within c:\winnt\system32\, called c:\winnt\system32\myplugin. xpinstall is able to determine what directory this is by the getfolder api call. we have written our own javascript function to contain all the secondary installation code -- function createsecondaryinstall() and finally, it writes the required registry keys to windows. this is done via th...
SVG And Canvas In Mozilla - Archive of obsolete content
to realize this potential in web applications, browsers must expose rich new graphics apis to web content. the mozilla project will meet this challenge with two major new features to be delivered in firefox 1.5: integrated svg and a new canvas html element. ...
XTech 2005 Presentations - Archive of obsolete content
ts in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. rich web: svg and canvas in mozilla - robert o'callahan today's web browsers offer somewhat limited graphics capabilities to web developers. advances in hardware, especially graphics processors, offer the potential for far richer graphics in inter
active applications. to realize this potential in web applications, browsers must expose rich new graphics apis to web content. the mozilla project will meet this challenge with two major new features to be delivered in firefox 1.1: integrated svg and a new canvas html element. work is also underway "under the hood" on a new unified graphics architecture that uses 3d graphics processors to accelerate al...
Floating Panels - Archive of obsolete content
tes a panel with a titlebar. currently, only the value normal is supported, which creates a default titlebar. in the future, a distinction will be available to support titlebars of differing styles. the floating panel can be placed and moved independently of the main window, however it will always appear above the main window. on mac, floating panels are invisible when another application is made
active, and become visible again when the xul application is made
active. a floating panel may contain any type of element. a label for the titlebar may be set using the label attribute, as in the following example: <panel id="info-panel" noautohide="true" titlebar="normal" label="image properties"> closing a floating panel unlike other panels, a floating panel does not close when clicking outside of i...
OpenClose - Archive of obsolete content
parent menu is not open. in this case, the parent menu must be opened first. if you do want to open a submenu, open the parent menu first, and then open the child menu in a popupshown event listener. see the popupshown event for an example of how to do this. a menu in an unprivileged content window (such as a web page) can only open a popup while its window is focused, and it is in the currently
active tab. that means that a document in a background tab cannot open a menu or popup. closing menus menus will close automatically once the user has made a selection from the menu. when an menu item is selected, it fires a command event so that code may be used to perform an action. the user may cancel selecting a command from a menu by pressing the escape key. this will close a single menu, but if...
PopupEvents - Archive of obsolete content
operation already carried out. this is one special case in which the popuphiding event is fired after the popup has been removed from the screen. the reason for this is if, as is quite common, the menu item's action is to open a modal dialog. here, the menu would need to be removed first, before the dialog can be opened. otherwise, the user would have a menu for a parent window that is no longer
active. so instead, the popup is removed first. note that this means that the popuphiding event doesn't fire until after the modal dialog has been closed. there are situations when the popuphiding event will not fire when a menu is closed so you should make sure not to call any necessary code there. a better way is to just reinitialize the menu or popup in the popupshowing event. one such situation when...
Adding Style Sheets - Archive of obsolete content
. toolbar > button matches all buttons that are directly inside toolbar elements. toolbar > button.bigbuttons matches all button elements with a class of bigbuttons that are directly inside toolbar elements. button.bigbuttons:hover matches all button elements with a class of bigbuttons but only while the mouse is over them. button#special-button:
active matches all button elements with an id of special-button but only while they are
active (being clicked on). box[orient="horizontal"] matches all box elements that have an orient attribute that is set to horizontal. you can combine these rules in any way that you wish. it is always a good idea to be as precise as possible when specifying what gets styled. it is more efficien...
Creating a Skin - Archive of obsolete content
z-image-region which can be used to make an element use part of an image. you can think of it as a clip region for the image. you set the property to a position and size within an image and the button will display only that section of the image. this allows you to use the same image for multiple buttons and set a different region for each one. when you have lots of buttons, with states for hover,
active and disabled, this saves space that would normally be occupied by mutliple images. in the code above, we use the same image for each button, but set a different image region each one. if you look at this image (btn1.gif), you will notice that it contains a grid of smaller images, each one 16 by 16 pixels. the -moz-box-orient property is used to orient the button vertically, so that the image app...
XUL FAQ - Archive of obsolete content
mentation or ask in the xul newsgroup. are there decent visual editors for laying out xul applications? there are no production-quality visual editors available for xul. the recommended way is to edit xul by hand, possibly with the help of a good text or xml editor. ted mielczarek's live xul editor (also part of extension developer's extension) often proves useful. a list of projects (dead and
active) aiming to create a xul ide/editor is at wikimo:xul:ide. troubleshooting prefwindow-based options windows this ought to be on a separate page, preferences system troubleshooting. it is a faq. some things to check when you have issues with your prefwindow-based options window: does each prefpane have a unique id? are there any elements inside the <prefwindow>, before the <prefpane>s? (puttin...
XUL Event Propagation - Archive of obsolete content
the interface. introduction xul events were introduced in a very general way in a previous xulnote. but to use events effectively in xul, you must be aware of what the actual process for raising, listening to, and handling events is. collectively, this process is referred to as the event model. events are used for different purposes, but they play a particularly important role in creating inter
active xul-based user interfaces, since it is events that bring the information about user actions to the code behind the interface. the following image describes in a very basic way how the various actors in the event model interact with one another. the user clicks a button in the interface. this button responds to the user action by raising an event, a message meant to travel from one element wit...
arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box. the user only needs to hover the mouse over the arrows to scroll the box. this element is typically used for large popup menus. hovering the mouse over one of the (
active) arrows triggers a scroll event. more information is available in the xul tutorial. attributes clicktoscroll, disabled, smoothscroll, tabindex properties disabled, scrollboxobject, scrollincrement, smoothscroll, tabindex methods ensureelementisvisible, scrollbyindex, scrollbypixels examples <arrowscrollbox orient="vertical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <b...
browser - Archive of obsolete content
l for this browser. if this attribute is set to true or omitted, autoscroll will be enabled or depending on the user preference general.autoscroll. disablehistory type: boolean disables both session and global history for the docshell attached to the browser. disableglobalhistory type: boolean disables global history for the docshell attached to the browser while keeping session history
active. disablesecurity type: boolean set this attribute to true to disable the security ui for this browser. omit this attribute off to enable it. droppedlinkhandler type: function this function is called when links are dropped to the browser element, with the following arguments. droppedlinkhandler(event, uri, name) -- firefox 51 or older droppedlinkhandler(event, links) -- firef...
notificationbox - Archive of obsolete content
-cursor, width properties currentnotification type: notification element the currently displayed notification element or null. this property is read-only. allnotifications type: nodelist nodelist of all notifications. this property is read-only. notificationshidden type: boolean indicating whether the notification area should be hidden. events alert
active type: event fired when a notification element is shown. alertclose type: event fired when a notification element is closed. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(...
panel - Archive of obsolete content
nel is shown in front of all other normal windows, including those of other applications. parent the panel is shown just above the window the panel is in, but behind other windows above it. if anchored, the child window maintains its relative position to its parent window. floating the panel floats above the window the panel is in. on mac, the panel is only visible when the application is
active. noautofocus type: boolean if false, the default value, the currently focused element will be unfocused whenever the popup is opened or closed. if true, the focus is not adjusted. noautohide type: boolean if false, the default value, the panel will be hidden when the user clicks outside the panel or switches focus to another application. if true, the panel will only be close...
tree - Archive of obsolete content
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="
active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols> <treechildren> <treeitem> <treerow> <treecell value="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </t...
wizard - Archive of obsolete content
document.getelementbyid('thewizard').canadvance = (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). moreover this hides separator between titlebar and window contents. this only affects mac os x. firstpage type: boolean true if the wizard is on the first page. in
activetitlebarcolor type: color string specify background color of the window's titlebar when it is inac...
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
runner app that nonetheless uses most of the features any given application is likely to need. building xulrunner do i need to build xulrunner? if you are just creating a xulrunner app with some c++ components, you can avoid the challenge of building xulrunner itself by downloading a prebuilt sdk. do this if at all possible and send me some of the money you save on psychiatry sessions. if you are
actively modifying xulrunner as part of your development, however, you'll have to bite the bullet. for example, you may be fixing bugs in xulrunner, applying patches from bugzilla that aren't yet checked into the main repository or making your own changes to deploy as part of a customized xulrunner build. so basically, almost everyone should be able to skip the next section. building xulrunner still her...
calICalendarView - Archive of obsolete content
ntation allows for calls to setdatelist. if an implementation returns true for this attribute, it must allow for any arbitrary set of dates to be displayed. hasdisjointdates returns false if the dates being displayed represent a continuous list, and true if certain dates in between startdate and enddate may not be displayed. selecteditem returns a caliitembase corresponding to the currently
active item in the view. other areas of the code may use this attribute for setting selection, editing purposes, or any other purpose. note: this will likely change to selecteditems and return an array of caliitembases in order to support selecting multiple items at once. selectedday the currently selected day in the display. other areas of the code will often use this as a basis for default values f...
Extentsions FAQ - Archive of obsolete content
mozilla products, as it is possible to install extensions directly within the application directory. inspector, talkback and the default theme are nowadays installed like this. does firefox clean up the preferences set by extension? if not, how to proceed? when user chooses to uninstall an extension, a nsiobserverservice notification is sent out. the problem is, while your extension is still
active, user can cancel uninstallation, and when it is physically uninstalled, your code can't run. right. and if you uninstall firefox, the profile data is left behind. it would be nice to give the option of clearing extension's data, but it should be implemented at application level, not by each extension individually. it might be an option to stick with it and perform stuff when it comes to appli...
2006-10-27 - Archive of obsolete content
nced a french site has already announced final ff 2.0 and gives download links on its own site. update check failing in firefox 2.0 if add-on type is 8 testing a custom update.rdf file for a langpack using the official version of firefox 2.0 rc 3. discussions developing a spelling dictionary developing a spelling dictionary. alternative german locale while the alternative locale is
active, the auto update of firefox stops working. problem with belarusian firefox 2 rc3 the broken message is displayed after user tries to visit non-existing site. meetings none for this week. authors paul yanchun gu (gpaul) aditya nanda kuswanto(vipers101) ...
NPN_SetValue - Archive of obsolete content
wo-way scriptability article on the mozilla plugins project page for more details). nppvpluginkeeplibraryinmemory specifies that the plugin does not want to be unloaded from memory after the page which initiated it has gone. normally, when the browser navigates away from the page containing the plugin, all plugin instances get an npp_destroy call, and if there are no more instances of the plugin
active, the plugin calls its np_shutdown method and the plugin dll gets unloaded from memory. if this is not desired, the plugin can instruct the browser not to unload the dll and not to call np_shutdown when the page is left. in such a case all this will be done on the browser shutdown. the plugin calls npn_setvalue any time with nppvpluginkeeplibraryinmemory as variable parameter and value set to true...
NPN_Write - Archive of obsolete content
m pointer to the stream into which to push the data. len length in bytes of the data specified by buf. buf a pointer to a buffer of data to deliver to the stream. returns if successful, the function returns a positive integer representing the number of bytes written (consumed by the browser). this number depends on the size of the browser's memory buffers, the number of
active streams, and other factors. if unsuccessful, the plug-in returns a negative integer. this indicates that the browser encountered an error while processing the data, so the plug-in should terminate the stream by calling npn_destroystream(). description npn_write() delivers a buffer from the stream to the instance. a plug-in can call this function multiple times after creating a stream with npn_n...
The First Install Problem - Archive of obsolete content
meta-information about how to load the plugin. this document supplements the key parsing methodology suggested for installers. the solution is to encourage plugin vendors to write registry keys to the win32 system registry, like the example application. this document proposes a meta-information model in the win32 registry similar to the one used by microsoft's hkey_classes_root\clsid\ where a new
activex control (ocx) on the system presents its uuid as a registry key (identifying the
activex control) as well as information about where to find the ocx (e.g. under the inprocserver32 subkey). for mozilla-based browsers, this system would be on a per-module basis, and instead of a uuid, we'll use a uri nomenclature that gives us the desired uniqueness. this uri nomenclature is called a plugin identi...
Building a Theme - Archive of obsolete content
s users should retain the os' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces. save the file with the id of your theme as its name (e.g. sample@example.net). no file extension. now you should be ready to test your theme! start firefox. firefox will detect the text link to your theme directory and install the theme. your theme will not be
active the first time you install, and you will need to click "enable" and restart before you can see your change. after it restarts this second time, you should see the background color of the toolbars is displayed in orange now. you can now go back and make additional changes to your css files, close and restart firefox, and see the updates. package now that your theme works, you can package it f...
Browser Detection and Cross Browser Support - Archive of obsolete content
automatically use any such features in gecko if they are available in the version of gecko being used. see the dom client object cross-reference for more details on which internet explorer's objects and properties are supported by which version of gecko. a number of internet explorer features are not supported by gecko. these include the window.event object, behaviors, filters, transitions, and
activex. how (and when) to use the navigator object when detecting gecko unless you specifically need to detect if gecko is being used, do not use these methods. these methods should only be used in circumstances which can not be handled by using object feature detection such as when specific versions of gecko must be excluded for security reasons. note: for client side detection, we recommend using ...
-ms-block-progression - Archive of obsolete content
l. formal syntax tb | rl | bt | lr specifications not part of any specification. remarks in vertical layout, text lines are rotated 90° clockwise. images are not rotated, but tables are. box layout in vertical orientations is exactly analogous to layout in the horizontal orientation: width, height, top, bottom, right, and left do not rotate with the text. only one block progression is
active at a time; these values cannot be combined. this property is based on the block-progression property of the css3 text layout module. ...
-ms-ime-align - Archive of obsolete content
the extension is implemented in microsoft edge and internet explorer 11. ime candidate lists are positioned on the screen with sufficient size to allow basic text input. in some cases, the ime may enforce a reasonable minimum size. ...
CSS - Archive of obsolete content
er of consecutive lines in an element that may be ended with a hyphenated word.-ms-hyphenate-limit-zonethe -ms-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.-ms-ime-alignthe -ms-ime-align css property is a microsoft extension aligning the input method editor (ime) candidate window box relative to the element on which the ime composition is
active. the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit du...
Date.getVarDate() - Archive of obsolete content
warning: this method is supported in internet explorer only. the getvardate method returns a vt_date value from a date object. syntax dateobj.getvardate() parameters the required dateobj reference is a date object. return value returns a vt_date value. remarks the getvardate() method is used when javascript code interacts with com objects,
activex objects, or other objects that accept and return date values in vt_date format. these include objects in visual basic and visual basic scripting edition (vbscript). the actual format of the returned value depends on regional settings. requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and inter...
Debug.setNonUserCodeExceptions - Archive of obsolete content
onusercodeexceptions [= bool]; remarks if this property is set to true within a given scope, the debugger can then choose whether to take some specified action on exceptions thrown inside that scope: for instance, if the developer wishes to break on user-unhandled exceptions. setting this property to false is the same as never having set the property. for more information on debugging, see the
active script debugging overview. example the following code shows how to set this property. (function () { debug.setnonusercodeexceptions = true; try{ var x = null; x.y(); } catch (e) { // catch the exception. } })(); requirements supported in the following document modes: internet explorer 10 standards and internet explorer 11 standards. also supported in store...
Enumerator.atEnd - Archive of obsolete content
object. the atend method returns true if the current item is the last one in the collection, the collection is empty, or the current item is undefined. otherwise, it returns false. ...
Enumerator.item - Archive of obsolete content
the enumerator.item method returns the current item in the collection. syntax enumobj.item() remarks the required enumobj reference is any enumerator object. the item method returns the current item. if the collection is empty or the current item is undefined, it returns undefined. ...
Enumerator - Archive of obsolete content
tead of using indexes, as you would with arrays, you can move the current item pointer only to the first or next element of a collection. the enumerator object provides a way to access any member of a collection and behaves similarly to the for...each statement in vbscript. ...
VBArray - Archive of obsolete content
sic safe arrays. syntax varname = new vbarray(safearray) parameters varname the variable name to which the vbarray is assigned. safearray a vbarray value. remarks vbarrays are read-only, and cannot be created directly. the safearray argument must have obtained a vbarray value before being passed to the vbarray constructor. this can only be done by retrieving the value from an existing
activex or other object. vbarrays can have multiple dimensions. the indices of each dimension can be different. the dimensions method retrieves the number of dimensions in the array; the lbound and ubound methods retrieve the range of indices used by each dimension. example the following example consists of three parts. the first part is vbscript code to create a visual basic safe array. the second p...
Microsoft JavaScript extensions - Archive of obsolete content
warning: these apis will only work in microsoft applications, and are not on a standards track. microsoft browsers (internet explorer, and in a few cases, microsoft edge) support a number of special microsoft extensions to the otherwise standard javascript apis. ...
Implementation Status - Archive of obsolete content
these can be found on the mozilla xforms specials page. specification chapter index here we give an overview of xforms 1.1 specification chapters and the current status of the mozilla support. the sections are marked with their current status: supported, partial support, in progress, and not currently supported. we have listed the most relevant bugs here, but check out the bugzilla xforms buglist for the complete list. 3. ...
XForms - Archive of obsolete content
so that they can be displayed by a wide variety of devices. xforms is a w3c specification. xforms tutorial and cookbook xforms in wikibook format - over 50 examples tested with firefox. xforms support can be added to firefox and seamonkey by installing the mozilla xforms extension. this extension, while supporting a significant subset of the xforms 1.0 and 1.1 candidate recommendations, is not
actively maintained any more since about 2010. the last official release has been done for firefox 3.6 and is available for download on addons.mozilla.org. for more details about the future of the mozilla xforms extension see this blog post. documentation implementation status implementation status of the mozilla xforms extension building get started with build...
The Business Benefits of Web Standards - Archive of obsolete content
nly drawback in using css is that older browsers (specifically ie4 and ns4) will not be able to render as intended. in some cases, where a significant portion of the audience is running netscape 4.x, use of simple tables for layout and css for font control may be a solution. another option is to serve html content to netscape 4.x users, without css style. the content will be usable but not as attr
actively presented as in a modern browser. furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade. mandated accessibility being accessible is mandatory in many countries for government agencies (us, uk, canada), and --in some countries like australia-- for every organization. in the us, section 508 applies to government-funded projects and agencies.
XUL Parser in Python - Archive of obsolete content
with new widgets and attributes landing all the time, i wanted to get some quicker way of looking at the xul--at particular builds, at particular widgets, at which elements had which attributes, etc. ...
Index - Game development
on introductory article first, and have basic knowledge about three.js. 15 3d games on the web games, graphics, needscontent, needsexample, webgl, webvr, three.js for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on html <canvas>. webgl is basically an opengl es 2.0 for the web — it's a javascript api providing tools to build rich inter
active animations and of course, also games. you can generate and render dynamic 3d graphics with javascript that is hardware accelerated. 16 building up a basic demo with a-frame 3d, a-frame, vr, virtual reality, web, webgl the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web browsers, but the community is still waiting for tools ...
Game distribution - Game development
in your games. your creativity is critical here. web stores the best platforms for html5 games are the web-based stores. it's easy to prepare a game for them as such an action involves little to no modification of the game itself — usually adding a manifest file containing necessary information in a zipped package containing all the resources is enough. the chrome web store is also an attr
active option — again, having a manifest file ready, zipping your game and filling in the online submission form is about all that's required. tizen is also putting a high value on supporting apps written in javascript. their store is another available option. native mobile stores when it comes to the mobile market, there's the apple app store for ios, google play for android and all the rest of t...
Game monetization - Game development
e to an already released game, but remember that you'll have to offer decent, entertaining content to attract people to buy it. a totally new set of levels with new characters, weapons and story is a good material for dlc, but to have enough sales the game itself has to be popular, or else there won't be any players interested in spending their hard earned money on it. advertisements instead of
actively selling the games you can also try to get yourself a passive income — showing adverts and relying on previous activities related to promoting your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. you still need to plan it out, and at some point you'll need a bit of luck too. if your game goes viral and people start sharing it, you can get a lot of downloa...
Game promotion - Game development
your social media presence is very important — follow the right hashtags, make friends, engage in conversations, help other devs in need. honesty is key and you should be authentic, because nobody likes boring press releases or pushy advertisements. when the time comes your community will help you spread the word about your shiny little game. you should use at least twitter and facebook and be
active on appropriate forums — the most popular one is html5gamedevs.com. share your gamedev news and answer questions, so people will value what you're doing and will know that you're ok. remember to not be too pushy on telling everyone about your games — you're not a walking advertisement. grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, ...
Audio for Web games - Game development
as a click or tap. this means you will have to structure your audio playback to take account of that. this is usually mitigated against by loading the audio in advance and priming it on a user-initiated event. for more passive audio auto play, for example background music that starts as soon as a game loads, one trick is to detect any user initiated event and start playback then. for other more
active sounds that are to be used during the game we could consider priming them as soon as something like a start button is pressed. to prime audio like this we want to play a part of it; for this reason it is useful to include a moment of silence at the end of your audio sample. jumping to, playing, and then pausing that silence will mean we can now use javascript to play that file at arbitrary point...
Desktop mouse and keyboard controls - Game development
keyboard the whole game can be controlled with just the keyboard and nothing else. the built in this.game.input.keyboard object manages the input from the keyboard and has a few helpful methods like addkey() and isdown(). there's also the phaser.keycode object, which contains all the available k...
Implementing controls using the Gamepad API - Game development
ons are pressed (or held), we execute the proper functions assigned to them. in this case, pressing or holding a will fire the bullet and pressing b will pause the game. axis threshold the buttons have only two states: 0 or 1, but the analog sticks can have many different values — they have a float range between -1 and 1 along both the x and y axes. gamepads can get dusty from lying around in
active, meaning that checking for exact -1 or 1 values can be a problem. for this reason, it can be good to set a threshold for the value of the axis to take effect. 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'...
Efficient animation for web games - Game development
the request, and appending the game’s drawing function onto the end of the callback like so: animator.requestanimationframe = function(callback) { requestanimationframe(function(t) { callback(t); redraw(); }); }; the game’s redraw function does all drawing, and the animation callbacks just update state. when you request a redraw outside of animations, the animator’s
activeanimations property is queried first to avod mistakenly drawing multiple times in a single animation frame. this gives nice, synchronised animations at a very low cost. puzzowl isn’t out yet, but here’s a little screencast of it running on a nexus 5: note: this article was originally written and published by chris lord, on his blog — see efficient animation for games on the (mobile) we...
WebRTC data channels - Game development
the webrtc (web real-time communications) api is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels. this article explains more about this, and shows you how to use libraries to implement data channels in your game. what is a data channel? a webrtc data channel lets you send text or binary data over an
active connection to a peer. in the context of a game, this lets players send data to each other, whether text chat or game status information. data channels come in two flavors. reliable channels guarantee that messages you send arrive at the other peer and in the same order in which they're sent. this is analogous to a tcp socket. unreliable channels make no such guarantees; messages aren't guaranteed to arrive in ...
Techniques for game development - Game development
improvement for your users. this article explains how. optimizing startup performance how to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device. using webrtc peer-to-peer data channels in addition to providing support for audio and video communication, webrtc lets you set up peer-to-peer data channels to exchange text or binary data
actively between your players. this article explains what this can do for you, and shows how to use libraries that make this easy. efficient animation for web games this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. we touch on css transitions and css animations, and javascript loops involvi...
Collision detection - Game development
update your collisiondetection() function as indicated below: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; ...
2D maze game with device orientation - Game development
building monster wants candy article for the in-depth introduction to the basic phaser-specific functions and methods. 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. the start method is starting the given state and making it
active. let's see what the states are actually. managing game states the states in phaser are separate parts of the game logic; in our case we’re loading them from independent javascript files for better maintainability. the basic states used in this game are: boot, preloader, mainmenu, howto and game. boot will take care of initializing a few settings, preloader will load all of the assets like gra...
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
logy known as xmlhttprequest. ajax allows you to update parts of the dom of an html page instead without the need for a full page refresh. ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading). with inter
active websites and modern web standards, ajax is gradually being replaced by functions within javascript frameworks and the official fetch api standard. ...
Browsing context - MDN Web Docs Glossary: Definitions of Web-related terms
a browsing context is the environment a browser displays a document. in modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe. each browsing context has a specific origin, the origin of the
active document and a history that memorize all the displayed documents, in order. communication between browsing context is severaly constrained. between browsing context of the same origin, a broadcastchannel can be opened and used. learn more see origin ...
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client hints enable automated delivery of optimized assets like the automatic negotiation of image dpr resolution. use of client hints isn't automatic: rather, servers must announce that they support client hints. servers announce support for client hints using the accept-ch (accept client hints) header or an equivalent html meta element with the http-equiv attribute. ...
Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
ntained, css and javascripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. to prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is inter
active, thus improving performance. while the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced. code splitting is a feature supported by bundlers like webpack and browserify which can create multiple bundles that can be dynamically loaded at runtime. see also bundling lazy loading http/2 tree shaking ...
First CPU idle - MDN Web Docs Glossary: Definitions of Web-related terms
first cpu idle measures when a page is minimally inter
active, or when the window is quiet enough to handle user input. it is a non-standard google web performance metric. generally, it occurs when most, but not necessarily all visible ui elements are inter
active, and the user interface responds, on average, to most user input within 50ms. it is also known as first inter
active. ...
Netscape Navigator - MDN Web Docs Glossary: Definitions of Web-related terms
etscape was a leading browser in the 1990s. netscape was based on mosaic and the netscape team was led by marc andreessen, a programmer who also wrote code for mosaic. netscape helped make the web graphical rather than a text-only experience. many browsing features became standard after netscape introduced them. netscape could display a webpage while loading, used javascript for forms and inter
active content, and stored session information in cookies. despite netscape's technical advantages and initial dominance, by the late 1990s internet explorer swiftly overtook netscape in market share. learn more general knowledge netscape navigator on wikipedia ...
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
perceived performance is a subjective measure of how fast a website seems to a user based on load time and site responsiveness. this measure relies on human perception, not an objective metric like time to inter
active. in terms of web performance, perceived performance is how fast a user interaction feels rather than how fast an interaction actually is, be that a button press or a page load. perceived performance is not how fast your site is; it's how fast your users think it is. perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is inter
active. in terms of conversion rates, perceived performance is more important than the actual load and response times. speed index is a common metric for measurin...
Placeholder names - MDN Web Docs Glossary: Definitions of Web-related terms
ryptography to indicate the participants in a conversation, without resorting to terminology such as "party a," "eavesdropper," and "malicious attacker." the most commonly used names are: alice and bob, two parties who want to send messages to each other, occasionally joined by carol, a third participant eve, a passive attacker who is eavesdropping on alice and bob's conversation mallory, an
active attacker ("man-in-the-middle") who is able to modify their conversation and replay old messages ...
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
rolling and animation. in acronym order, the main tenets are: response respond to users immediately, acknowledging any user input in 100ms or less. animation when animating, render each frame in under 16ms, aiming for consistency and avoiding jank. idle when using the main javascript thread, work in chunks for less than 50ms to free up the thread for user interactions. load deliver inter
active content in less than 1 second. ...
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
as that of the browser overall. this also allows individuals to take advantage of modern multi-core processors. a special type of worker, called a service worker, can be created which can be left behind by a site—with the user's permission—to run even when the user isn't currently using that site. this is used to create sites capable of notifying the user when things happen while they're not
actively engaged with a site. such as notifying a user they have received new email even though they're not currently logged into their mail service. overall it can be observed these threads within our operating system are extremely helpful. they help minimise the context switching time, enables more efficient communication and allows further use of the multiprocessor architecture. ...
WebGL - MDN Web Docs Glossary: Definitions of Web-related terms
the khronos group maintains webgl, which is based on opengl es 2.0. you can invoke webgl within the html <canvas> element, which provides a rendering surface. all major browsers now support webgl, but its availability depends also on external factors (e.g. gpu support). ...
Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
rmance is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime. objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and inter
active. it is the frames per second and times the main thread is not available for user interactions. subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable feels slow or fast. learn more learn about web performance perceived performance ...
Accessible multimedia - Learn web development
ked to. in terms of actually creating the transcript, your options are: commercial services — you could pay a professional to do the transcription, see for example companies like scribie, casting words, or rev. look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively. community/grass roots/self transcription — if you are part of an
active community or team in your workplace, then you could ask them for help with doing the translations. you could even have a go at doing them yourself. automated services — there are ai services available, like trint or transcribear. upload a video/audio file to the site, and it automatically transcribes it for you. on youtube you can choose to generate automated captions/transcripts. depending on...
WAI-ARIA basics - Learn web development
content with three headings. it doesn't give you any idea of what the relationship is between the content. giving the user more clues as to the structure of the content is always good. to improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). we've updated the structure of the tabbed interface like so: <ul role="tablist"> <li class="
active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="
active-panel" role="tabpanel" aria-hidden="false"> ... </art...
Debugging CSS - Learn web development
eing inherited from a parent element and you need to add a rule to overwrite it in the context of this element. also useful is the ability to expand out shorthand properties. in our example the margin shorthand is used. click on the little arrow to expand the view, showing the different longhand properties and their values. you can toggle values in the rules view on and off, when that panel is
active — if you hold your mouse over it checkboxes will appear. uncheck a rule's checkbox, for example border-radius, and the css will stop applying. you can use this to do an a/b comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. the foll...
Pseudo-classes and pseudo-elements - Learn web development
to see what is being added to the document. reference section there are a large number of pseudo-classes and pseudo-elements, and it is useful to have a list to refer to. below are tables listing them, with links to their reference pages on mdn. use this as a reference to see the kind of things that are available for you to target. pseudo-classes selector description :
active matches when the user activates (for example clicks on) an element. :any-link matches both the :link and :visited states of a link. :blank matches an <input> element whose input value is empty. :checked matches a radio button or checkbox in the selected state. :current matches the element, or an ancestor of the element, that is currently being di...
Positioning - Learn web development
oning is your tool. or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? positioning makes such layout work possible. there are a number of different types of positioning that you can put into effect on html elements. to make a specific type of positioning
active on an element, we use the position property. static positioning static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and get your example set up for future sections, first add a class of positioned to the second <p> in the html: <p class="position...
Responsive design - Learn web development
s sizes as the layout goes to the two column version. on mobile the heading is smaller: on desktop, however, we see the larger heading size: note: see this example in action: example, source code. as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. they can be used to tweak any element to make it more usable or attr
active at alternate screen sizes. using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport. h1 { font-size: 6vw; } the problem with doing the above is that the user loses t...
How CSS is structured - Learn web development
le> <link rel="stylesheet" href="styles.css"> </head> <body> <p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file. as an altenative, you can also use the inter
active editor below. read on and have fun! selectors a selector targets html to apply styles to content. we have already discovered a variety of selectors in the getting started with css tutorial. if css is not applying to content as-expected, your selector may not match the way you think it should match. each css rule starts with a selector—or a list of selectors—in order to tell the browser...
Styling lists - Learn web development
the edge.</li> <li value="4">fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li value="6">wash and chop the salad.</li> <li value="8">fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this output: note: even if you are using a non-number list-style-type, you still need to use the equivalent numerical values in the value attribute.
active learning: styling a nested list in this
active learning session, we want you to take what you've learned above and have a go at styling a nested list. we've provided you with the html, and we want you to: give the unordered list square bullets. give the unordered list items and the ordered list items a line-height of 1.5 of their font-size. give the ordered list lower alphabetical bullets. ...
Typesetting a community school homepage - Learn web development
in the <section> a little bit of text-indentation, say 20px. links: give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page. make it so that links are underlined by default, but when you hover or focus them, the underline disappears. remove the default focus outline from all the links on the page. give the
active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design. make it so that external links have the external link icon inserted next to them. lists: make sure the spacing of your lists and list items works well with the styling of the overall page. each list item should have the same line-height as a paragraph line, and each list shou...
How do you make sure your website works properly? - Learn web development
web server often behaves quite differently from a local one, so it's a good idea to test your website once it's online. you might be surprised at how many problems come up: images don't show up, pages don't load or load slowly, and so on. most of the time it's no big deal, just a simple mistake or an issue with your web hosting configuration. let's see how to diagnose and solve those problems.
active learning there is no
active learning available yet. dig deeper test in your browser if you want to know whether your website works correctly, the first thing to do is fire up your browser and go to the page you want to test. uh-oh, where's the image? let's look at our personal website, http://demozilla.examplehostingprovider.net/. it's not showing the image we expected! open firefox's ne...
What do common web layouts contain? - Learn web development
om. also, the main content (a) matters most, so give it most of the space. these are rules of thumb you can draw on. there are complex designs and exceptions, of course. in other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. for now, it's best to keep your layout consistent throughout your site.
active learning there is no
active learning available yet. deeper dive let's study some more concrete examples taken from well-known websites. one-column layout invision application. a typical one-column layout providing all the information linearly on one page. quite straightforward. just remember, many people will still browse your site from desktops, so make your content usable/readab...
How can we design for all types of users? - Learn web development
il here. objective: universal design means design for everybody, regardless of disabilities or technical constraints. this article lists the most important quick-wins for universal design. summary when you're building a website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.
active learning there is no
active learning available yet. dig deeper color contrast to keep your text readable, use a text color that contrasts well with the background color. make it extra easy to read the text, to help visually-impaired people and people using their phones on the street. the w3c defines a good color mix with an algorithm that calculates luminosity ratio between foreground and ba...
How does the Internet work? - Learn web development
s-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. the various technologies that support the internet have evolved over time, but the way it works hasn't changed that much: internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.
active learning how the internet works in 5 minutes: a 5 minute video to understand the very basics of internet by aaron titus. how does the internet work? detailed well visualized 8 minute video. deeper dive a simple network when two computers need to communicate, you have to link them, either physically (usually with an ethernet cable) or wirelessly (for example with wifi or bluetooth systems)...
What is the difference between webpage, website, web server, and search engine? - Learn web development
one website may have several webpages, e.g., the science section (the website) will have books on heat, sound, thermodynamics, statics, etc. (the webpages). webpages can each be found at a unique location (url). the search index is like the search engine. each book has its own unique location in the library (two books cannot be kept at the same place) which is specified by the catalog number.
active learning there is no
active learning available yet. deeper dive so, let's dig deeper into how those four terms are related and why they are sometimes confused with each other. web page a web page is a simple document displayable by a browser. such documents are written in the html language (which we look into in more detail in other articles). a web page can embed a variety of different type...
How do I start to design my website? - Learn web development
ea and want to turn it into a website, there are a few questions you should answer before anything else: what exactly do i want to accomplish? how will a website help me reach my goals? what needs to be done, and in what order, to reach my goals? all of this is called project ideation and is a necessary first step to reach your goal, whether you are a beginner or an experienced developer.
active learning there is no
active learning available yet. deeper dive a project never starts with the technical side. musicians will never make any music unless they first have an idea of what they want to play—and the same is true for painters, writers, and web developers. technique comes second. technique is obviously critical. musicians must master their instrument. but good musicians can neve...
What are browser developer tools? - Learn web development
trl-click) an html element in the dom inspector and look at the context menu. the available menu options vary among browsers, but the important ones are mostly the same: delete node (sometimes delete element). deletes the current element. edit as html (sometimes add attribute/edit text). lets you change the html and see the results on the fly. very useful for debugging and testing. :hover/:
active/:focus. forces element states to be toggled on, so you can see what their styling would look like. copy/copy as html. copy the currently selected html. some browsers also have copy css path and copy xpath available, to allow you to copy the css selector or xpath expression that would select the current html element. try editing some of your dom now. double-click an element, or right-click it ...
What is a URL? - Learn web development
ue resource. such resources can be an html page, a css document, an image, etc. in practice, there are some exceptions, the most common being a url pointing to a resource that no longer exists or that has moved. as the resource represented by the url and the url itself are handled by the web server, it is up to the owner of the web server to carefully manage that resource and its associated url.
active learning there is no
active learning available yet. deeper dive basics: anatomy of a url here are some examples of urls: https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource). a url is composed of different parts, some...
What is a web server? - Learn web development
to produce the final webpages you see in the browser, the application server might fill an html template with content from a database. sites like mdn or wikipedia have thousands of webpages. typically, these kinds of sites are composed of only a few html templates and a giant database, rather than thousands of static html documents. this setup makes it easier to maintain and deliver the content.
active learning there is no
active learning available yet. deeper dive to review: to fetch a webpage, your browser sends a request to the web server, which searches for the requested file in its own storage space. upon finding the file, the server reads it, processes it as-needed, and sends it to the browser. let's look at those steps in more detail. hosting files first, a web server has to store t...
What is accessibility? - Learn web development
this article introduces the basic concepts behind web accessibility. prerequisites: none. objective: learn what accessibility is and why it matters. summary because of physical or technical limitations, maybe your visitors can't experience your website the way you hoped. in this article we give general accessibility principles and explain a few rules.
active learning there is no
active learning available yet. dig deeper accessibility: general principles we might associate accessibility at first with negative limitations. this building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement. that's a narrow way to think of accessibility. think of it as a wonderful way to empower people and ser...
What software do I need to build a website? - Learn web development
you need for web development for free. we'll provide a few links in this article. you'll need tools to: create and edit webpages upload files to your web server view your website nearly all operating systems by default include a text editor and a browser, which you can use to view websites. as a result, you usually only need to acquire software for transferring files to your web server.
active learning there is no
active learning available yet. dig deeper creating and editing webpages to create and edit a website, you need a text editor. text editors create and modify unformatted text files. other formats, like rtf, let you to add formatting, like bold or underline. those formats are not suitable for writing web pages. you should put some thought into which text editor you use, s...
Advanced form styling - Learn web development
meters and progress bars <meter> and <progress> are possibly the worst of the lot. as you saw in the earlier example, we can set them to a desired width relatively accurately. but beyond that, they are really difficu...
Example 2 - Learn web development
lass="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.
active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; ...
How to structure a web form - Learn web development
to the <fieldset> element, it's also common practice to use html titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. each separate section of functionality should be contained in a separate <section> element, with <fieldset> elements to contain radio buttons.
active learning: building a form structure let's put these ideas into practice and build a slightly more involved form — a payment form. this form will contain a number of control types that you may not yet understand. don't worry about this for now; you'll find out how they work in the next article (basic native form controls). for now, read the descriptions carefully as you follow the below instruc...
Other form controls - Learn web development
ing horizontally and vertically. horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the directionality of your text; read handling different text directions if you want to find out more.) play with the inter
active example at the top of the resize reference page for a demonstration of how these work. drop-down controls drop-down controls are a simple way to let users select from many different options without taking up much space in the user interface. html has two forms of drop down content: the select box, and the autocomplete box. in both cases the interaction is the same — once the control is activa...
Test your skills: Form validation - Learn web development
add an event listener that checks whether the inputted value is an email address, and whether it is long enough. if it doesn't look like an email address or is too short, provide the user with appropriate custom error messages. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Test your skills: Styling basics - Learn web development
e fonts, padding, margin, and sizing more consistent to begin with. on top of that, add in some nice, consistent styling for the inputs and button. use some kind of layout technique to make the inputs and labels line up neatly. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
UI pseudo-classes - Learn web development
s are hard to style, and why; to learn what can be done to customize them. what pseudo-classes do we have available? the original pseudo-classes available to us (as of css 2.1) that are relevant to forms are: :hover: selects an element only when it is being hovered over by a mouse pointer. :focus: selects an element only when it is focused (i.e. by being tabbed to via the keyboard). :
active: selects an element only when it is being activated (i.e. while it is being clicked on, or when the return/enter key is being pressed down in the case of a keyboard activation). these basic pseudo-classes should be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting con...
Example - Learn web development
xt field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on
active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text ...
Your first form - Learn web development
very thoughtful resource with good advice from basic best practices to complex concerns such as multi-page forms. in this article, we'll build a simple contact form. let's make a rough sketch. our form will contain three text fields and one button. we are asking the user for their name, their e-mail and the message they want to send. hitting the button will send their data to a web server.
active learning: implementing our form html ok, let's have a go at creating the html for our form. we will use the following html elements: <form>, <label>, <input>, <textarea>, and <button>. before you go any further, make a local copy of our simple html template — you'll enter your form html into here. the <form> element all forms start with a <form> element, like this: <form action="/my-handli...
Dealing with files - Learn web development
folder will contain all the images that you use on your site. create a folder called images, inside your test-site folder. styles folder: this folder will contain the css code used to style your content (for example, setting text and background colors). create a folder called styles, inside your test-site folder. scripts folder: this folder will contain all the javascript code used to add inter
active functionality to your site (e.g. buttons that load data when clicked). create a folder called scripts, inside your test-site folder. note: on windows computers, you might have trouble seeing the file names, because windows has an option called hide extensions for known file types turned on by default. generally, you can turn this off by going to windows explorer, selecting the folder options..
The web and web standards - Learn web development
e with what went before it (i.e. old web sites will still continue to work), and forwards compatible (future technologies in turn will be compatible with what we currently have). as you go through the learning material presented here, you'll start to learn how this is made possible with some very clever design and implementation work. being a web developer is good the web industry is a very attr
active market to enter if you are looking for a job. recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. and at the same time, there is a skill shortage in the industry — so what better time to learn web development? it isn't all fun and games however — building web sites is a more complicat...
Getting started with the Web - Learn web development
asics cascading stylesheets (css) is the code that you use to style your website. for example, do you want the text to be black or red? where should content be drawn on the screen? what background images and colors should be used to decorate your website? css basics takes you through what you need to get started. javascript basics javascript is the programming language that you use to add inter
active features to your website. some examples could be games, things that happen when buttons are pressed or data is entered in forms, dynamic styling effects, animation, and much more. javascript basics gives you an idea of what is possible with this exciting language, and how to get started. publishing your website once you have finished writing the code and organizing the files that make up your w...
Add a hitmap on top of an image - Learn web development
webpage. objective: learn how to make different regions of one image link to different pages. this article discusses client-side image maps only. do not use server-side image maps, which require the user to have a mouse. image maps, and their drawbacks when you nest an image inside <a>, the entire image links to one webpage. an image map, on the other hand, contains several
active regions (called "hotspots") that each link to a different resource. formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their performance and accessibility ramifications. text links (perhaps styled with css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility...
Use JavaScript within a webpage - Learn web development
javascript right from your html documents. prerequisites: you need to be familiar with how to create a basic html document. objective: learn how to trigger javascript in your html file, and learn the most important best practices for keeping javascript accessible. about javascript javascript is a programming language mostly used client-side to make webpages inter
active. you can create amazing webpages without javascript, but javascript opens up a whole new level of possibilities. in this article we're going over the html code you need to make javascript take effect. if you want to learn javascript itself, you can start with our javascript basics article. if you already know something about javascript or if you have a background with other programming language...
Use HTML to solve common problems - Learn web development
html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a webpage how to add video content to a webpage scripting & styling html only sets up document structure. to solve presentation issues, use css, or use scripting to make your page inter
active. how to use css within a webpage how to use javascript within a webpage embedded content how to embed a webpage within another webpage how to add flash content within a webpage uncommon or advanced problems beyond the basics, html is very rich and offers advanced features for solving complex problems. these articles help you tackle the less common use cases you may face: forms ...
Adding vector graphics to the Web - Learn web development
ng" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether. moreover, unless the svg and your current webpage have the same origin, you cannot use javascript on your main webpage to manipulate the svg.
active learning: playing with svg in this
active learning section we'd like you to simply have a go at playing with some svg for fun. in the input section below you'll see that we've already provided you with some samples to get you started. you can also go to the svg element reference, find out more details about other toys you can use in svg, and try those out too. this section is all about practisin...
Responsive images - Learn web development
ge/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> do not use the media attribute, unless you also need art direction. in a <source> element, you can only refer to images of the type declared in type. use comma-separated lists with srcset and sizes, as needed.
active learning: implementing your own responsive images for this
active learning, we're expecting you to be brave and go it alone ... mostly. we want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset. write some simple html to contain your code (use not-responsive.html as a starting point, if you like)...
Video and audio content - Learn web development
this example uses some javascript to allow users to choose between different subtitles. note that to turn the subtitles on, you need to press the "cc" button and select an option — english, deutsch, or español. note: text tracks also help you with seo, since search engines especially thrive on text. text tracks even allow search engines to link directly to a spot partway through the video.
active learning: embedding your own audio and video for this
active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. you may have to do some conversion to end up with a webm and mp4 in the case of video, a...
Introducing asynchronous JavaScript - Learn web development
rty this is because at the time the browser tries to run the third console.log() statement, the fetch() block has not finished running so the image variable has not been given a value. note: for security reasons, you can't fetch() files from your local filesystem (or run other such operations locally); to run the above example locally you'll have to run the example through a local webserver.
active learning: make it all async! to fix the problematic fetch() example and make the three console.log() statements appear in the desired order, you could make the third console.log() statement run async as well. this can be done by moving it inside another .then() block chained onto the end of the second one, or by simply moving it inside the second then() block. try fixing this now. note: if you...
Build your own function - Learn web development
your own, custom function. along the way, we'll also explain some useful details of dealing with functions. prerequisites: basic computer literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code. objective: to provide some practice in building a custom function, and explain a few more useful associated details.
active learning: let's build a function the custom function we are going to build will be called displaymessage(). it will display a custom message box on a web page and will act as a customized replacement for a browser's built-in alert() function. we've seen this before, but let's just refresh our memories. type the following in your browser's javascript console, on any page you like: alert('this is...
Functions — reusable blocks of code - Learn web development
sures, problems would occur. at best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. at worst, the lions and tigers might try to eat the penguins! the zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.
active learning: playing with scope let's look at a real example to demonstrate scoping. first, make a local copy of our function-scope.html example. this contains two functions called a() and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. it also contains a third function called output(), which takes a single parameter and ou...
Function return values - Learn web development
ollowing: ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); if the three random() calls returned the values 500, 200, and 35, respectively, the line would actually be run as if it were this: ctx.arc(500, 200, 35, 0, 2 * math.pi); the function calls on the line are run first, and their return values substituted for the function calls, before the line itself is then executed.
active learning: our own return value function let's have a go at writing our own functions featuring return values. first of all, make a local copy of the function-library.html file from github. this is a simple html page containing a text <input> field and a paragraph. there's also a <script> element, in which we have stored a reference to both html elements in two variables. this little page will...
Test your skills: Loops - Learn web development
, continue on to the next loop iteration. for each one that is a prime number, add it to the paragraph's textcontent along with some kind of separator. you should use a type of loop that you've not used in the previous two tasks. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the inter
active editors above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: ...
Drawing graphics - Learn web development
le will focus mainly on 2d canvas, as raw webgl code is very complex. we will however show how to use a webgl library to create a 3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl. note: basic canvas functionality is supported well across browsers, with the exception of ie 8 and below for 2d canvas, and ie 11 and below for webgl.
active learning: getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element. this element is used to define the area on the page into which the image will be drawn. this is as simple as including the element on the page: <canvas width="320" height="240"></canvas> this will create a canvas on the page with a size of 320 by 240 ...
Basic math in JavaScript — numbers and operators - Learn web development
guess what the value is before you type in the second line. note that you can quite happily use other variables on the right hand side of each expression, for example: let x = 3; // x contains the value 3 let y = 4; // y contains the value 4 x *= y; // x now contains the value 12 note: there are lots of other assignment operators available, but these are the basic ones you should learn now.
active learning: sizing a canvas box in this exercise, you will manipulate some numbers and operators to change the size of a box. the box is drawn using a browser api called the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 5...
Useful string methods - Learn web development
this returns "vanilla" in the console. but if you check the value of browsertype, it is still "mozilla". to actually update the value of the browsertype variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. so you'd have to actually write this: browsertype = browsertype.replace('moz','van');
active learning examples in this section we'll get you to try your hand at writing some string manipulation code. in each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. you don't need to understand arrays or loops right now — these will be explained in future articles. all you need to do in each case is write the code...
What is JavaScript? - Learn web development
objective: to gain familiarity with what javascript is, what it can do, and how it fits into a web site. a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, inter
active maps, animated 2d/3d graphics, scrolling video jukeboxes, etc. — you can bet that javascript is probably involved. it is the third layer of the layer cake of standard web technologies, two of which (html and css) we have covered in much more detail in other parts of the learning area. html is the markup language that we use to structure and give meaning to our web content, for example defi...
Adding features to our bouncing balls demo - Learn web development
rted. this assessment is quite challenging. read the whole assessment before you start coding, and take each step slowly and carefully. 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. project brief our bouncy ball demo is fun, but now we want to make it a little bit more inter
active by adding a user-controlled evil circle, which will eat the balls if it catches them. we also want to test your object-building skills by creating a generic shape() object that our balls and evil circle can inherit from. finally, we want to add a score counter to track the number of balls left to capture. the following screenshot gives you an idea of what the finished program should look like: ...
The "why" of web performance - Learn web development
t which a site loads is one factor. if the site is slow to react to user interaction, or appears janky, this causes site visitors to lose interest and trust. here's some real-world examples of performance improvements: tokopedia reduced render time from 14s to 2s for 3g connections and saw a 19% increase in visitors, 35% increase in total sessions, 7% increase in new users, 17% increase in
active users and 16% increase in sessions per user. rebuilding pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in seo traffic and a 15% increase in conversion rate to signup. to build websites and applications people want to use; to attract and retain site visitors, you need to create an accessible site that provides a good user experience. building webs...
Web performance - Learn web development
thods to reduce the number of bytes sent per image. multimedia: video the lowest hanging fruit of web performance is often media optimization. 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. javascript performance best practices javascript, when used properly, can allow for inter
active and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. this article outlines some javascript best practices that should be considered to ensure even complex content is as performant as possible. html performance features some attributes and the source order of your mark-up can impact the performance or yo...
Getting started with Ember - Learn web development
add-ons emberjs has a plugin architecture, which means that add-ons can be installed and provide additional functionality without much, if any, configuration. examples include: prember: static website rendering for blogs or marketing content. fastboot: server-side rendering, including improving search-engine optimization (seo), or improving initial render performance of complex, highly inter
active web pages. empress-blog: authoring blog posts in markdown while optimizing for seo with prember. ember-service-worker: configuring a pwa so that the app can be installed on mobile devices, just like apps from the device's respective app-store. native mobile apps ember can also be used with native mobile apps with a native-mobile bridge to javascript, such as that provided by corber. opinion...
Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. along the way, we'll look at using events in ember, creating component classes to contain javascript code to control inter
active features, and setting up a service to keep track of the data state of our app. prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line. a deeper understanding of modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them. objective: to learn how to create component c...
Framework main features - Learn web development
nt} times</button> ); } usestate() is a react hook which, given an initial data value, will keep track of that value as it is updated. the code will be initially rendered like so in the browser: <button>clicked 0 times</button> the usestate() call keeps track of the count value in a robust way across the app, without you needing to write code to do that yourself. events in order to be inter
active, components need ways to respond to browser events, so our applications can respond to our users. frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events. in react, listening for the click event requires a special property, onclick. let’s update our counterbutton code from above to allow it to count clicks: fu...
Accessibility in React - Learn web development
ss, and javascript languages, knowledge of the terminal/command line. objective: to learn about implementing keyboard accessibility in react. including keyboard users at this point, we've accomplished all of the features we set out to implement. a user can add a new task, check and uncheck tasks, delete tasks, or edit task names. and they can filter their task list by all,
active, or completed tasks. or, at least: they can do all of these things with a mouse. unfortunately, these features are not very accessible to keyboard-only users. let's explore this now. exploring the keyboard usability problem start by clicking on the input at the top of our app, as if you're going to add a new task. you'll see a thick, dashed outline around that input. this outline is your visua...
React interactivity: Events and state - Learn web development
nd state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed. prerequisites: familiarity with the core html, css, and javascript languages, knowledge of the terminal/command line. objective: to learn about handling events and state in react, and use those to start making the case study app inter
active. handling events if you've only written vanilla javascript before now, you might be used to having a separate javascript file, where you query for some dom nodes and attach listeners to them. for example: const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like thi...
Adding a new todo form: Vue events, methods, and models - Learn web development
empty string, the input will update as well. update your todoform component’s onsubmit() method to this: onsubmit() { if(this.label === "") { return; } this.$emit('todo-added', this.label); this.label = ""; } now when you click the "add" button, the "new-todo-input" will clear itself. summary excellent. we can now add todo items to our form! our app is now starting to feel inter
active, but one issue is that we've completely ignored its look and feel up to now. in the next article, we'll concentrate on fixing this, looking at the different ways vue provides to style components. previous overview: client-side javascript frameworks next in this module introduction to client-side frameworks framework main features react getting started with react beginning ...
Focus management with Vue refs - Learn web development
note: tabindex is a really powerful tool for handling certian accessibility problems. however, it should be used with caution. over-using tabindex="-1" can cause problems for all sorts of users, so only use it exactly where you need to. you should also almost never use tabindex > = 0, as it can cause problems for users since it can make the dom flow and the tab-order mismatch, and/or add non-inter
active elements to the tab order. this can be confusing to users, especially those using screen readers and other assistive technology. now that we have a ref and have let browsers know that we can programmatically focus the <h2>, we need to set focus on it. at the end of deletetodo(), use the listsummary ref to set focus on the <h2>. since the <h2> is always rendered in the app, you do not need to wo...
Vue resources - Learn web development
. this will create a new dist directory containing all of your production ready files. to publish your site to the web, copy the contents of this folder to your hosting environment. note: the vue cli docs also include a specific guide on how to publish your app to many of the common hosting platforms. vue 3 vue 3 is a major release of the framework with a lot of major changes. it went into
active beta in april, 2020. the biggest change is a new composition api that works as an alternative to the current property-based api. in this new api, a single setup() function is used on the component. only what you return from this function is available in your <template>s. you are required to be explicit about "re
active" properties when using this api. vue handles this for you using the options api...
Introduction to automated testing - Learn web development
ation menu. as you click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen resolution with which you want to test your website. as you click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations. once loaded, you can perform live, inter
active cross-browser testing with a website. if you notice an issue with the ui, then you can share it with your colleagues by capturing a screenshot of your vm with the screenshot button. you can also record a video of your test session by hitting the recorder button in your test session. with the in-built image editor, highlight your screenshot before you push it to your colleagues. using th...
Handling common HTML and CSS problems - Learn web development
ck.html (also see the source code). the button has a number of declarations that style, but the two we are most interested in are as follows: button { ... background-color: #ff0000; background-color: rgba(255,0,0,1); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), inset -1px -1px 3px rgba(0,0,0,0.4); } button:hover { background-color: rgba(255,0,0,0.5); } button:
active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.4); } here we are providing an rgba background-color that changes opacity on hover to give the user a hint that the button is inter
active, and some semi-transparent inset box-shadow shades to give the button a bit of texture and depth. the trouble is that rgba colors and box shadows don't work...
Strategies for carrying out testing - Learn web development
the keyboard — this also needs to be remedied. maybe we could use some javascript to implement a keyboard control for the toggle, or use some other method entirely? these test criteria are useful, because: they give you a set of steps to follow when you are performing tests. they can be easily turned into sets of instructions for user groups to follow when carrying out tests (e.g. "try to
active the button using your mouse, and then the keyboard...") — see user testing, below. they can also provide a basis for writing automated tests. it is easier to write such tests if you know exactly what you want to test, and what the success conditions are (see using an automation tool to automate browser testing, later in the series). putting together a testing lab one option for carrying out...
Deploying our app - Learn web development
t the changes to the repository. push the changes to github. to add changes, run the following command: git add . note the period at the end, it means “everything in this directory”. the git add . command is a bit of a sledgehammer approach — it will add all local changes you’ve worked on in one go. if you want finer control over what you add, then use git add -p for an inter
active process, or add individual files using git add path/to/file. now all the code is staged, we can commit; run the following command: git commit -m ’committing initial code’ note: although you're free to write whatever you wish in the commit message, there's some useful tips around the web on good commit messages. keep them short, concise, and descriptive, so they clearly describe...
Client-side tooling overview - Learn web development
nd, the framework’s javascript code works hard to interpret this custom syntax and render it as a final web app. post development post-development tooling ensures that your software makes it to the web and continues to run. this includes the deployment processes, testing frameworks, auditing tools, and more. this stage of the development process is one that you want the least amount of
active interaction with so that once it is configured, it runs mostly automatically, only popping up to say hello if something has gone wrong. testing tools these generally take the form of a tool that will automatically run tests against your code to make sure it is correct before you go any further (for example, when you attempt to push changes to a github repo). this can including linting, but also...
Tools and testing - Learn web development
chain together, how to install them using package managers, and control them using the command line. we finish up by providing a complete toolchain example showing you how to get productive. understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, inter
active web applications. many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. 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 dev...
Accessibility Features in Firefox
ially for this new powerful world of "web applications". a web application may be an easier-to-use online tax assistant, a web calendar or a live sports statistics page, which is familiar in that it acts much like a desktop application. whether the current buzzword for this technology is "dhtml", "ajax" or "web 2.0" doesn't really matter. this fact remains: the web is changing to become more inter
active and less like a bunch of plain documents. firefox is currently the only browser to support the newly evolving standards for making these web applications accessible. companies such as yahoo! have announced they are already working with the technology their new richer interfaces accessible with this new technology. developers, please see our dhtml accessibility documentation and get involved in wr...
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are often not even keyboard focusable, and assistive technologies do not understand these widgets. this document shows several inter
active desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility. mozilla accessibility architecture this document explains how we implement the cross-platform accessibility layer in mozilla. it contains a class hierararchy and an explan...
CSUN Firefox Materials
ially for this new powerful world of "web applications". a web application may be an easier-to-use online tax assistant, a web calendar or a live sports statistics page, which is familiar in that it acts much like a desktop application. whether the current buzzword for this technology is "dhtml", "ajax" or "web 2.0" doesn't really matter. this fact remains: the web is changing to become more inter
active and less like a bunch of plain documents. firefox is currently the only browser to support the new evolving standards for making these web applications accessible. companies such as yahoo! have announced they are already working with the technology their new richer interfaces accessible with this new technology. sun contributes code to improve accessibility on unix a similar story occurred at sun...
Embedding API for Accessibility
comments/questions? please contact the mozilla accessibility community. mozilla needs to move in the direction of accessibility. here is the w3c's definition of accessibility for a user agent like mozilla. in part, being accessible means supporting a built-in accessibility apis for a platform, such as microsoft
active accessibility or atk for linux and unix desktops. there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font sizes. mozilla already supports some of these options. this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settex...
Information for Assistive Technology Vendors
a & call for testers! mozilla now has enough accessibility support that we're reading for early adopters and testers to start giving it a try. please read this page if you're interested in an alternative accessible browser. keyboard documentation this lists mozilla's keyboard docs in a single long document. gecko info for windows accessibility vendors mozilla supports msaa (microsoft
active accessibility) in html and in our user interface (based on xul technology). this makes it possible for the vendors of windows accessibility software, such as screen readers, voice dictation packages and screen magnifiers to provide support for mozilla. in addition, we provide some simple interfaces via which we expose a read-only dom (document object model). mozilla support for linux/unix assi...
Information for External Developers Dealing with Accessibility
accessibility api cross reference should be helpful at anyone looking at implementing accessibility api support for a product on multiple platforms. contains info on accessible roles, states and events. accessible toolkit checklist a list of what needs to be done for accessibility when building new toolkits, widget by widget. ...
Application cache implementation overview
lementation of offline cache update is in /uriloader/prefetch. nsofflinecacheupdateservice is used to collect, schedule and generally take care of updates and its queue. only one update is running at the time. nsofflinecacheupdate it self is the core of the update process. during initiation the update is first looking for an existing nsiapplicationcache object using nsiapplicationcacheservice::get
activecache() with the manifest url to load from as an argument. when found, this update is processing an “update” and this cache is used as a cache to satisfy each manifest item and the manifest it self load from. otherwise, this is “first download”. then creates a new nsiapplicationcache for the given manifest url using nsiapplicationcacheservice::createapplicationcache(). this new cache versi...
Command line options
ox, thunderbird and seamonkey2.x only. "profile_path" can either be an absolute path ("/path/to/profile") or a relative path ("path/to/profile"). note: on mac os x specifying a relative path is not supported anymore from firefox 4.0 and up due to a regression, see bug 673955. browser -browser start with the browser component. firefox and seamonkey only. -foreground make this instance the
active application. -new-tab url open url in a new tab. firefox and seamonkey2.x only. -new-window url open url in a new window. firefox and seamonkey2.x only. --kiosk url open url full screen without user interface. firefox 71 and later. -preferences open options/preferences window. firefox and seamonkey2.x only. -private opens firefox in permanent private browsing mode. firefox 3.6 and later...
Debugging on Mac OS X
s, etc. so that you're not bothered with the profile manager every time you start to debug, expand the "executables" branch of the "groups & files" list and double click on the executable you added for mozilla. click the plus icon under the "arguments" list and type "-p <profile name>" (e.g. "-p mozilladebug"). close the window when you're done. running a debug session make sure breakpoints are
active (which implies running under the debugger) by opening the product menu and selecting "debug / activate breakpoints" (also shown by the "breakpoints" button in the top right section of the main window). then click the "run" button or select "run" from the product menu. setting breakpoints setting a breakpoint is easy. just open the source file you want to debug in xcode, and click in the margin ...
The Firefox codebase: CSS Guidelines
erwards, check the specificity of the other selector; if it is causing your rule to be overriden, you can try reducing its specificity, either by simplifying the selector or by changing where the rule is placed in the stylesheet. if this isn't possible, you can also try introducing a :not() to prevent the other rule from applying, this is especially relevant for different element states (:hover, :
active, [checked] or [disabled]). however, never try to increase the selector of the rule you are adding as it can easily become hard to understand. finally, once you have checked all the things above, you can permit yourself to use !important along with a comment why it is needed. using css variables adding new variables before adding new css variables, please consider the following questions: i...
Creating Custom Events That Can Pass Data
handle to the window nscomptr<nsidomdocument> adoc; // a handle to the document nscomptr<nsidomeventtarget> twindow; // the target window (really the same window as above but you need // a different inteface :/ nscomptr<nsidomevent> event; //this will be the event we throw. nscomptr<nsidommyevent> myevent; //this is a handle to the your inteface to the event. wwatcher->get
activewindow(getter_addrefs(awindow)); //get the
active window. awindow->getdocument(getter_addrefs(adoc)); //get the document from the window. nscomptr<nsidomdocumentevent> docevent = do_queryinterface(adoc); //change interfaces so you can create interfaces. docevent->createevent(ns_literal_string("nsdommyevent"), getter_addrefs(event)); //create the event event->initevent(ns_litera...
Eclipse CDT Manual Setup
. eclipse cdt will try to format c/c++ code that you add as you type. however, its default formats are not a good match to mozilla's style rules. download this first pass at an eclipse formatter configuration for mozilla c/c++ coding style, and install it by opening the workspace preferences, selecting "c/c++ > code style > formatter", and then using the "import" button to import that file. the "
active profile" field should then automatically change to "mozilla". depending on the area of the code that you work on, you may need to tweak this configuration using the "edit" button. (note that the format settings under "general > editors > text editors" have no effect in c/c++ views, since the c/c++ settings are more specific and override those settings. however, you may still want to tweak those s...
Developer guide
tips a place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases. firefox source docs web-hosted documentation built from the mozilla-central source code. tools bugzilla the bugzilla database used to track issues for mozilla projects. dxr next generation of searching mozilla's source code. in
active development. searchfox another option for mozilla code searching. indexes js as well as c++, includes blame capabilities. in
active development. mozilla build vm a virtualbox compatible virtual machine configured with all the software needed to build and work on firefox. taskcluster taskcluster is the task execution framework that supports mozilla's continuous integration and release proces...
Limitations of chrome scripts
perty of the nsiwebprogress object passed into onstatechange. however, the domwindow is passed asynchronously, so by the time the chrome process receives it, the dom might have changed (for example, because code running in the content process modified it or we navigated to a different page). we're working on fixing this issue in bug 1118880. also note that unlike other shims, this shim is always
active. alternatively, you can use nsiwebprogresslistener in the content process. observers in the chrome process depending on the topic, you need to register observers in either the chrome process or in a frame script. for most topics you need to register observers in the chrome process. however, you must listen to content-document-global-created and document-element-inserted in a frame script. ob...
mozbrowsersecuritychange
ceived over an insecure channel. trackingstate a domstring representing the current loading state of tracking content. possible values are: loaded_tracking_content: indicates that the tracking content has been loaded. blocked_tracking_content: indicates that the tracking content has been blocked from loading. mixedstate a domstring representing the current loading state of mixed
active content. possible values are: loaded_mixed_
active_content: indicates that the mixed
active content has been loaded. blocked_mixed_
active_content: indicates that the mixed
active content has been blocked from loading. extendedvalidation a boolean indicating if the current ssl certificate is an extended validation certificate (true) or not (false). trackingcontent a boolean indicating...
Browser API
sed by a browser <iframe>. these are especially useful for implementing tabbed browser application. htmliframeelement.setvisible() changes the visibility state of a browser <iframe>. this can influence resource allocation and some function usage such as requestanimationframe. htmliframeelement.getvisible() indicates the current visibility state of the browser <iframe>. htmliframeelement.set
active() sets the current <iframe> as the
active frame, which has an effect on how it is prioritized by the process manager. htmliframeelement.get
active() indicates whether the current browser <iframe> is the currently
active frame. audio-related methods the following methods allow direct control of sound in the browser element. htmliframeelement.getvolume() gets the current volume of the brow...
Gecko
dom events, see the dom event reference. introduction to layout in mozilla tech talk on layout. embedding mozilla using gecko in your own application. character sets supported by gecko a list of the character sets supported by gecko. html parser threading description of multithreading in the html parser. gecko home page on mozillawiki home for the
active developers. roadmaps and more up-to-date resources. view all… community view mozilla forums: mailing list newsgroup rss feed related topics web standards xul embedding mozilla developing mozilla ...
How to get a process dump with Windows Task Manager
iencing a hang. this article describes how to get a process dump with task manager on windows. (to get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instructions.) caution the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of
active tabs, history information, and possibly even passwords depending on what you are doing when the snapshot is taken. it is advisable to create a new, blank profile to use when reproducing the hang and capturing the memory dump. please ask for help doing this! requirements windows to get a process dump, you need to be using windows vista or above. a firefox nightly or release you need a f...
Addon
state of this add-on; see nsiblocklistservice for possible values. creator read only addonauthor the creator of the add-on. foreigninstall read only boolean true or false depending on whether the add-on is a third party add-on installation or not. id read only string the id of the add-on. no other installed add-on will have the same id. is
active read only boolean true if the add-on is currently functional. for some add-ons this will change immediately based on the appdisabled and userdisabled properties; for others it will only change after an application restart. iscompatible read only boolean true or false depending on whether the add-on is compatible with the current application version and platform version. ...
InstallListener
epresenting the install oninstallstarted() called when installation of an add-on begins. a listener may return false to cancel the install. void oninstallstarted( in addoninstall install ) parameters install the addoninstall representing the install oninstallended() called when installation of an add-on is complete. the newly installed add-on may require a restart in order to become
active. void oninstallended( in addoninstall install in addon addon ) parameters install the addoninstall representing the install addon the addon addon that has been installed oninstallcancelled() called when installation is cancelled. void oninstallcancelled( in addoninstall install ) parameters install the addoninstall representing the install oninstallfailed() called when t...
Download
); parameters none. promise resolves to undefined when the partial data has been successfully removed. whensucceeded() returns a promise that is resolved as soon as this download finishes successfully, even if the download was stopped and restarted meanwhile. you can use this property for scheduling download completion actions in the current session, for downloads that are controlled inter
actively. if the download is not controlled inter
actively, you should use the promise returned by the start() method instead, to check for success or failure. promise whensucceeded(); parameters none. promise resolves to undefined when the download has finished successfully and you can access the target file. promise can be rejected with never rejected. finalize() ensures that the download is ...
Following the Android Toasts Tutorial from a JNI Perspective
. it will use the jni.jsm module that is available in firefox for android since version 17. this article teaches developers how to port java code to jni by reading the java and android documentation. toast description a toast provides simple feedback about an operation in a small popup. it only fills the amount of space required for the message, and the current activity remains visible and inter
active. for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later. toasts automatically disappear after a timeout. toasts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast documentation. java code let's start with the following java code, which invoke...
PopupNotifications.jsm
ctions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not. methods locationchange() the consumer can call this method to let the popup notification module know that the current browser's location has changed. this lets the notification service update the
active notifications as appropriate. note: you shouldn't need to call this when using the popupnotifications object in firefox windows; firefox code takes care of this automatically. void locationchange(); parameters none. getnotification() retrieve a notification object associated with the browser/id pair. notification getnotification( string id xulelement browser ); parameters id the n...
Bootstrapping a new locale
ttps://mozilla-l10n.github.io/localizer-documentation/ . to learn how to bootstrap a new locale for mozilla projects, please see those documents. in mozilla, we use the the mercurial version control system (hg) to help manage our localizations. when a localization team is registered and your hg repository is set up for a locale, you can then clone the existing mozilla release branch (i.e. where
active development of the upcoming release of firefox occurs) and then begin the necessary work for translation. hg allows localizers to work locally on their machines and then "push" changes to their official mozilla repository. installing mercurial depending on your operating system, you will need to install the correct version of hg on your machine. this document will give you the basic informati...
L10n testing with xcode
rs their finger over the button. to view these strings, you'll need to start the accessibility inspector within the ios simulator by doing the following. in the ios simulator, press the home button from the hardware toolbar menu. navigate to the settings app, open it, and go to general > accessibility. slide the accessibility inspector switch to on. the accessibility inspector remains
active until you turn it off, even if you quit and restart ios simulator. press the home button again, navigate to the pane with your firefox for ios localization on it, and reopen firefox. now, you can navigate through the firefox app in the ios simulator, viewing both ui elements and accessibility strings as you go. congratulations, now your testing your app! see, that wasn't so hard, right...
Localizing with Koala
es, which compares the files from en-us with your files in x-testing and gives you statistics about new, changed, missing and obsolete files and strings. let's see how that works. running a comparison open koala's start page. select firefox (3.6) in application column. select en-us (included) in original locale column. select x-testing (3.6) in user locale column. the buttons on the right become
active. click "compare". a dialog will appear letting you know that koala is comparing en-us with x-testing. when the comparison is done, you should see a new line in "last used compares" section of koala's startpage. it's a handy shortcut to run the comparison in the future. if the sidebar with the results of the comparison doesn't show up automatically: open the projects sidebar by choosing view ...
Release phase
eleases/l10n-central/x-testing in your browser to see the new changeset in the remote repository. troubleshooting ssh if pushing fails, make sure your ~/.ssh/config has the correct user set under the hg.mozilla.org host. this should be your mozilla ldap account name. next, try issuing the following command: $ ssh hg.mozilla.org if ssh is working fine, you should see the following message: no inter
active shells allowed here! connection to hg.mozilla.org closed. if you don't see this message, try running the same command in a more verbose mode (with the debugging information): $ ssh -vvv hg.mozilla.org this should tell you why your connection is not succeeding. if you can't figure it out on your own, copy the output of the above command, paste it on http://pastebin.mozilla.org and ask in #l10n on...
Creating localizable web applications
may choose to use a different form, like gerund (much like "logging in"). gettext's context feature allows the developer to distinguish between two identical english strings and disambiguate the translation. use gettext plurals whenever you put numbers in your messages, make it possible to use different singular and plural forms. snippet 1. bad: print '<p class="numb-users">' . sprintf(_("%d
active daily users"), number_format($persona['popularity'])) . '</p>'; snippet 2. good: print '<p class="numb-users">' . sprintf(ngettext("%d
active daily user", "%d
active daily users"), number_format($persona['popularity'])) . '</p>'; one might argue that adding plural support here is not necessary because, for instance, the number of daily users in the exam...
MathML Demo: <mspace> - space
mathml demo: <mspace> - space the background color of <mspace> elements has been set to yellow for easier viewing. you can set the width ∑ x y height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set). inter
active sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. <br /> height <a class="control" href="javascript:upheight();" title="increase height">+</a>/ <a class="control" href="javascript:downheight();" title="decrease height">-</a> width <a class="control" href="javascript:upwidth();" title="increase width">+</a>/ <a class="control" href="javascript:downwidth();" title="decrease width">-</a> depth <a class="control" ...
Mozilla Development Tools
g. naturally, source code for all of these tools is also available. the tools needed to build mozilla are described on the build page for your platform. mozilla source code (mercurial and cvs) "trunk" development for gecko 1.9.1/firefox 3.5 and beyond uses the mercurial source code version control system. earlier releases and other products use the cvs version control system. if you are doing
active development, checking out source code from one of these is preferable to downloading an archived snapshot, as you get up-to-the-minute changes. mxr you can browse the up-to-the-minute latest version of the source code online through a massively-hyperlinked source code browser (based on lxr) that lets you cross-reference function and variable names. bonsai bonsai is tree control (get it?
Mozilla Quirks Mode Behavior
35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :
active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work. pr...
DMD
s. "heap scanning" mode. this mode is like live mode, but it also records the contents of every live block in the log. this can be used to investigate leaks by figuring out which objects might be holding references to other objects. building and running nightly firefox the easiest way to use dmd is with the normal nightly firefox build, which has dmd already enabled in the build. to have dmd
active while running it, you just need to set the environment variable dmd=1 when running. for instance, on osx, you can run something like: dmd=1 /applications/firefox\ nightly.app/contents/macos/firefox you can tell it is working by going to about:memory and looking for "save dmd output". if dmd has been properly enabled, the "save" button won't be grayed out. look at the "trigger" section below to ...
TraceMalloc
s in mozilla, too). to enable tracemalloc in your build, configure with --enable-trace-malloc. the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary format to the given file. if filename is -, nothing is written to a file, but tracemalloc will be
active and will track live allocations and their stack traces. --shutdown-leaks=filename on shutdown, the application will save live allocations (with stack traces) to the given file. analyzing the trace-malloc log tools such as bloatblame (tools/trace-malloc/bloatblame.cpp) can be used to process filename. try running with the unified output format option, -u. the output is a large html file that hy...
about:memory
alloc). here is an example for a browser session where tabs were open to cnn.com, techcrunch.com, and arstechnica.com. various sub-trees have been expanded and others collapsed for the sake of presentation. ...
Performance
command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups. turbostat (linux-only) turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-cpu measurements such as frequencies and c-states. powertop (linux-only) powertop is an inter
active command-line utility that gathers and displays various power-related measurements. related topics javascript, xpcom, developing mozilla, extensions, addons ...
accessibility.tabfocus
the preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key. note: on mac os x, if this preference is not set, the full keyboard access setting in system preferences > keyboard is honored. type:integer default value: 7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status:
active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields. 4 give focus only to links and linked images. other you can add these values to combine their functionality. the value 7 (give focus to all elements) is the default on windows and linux. ...
browser.altClickSave
the preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link. type:boolean default value: false exists by default: yes application support:firefox 13.0 status:
active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug 713052 values true clicking a link while holding the alt key starts the download of that link. false (default) no action triggered (see bug 736985). ...
browser.dom.window.dump.file
browser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. changes require an application restart. type:string default value:none exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status:
active; last updated 2012-03-18 introduction: pushed to nightly on 2009-04-24 bugs: bug 489938 values the value holds the file system path for the file in which the content of the window.dump() calls get written, e.g. c:\dump.txt . it will be created if it doesn't exist yet. the line breaks have to be in the argument of the dump function, else successive dump calls will get logged into the same line. related browser.do...
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base. if set to true, the data is stored as content preference. type:boolean default value:true exists by default: no application support:firefox 11.0 status:
active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. false the last used directory for any download (stored in browser.download.lastdir) will be the preselected dire...
browser.pagethumbnails.capturing_disabled
the 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. type:boolean default value:true exists by default: no application support: firefox 14.0 status:
active; last updated 2012-09-17 introduction: pushed to nightly on 2012-04-13 bugs: bug 726347 values false the application creates screenshots of visited web pages. true (default) the application doesn't create screenshots of visited web pages. ...
browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background. 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. false (default) new tab with search results will be opened in the foreground. ...
browser.urlbar.formatting.enabled
the preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey. type:boolean default value: true exists by default: yes application support:firefox 6.0 status:
active; last updated 2012-04-03 introduction: pushed to nightly on 2011-05-03 bugs: bug 451833 values true (default) the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey. false all parts of the url are given the same color: black. ...
browser.urlbar.trimURLs
the preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden. type:boolean default value: true exists by default: yes application support:firefox 7.0 status:
active; last updated 2012-04-03 introduction: pushed to nightly on 2011-06-23 bugs: bug 665580 values true (default) if the
active url is exactly the domain name, the trailing slash (/) behind the top level domain will be hidden. if the address starts with http:// and neither starts with a ftp. subdomain nor contains @ (usually for ftp login information), the http:// prefix will be hidden. examples: https://www.example.org/ becomes https://www.example.org, http://www.example.org/foobar becomes www.examp...
dom.event.clipboardevents.enabled
lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected. the emitting of the oncopy, oncut and onpaste events are controlled by this preference. type:boolean default value:true exists by default: no application support: gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) status:
active; last updated 2012-02-15 introduction: pushed to nightly on 2012-02-14 bugs: bug 542938 values true (default) the oncopy, oncut and onpaste events are enabled for web content. false the oncopy, oncut and onpaste events are disabled for web content. ...
javascript.options.showInConsole
the preference javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console. type:boolean default value: false (true in debug builds) exists by default: yes application support:firefox 1.0 status:
active introduction:2002-02-26 bugs: bug 125181 bug 337875 values false only errors and warnings from content code are shown. true (default) errors and warnings from both chrome and content are shown in the error console. note: since the web console was introduced in firefox 4 specifically for debugging content, the default value for this preference has changed to true as of gecko 2.0. ...
mail.tabs.drawInTitlebar
starting in thunderbird 17.0, the tabs are drawn in the title bar. the old behavior can be restored by setting the preference mail.tabs.drawintitlebar to false. type:boolean default value: true exists by default: yes application support:thunderbird 17.0 status:
active; last updated 2012-09-17 introduction: pushed to daily on 2012-08-08 bugs: bug 771816 values true (default) the tabs are drawn in the title bar of the mail program. false the tabs are drawn in a separate tab bar, and the title bar shows the title of the current tab (e.g. the subject of the currently selected mail). ...
nglayout.debug.disable xul fastload
the preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used. never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debugging. in particular, add-ons should never change this preference.. type:boolean default value: false (true in debug builds) exists by default: yes application support:? status:
active introduction:? bugs: values false (default) xul fastload is used. true xul fastload is disabled. ...
reader.parse-on-load.force-enabled
the preference reader.parse-on-load.force-enabled controls if the reader mode used in firefox mobile should be enabled independent of the memory available in the device. by default, the reader mode in firefox mobile is only enabled if the memory is greater than 384mb. type:boolean default value: false exists by default: yes application support:firefox mobile 23.0 status:
active; last updated 2013-05-11 introduction: pushed to nightly on 2013-05-06 bugs: bug 867875 values true reader mode is enabled independent of memory available. false (default) reader mode is only enabled if memory available exceeds a threshold (currenlty 384mb). ...
ui.SpellCheckerUnderline
ui.spellcheckerunderline holds the colour which is used to underline words not recognized by the spellchecker. type:string default value:#ff0000 exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status:
active; last updated 2012-02-21 introduction: pushed to nightly on 2009-04-03 bugs: bug 338209 values a color code like #ff0000 for red. ...
ui.SpellCheckerUnderlineStyle
ui.spellcheckerunderlinestyle holds the style which is used to underline words not recognized by the spellchecker. type:integer default value:5 exists by default: no application support: gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) status:
active; last updated 2012-02-22 introduction: pushed to nightly on 2009-04-03 bugs: bug 338209 values the values are defined in nsstyleconsts.h. 0 no underlining 1 dotted 2 dashed 3 single solid line 4 two solid lines 5 (default) wavy ...
ui.alertNotificationOrigin
ui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in. ...
ui.textSelectBackground
ui.textselectbackground saves the color in which the background of a text selection in the user interface or in content will be styled. ...
ui.textSelectForeground
ui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled. ...
ui.tooltipDelay
ui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip. type:integer default value:500 exists by default: no application support: gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) status:
active; last updated 2012-02-21 introduction: pushed to nightly on 2011-12-15 bugs: bug 204786 values integer (milliseconds, default: 500) the time for delay between the mouse stopping over the element and the tooltip appearing is stored in milliseconds and the default value is 500ms. ...
view_source.syntax_highlight
the preference view_source.syntax_highlight controls whether markup in the view source view is syntax highlighted. type:boolean default value: true exists by default: yes application support:firefox 1.0 status:
active introduction: bugs: bug 52154 values true (default) syntax hightlighting is enabled. false syntax hightlighting is disabled. ...
Optimizing Applications For NSPR
ts of them (100s or even 1000s) is unrealistic. <tt>pr_interrupt()</tt> is not implemented. win-nt the win-nt port of nspr takes advantage of some of the features of nt that are not available in win-95, such as fibers and asynch i/o. the implementation is well suited for high performance application, such as a server, but clients may find the win-95 version more suited (and adequate) for inter
active applications such as are prevalent on today's workstations. the nt version implements a mxn threading model, using native nt threads as the virtual processors and nt's fiber abstraction as the locally scheduled threads. the fibers are nice because much of the nt api understands them. but they are not really preemptable, and that can lead to problems, depending on the needs of your application. ...
PR_NewTCPSocket
c object created for the newly opened ipv4 tcp socket. if the creation of a new tcp socket failed, null. description tcp (transmission control protocol) is a connection-oriented, reliable byte-stream protocol of the tcp/ip protocol suite. pr_newtcpsocket creates a new ipv4 tcp socket. a tcp connection is established by a passive socket (the server) accepting a connection setup request from an
active socket (the client). typically, the server binds its socket to a well-known port with pr_bind, calls pr_listen to start listening for connection setup requests, and calls pr_accept to accept a connection. the client makes a connection request using pr_connect. after a connection is established, the client and server may send and receive data between each other. to receive data, one can call pr_r...
PR_OpenTCPSocket
for the newly opened tcp socket. if the creation of a new tcp socket failed, null. description tcp (transmission control protocol) is a connection-oriented, reliable byte-stream protocol of the tcp/ip protocol suite. pr_opentcpsocket creates a new tcp socket of the address family af. a tcp connection is established by a passive socket (the server) accepting a connection setup request from an
active socket (the client). typically, the server binds its socket to a well-known port with pr_bind, calls pr_listen to start listening for connection setup requests, and calls pr_accept to accept a connection. the client makes a connection request using pr_connect. after a connection is established, the client and server may send and receive data between each other. to receive data, one can call pr_r...
NSS FAQ
s-it, ncipher, and rainbow technologies also support this interface, nss-enabled applications can support a wide variety of hardware accelerators. how do i integrate smart cards into my application using nss? nss supports the pkcs #11 interface for smart card integration. applications that use the pkcs #11 interface provided by nss will therefore support smart cards from leading vendors such as
activecard, litronic, safenet, and secureid technologies that also support the pkcs #11 interface. does nss require netscape portable runtime (nspr)? to provide cross-platform support, nss utilizes netscape portable runtime (nspr) libraries as a portability interface and implementation that provides consistent cross-platform semantics for network i/o and threading models. you can use nspr throughout y...
Index
slots on the named module. use the -slot argument to disable a specific slot. -enable modulename enable all slots on the named module. use the -slot argument to enable a specific slot. -fips [true | false] enable (true) or disable (false) fips 140-2 compliance for the default nss module. -force disable modutil's inter
active prompts so it can be run from a script. use this option only after manually testing each planned operation to check for warnings and to ensure that bypassing the prompts will cause no security lapses or loss of database integrity. -jar jar-file add a new pkcs #11 module to the database using the named jar file. use this comman...
NSS 3.18.1 release notes
d:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a the following ca certificate was removed after discussion about it in the mozilla.dev.security.policy forum. cn = e-guven kok elektronik sertifika hizmet saglayicisi sha1 fingerprint: dd:e1:d2:a9:01:80:2e:1d:87:5e:84:b3:80:7e:4b:b1:fd:99:41:34 the following intermediate ca certificate has been added as
actively distrusted because it was misused to issue certificates for domain names the holder did not own or control. cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:76:98:65:c4: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...
NSS 3.24 release notes
uthtype to define a larger number of authentication key types. deprecate the member attribute authalgorithm of type sslciphersuiteinfo. instead, applications should use the newly added attribute authtype. rename ssl_auth_rsa to ssl_auth_rsa_decrypt. add a shared library (libfreeblpriv3) on linux platforms that define freebl_lowhash. remove most code related to ssl v2, including the ability to
actively send a sslv2-compatible client hello. however, the server-side implementation of the ssl/tls protocol still supports processing of received v2-compatible client hello messages. disable (by default) nss support in optimized builds for logging ssl/tls key material to a logfile if the sslkeylogfile environment variable is set. to enable the functionality in optimized builds, you must define the s...
NSS 3.34.1 release notes
le changes in nss 3.34.1 the following ca certificate was re-added. it was previously removed in nss 3.34, but now re-added with only the email trust bit set. (bug 1418678) cn = certum ca, o=unizeto sp. z o.o. sha-256 fingerprint: d8:e0:fe:bc:1d:b2:e3:8d:00:94:0f:37:d2:7d:41:34:4d:99:3e:73:4b:99:d5:65:6d:97:78:d4:d8:14:36:24 removed entries from certdata.txt for
actively distrusted certificates that have expired (bug 1409872). the version of the ca list was set to 2.20. 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 c...
NSS tools : modutil
name disable all slots on the named module. use the -slot argument to disable a specific slot. the internal nss pkcs #11 module cannot be disabled. -enable modulename enable all slots on the named module. use the -slot argument to enable a specific slot. -fips [true | false] enable (true) or disable (false) fips 140-2 compliance for the default nss module. -force disable modutil's inter
active prompts so it can be run from a script. use this option only after manually testing each planned operation to check for warnings and to ensure that bypassing the prompts will cause no security lapses or loss of database integrity. -jar jar-file add a new pkcs #11 module to the database using the named jar file. use this command with the -installdir and -tempdir arguments. the jar file use...
NSS Tools
newsgroup: mozilla.dev.tech.crypto overview the nss security tools allow developers to test, debug, and manage applications that use nss. the tools information table below describes both the tools that are currently working and those that are still under development. the links for each tool take you to the source code, documentation, plans, and related links for each tool. the links will become
active when information is available. currently, you must download the nss 3.1 source and build it to create binary files for the nss tools. for information about downloading the nss source, see https://developer.mozilla.org/nss/building. if you have feedback or questions, please feel free to post to mozilla.dev.tech.crypto. this newsgroup is the preferred forum for all questions about nss and nss to...
NSS tools : modutil
slots on the named module. use the -slot argument to disable a specific slot. -enable modulename enable all slots on the named module. use the -slot argument to enable a specific slot. -fips [true | false] enable (true) or disable (false) fips 140-2 compliance for the default nss module. -force disable modutil's inter
active prompts so it can be run from a script. use this option only after manually testing each planned operation to check for warnings and to ensure that bypassing the prompts will cause no security lapses or loss of database integrity. -jar jar-file add a new pkcs #11 module to the database using the named jar file. use this comman...
Necko walkthrough
tringhashkey, nsconnectionentry> called mct in nshttpconnectionmgr. if a connection entry already exists matching the required conn info, then that one will be used; otherwise a new one is created (makenewconnection - creates socket etc.). note: nsconnectionentry has a single nshttpconnectioninfo object attached, a pending queue of nshttptransactions, and 3 arrays for connections:
active nshttpconnections idle nshttpconnections nshalfopensockets nshttpconnectionmgr::trydispatchtransaction there is a series of decisions about whether dispatchtransaction is called, along with good code comments: best to read the code for more detail. basically, if a connection is available... nshttpconnectionmgr::dispatchtransaction nshttpconnectionmgr::disp...
Rhino community
please use the new group instead, but the old one may be of historical interest. ...
Rhino documentation
downloads archive includes release notes for rhino releases optimization details on the various optimization levels. faq answers to frequently asked questions about rhino. rhino history history of the beast. writing scripts scripting java how to use rhino to script java classes. performance hints some tips on writing faster javascript code. javascript tools rhino shell inter
active or batch execution of scripts. javascript debugger debugging scripts running in rhino. javascript compiler compiling scripts into java class files. running the rhino tests running the javascript test suite with rhino. embedding rhino embedding tutorial a short tutorial on how to embed rhino into your application. api javadoc reference (link broken? try this at jarvana.) an annotate...
Rhino Examples
script.java is a simple program that executes a script from the command line. the control class control.java is a program that executes a simple script and then manipulates the result. javascript shell shell.java is a program that executes javascript programs; it is a simplified version of the shell in the tools package. the programs may be specified as files on the command line or by typing inter
actively while the shell is running. primitivewrapfactory primitivewrapfactory.java is an example of a wrapfactory that can be used to control the wrapping behavior of the rhino engine on calls to java methods. multithreaded script execution dynamicscopes.java is a program that creates a single global scope object and then shares it across multiple threads. sharing the global scope allows both informati...
Rhino scopes and contexts
d shared scopes the ecmascript standard defines that scripts can add properties to all standard library objects and in many cases it is also possible to change or delete their properties as well. such behavior may not be suitable with shared scopes since if a script by mistake adds a property to a library object from the shared scope, that object would not be garbage collected until there are no
active references to the shared scope potentially leading to memory leaks. in addition if a script alters some of the standard objects, the library may not work properly for other scripts. such bugs are hard to debug and to remove a possibility for them to occur one can seal the shared scope and all its objects. a notion of a sealed object is a javascript extension supported by rhino and it means that ...
Bytecode Descriptions
". forceinterpreter no-op instruction only emitted in some self-hosted functions. not handled by the jits or baseline interpreter so the script always runs in the c++ interpreter. debugcheckselfhosted stack: checkval ⇒ checkval examine the top stack value, asserting that it's either a self-hosted function or a self-hosted intrinsic. this does nothing in a non-debug build. instrumentation
active stack: ⇒ val push a boolean indicating if instrumentation is
active. instrumentationcallback stack: ⇒ val push the instrumentation callback for the current realm. instrumentationscriptid stack: ⇒ val push the current script's instrumentation id. debugger break in the debugger, if one is attached. otherwise this is a no-op. the debugger api offers a way to hook into this instructio...
Garbage collection
d write it behind the frontier and no pre-barriered removal will mark it (it's not being removed, just read). so we barrier the read instead; if you ever read a weak reference in the middle of an ongoing incremental gc, then the target of the weak ref will be marked. implementation details write barriers have a runtime cost, so spidermonkey tries to skip them when an incremental gc cycle is not
active. each zone has a flag needsincrementalbarrier() that indicates whether barriers are required. for each type t such that fields of type t* need a write barrier, there is a functiont::writebarrierpre(old). for example, fields of type jsobject* need a write barrier, so there is a function jsobject::writebarrierpre(jsobject* old). if zone->needsincrementalbarrier(), then writebarrierpre() marks old.
Invariants
by" in the parse tree.) if a nested function contains a nameexpression that refers to a variable in an enclosing scope which the function can outlive (i.e. the function can be called after control exits that enclosing scope) then upvar instructions cannot be used for that nameexpression. (wrong results or a potentially exploitable crash. the upvar ops depend on a per-context display of currently
active stack frames. once the enclosing stack frame is removed from the stack, and thus from the display, the upvar lookup will no longer work correctly and can crash or read off the end of a different stack frame.) ...
SpiderMonkey Internals: Thread Safety
ogram must group jsapi calls into "requests": js_setcontextthread(cx); js_beginrequest(cx); /* ... do stuff ... */ js_endrequest(cx); js_clearcontextthread(cx); it isn't a bottleneck; multiple threads are allowed to be in requests on the same jsruntime at once. see js_beginrequest. the most obvious effect of a request is: at any given moment there can either be multiple threads in
active requests, or one thread doing gc and all requests suspended. a call to js_gc() will block until the latter becomes possible. in other words, gc waits until each other thread is either outside jsapi (in which case we don't care what it's doing) or else in jsapi, but blocked, waiting for gc to finish. threads must not do anything that would affect gc while outside a request. and obviously you shoul...
Tracing JIT
to zero or more nins values. 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. running backwards sometimes makes the logic difficult to follow, but it is an essential factor in maintaining the assembler's high speed and small size. in the spidermonkey tracing jit there is only ever one assembler
active at a time, associated with the currently
active fragmento. nanojit/regalloc.* nanojit's register allocator. this is a local register allocator, meaning that it does not allocate registers across basic blocks. it is correspondingly very simple: register allocation is done immediately, step-by-step as code is being generated. a running tally is kept of assignments between registers and lir operan...
JS::CompileOptions
assigned to dom elements' event handler idl attributes as a string. "scriptelement" - code belonging to <script> elements. "javascripturl" - code presented in javascript: urls. "settimeout" - code passed to settimeout as a string. "setinterval" - code passed to setinterval as a string. ...
JS::CurrentGlobalOrNull
syntax jsobject * js::currentglobalornull(jscontext *cx); name type description cx jscontext * the context for which to return the global object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description js::currentglobalornull() returns the global object for whatever function is currently running on the context. in other words, it returns the global object on the current scope chain. ...
JSDeletePropertyOp
jsclass.delproperty. syntax typedef bool (* jsdeletepropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); name type description cx jscontext * the context in which the property access is taking place. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). obj js::handleobject the object whose properties are being deleted. id js::handleid the name or index of the property being deleted. this is either a string (unicode property identifier) or an integer (element index). succeeded bool * out parameter. receives the result of deleti...
JSFastNative
ript code. added in spidermonkey 1.8.1 jsfastnative has been renamed to jsnative. syntax typedef jsbool (*jsfastnative)(jscontext *cx, unsigned int argc, jsval *vp); name type description cx jscontext * the context in which the fast native is being called. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). argc unsigned int the number of arguments supplied to the function by the caller (as opposed to, say, the number of arguments the function is specified to take in its jsfunctionspec). vp jsval * the arguments, including the this argument, the return-value slot, and the callee function object are a...
JSNative
c++ code. the term "native" here refers to c/c++ code as opposed to javascript code. syntax typedef bool (* jsnative)(jscontext *cx, unsigned argc, js::value *vp); name type description cx jscontext * the context in which the native function is being called. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). argc unsigned the number of arguments supplied to the function by the caller (as opposed to, say, the number of arguments the function is specified to take in its jsfunctionspec). vp js::value * the arguments, the this argument, the return-value slot, and the callee function object are accessible ...
JSPropertyOp
pertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // added in spidermonkey 1.9.3 name type description cx jscontext * the context in which the property access is taking place. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). obj js::handleobject the object whose properties are being accessed. id js::handleid the name or index of the property being accessed. this is either a string (unicode property identifier) or an integer (element index). strict bool (jsstrictpropertyop only) if strict is true, tr...
JS_BeginRequest
be in a request on this jscontext. in a debug build, this is enforced with assertions. requests constrain garbage collection. if any thread is in a requests, garbage collection can happen only when that thread calls into the jsapi. if one thread needs garbage collection, it blocks until each other thread makes a jsapi call. it is therefore imperative that native code executing within an
active request on cx not block, or simply take too long, outside the jsapi. any blocking native call, or lengthy computation that can race safely with the garbage collector, within a request, must be bracketed with js_suspendrequest and js_resumerequest. it is safe to nest calls to js_beginrequest so long as each call is balanced by a matching call to js_endrequest. jsapi 1.7 and earlier js_beginreque...
JS_BufferIsCompilableUnit
scontext. obj js::handleobject the global object, or null. utf8 const char * string containing the script to compile. length size_t the length of utf8 in characters. description given a buffer, return false if the buffer might become a valid javascript statement with the addition of more lines. otherwise return true. the intent is to support inter
active compilation - accumulate lines in a buffer until js_bufferiscompilableunit is true, then pass it to the compiler. see also mxr id search for js_bufferiscompilableunit js::evaluate js::compile js::compileoffthread js::compilefunction js_decompilescript ...
JS_ClearContextThread
work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. transfer a jscontext from one thread to another. syntax jsword js_clearcontextthread(jscontext *cx); jsword js_setcontextthread(jscontext *cx); name type description cx jscontext * the context to transfer from one thread to another. there must not be any
active or suspended requests using this context. description an application that creates or uses a jscontext in one thread, then uses or destroys it in another thread, must use js_clearcontextthread and js_setcontextthread to transfer the jscontext safely from one thread to the other. the rules for using jscontexts in multiple threads are: each jscontext may only be used by one thread at a t...
JS_ClearNewbornRoots
reat gobs of garbage, so the js_gc entry point clears them for the context on which gc is being forced. embeddings may need to do likewise for all contexts. see js_enterlocalrootscope for a better way to manage newborns in cases where native hooks (functions, getters, setters, etc.) create many gc-things, potentially without connecting them to predefined local roots such as *rval or argv[i] in an
active jsnative function. using js_enterlocalrootscope disables updating of the context's per-gc-thing-type newborn roots, until control flow unwinds and leaves the outermost nesting local root scope. see also bug 572057 bug 659462 ...
JS_LeaveCompartment
syntax void js_leavecompartment(jscontext *cx, jscompartment *oldcompartment); name type description cx jscontext * the context in which to leave the compartment. ...
JS_LeaveCrossCompartmentCall
olete since jsapi 18this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.1 js_leavecrosscompartmentcall has been removed in bug 786068. use js_leavecompartment instead. leave a the compartment, returning to the compartment
active before the corresponding js_entercrosscompartmentcall. syntax void js_leavecrosscompartmentcall(jscrosscompartmentcall *call); name type description call jscrosscompartmentcall * value returned by previous call to js_entercrosscompartmentcall. description every jscontext has a current compartment. any access to an object in a different compartment must be b...
JS_SaveFrameChain
after a call to js_saveframechain, it looks as if there is no code running on cx. ...
JS_SetBranchCallback
*script); name type description cx jscontext * pointer to a jscontext which the callback may use to call into jsapi functions. for example, the callback my call js_maybegc(cx). this is the context that is currently executing the code that triggered the callback. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). script jsscript the script that is running. this is guaranteed to be non-null, unless the jsoption_native_branch_callback option has been enabled for the context cx using js_setoptions(). if the callback returns js_true, the js engine continues to execute the script. if the callback raises an exception u...
JS_SetInterruptCallback
inter to a jscontext in which this callback was installed. the callback may use this context to call jsapi functions, but it should first use js_setinterruptcallback to set the context's interrupt callback to null. otherwise the engine may call the interrupt callback again, reentering it. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). description these functions allow setting an interrupt callback that will be called from the js thread some time after any thread triggered the callback using js_requestinterruptcallback. to schedule the gc and for other activities the engine internally triggers interrupt callbacks. the embedding should thus not r...
JS_SetOperationCallback
nter to a jscontext in which this callback was installed. the callback may use this context to call jsapi functions, but it should first use js_setoperationcallback to set the context's operation callback to null. otherwise the engine may call the operation callback again, reentering it. provides request. in js_threadsafe builds, the javascript engine calls this callback only from within an
active request on cx. the callback does not need to call js_beginrequest()). applications must not use both the operation callback api and the older branch callback api. description these functions allow setting an operation callback that will be called from the js thread some time after any thread triggered the callback using js_triggeroperationcallback. to schedule the gc and for othe...
JS_SuspendRequest
description in js_threadsafe builds, when a multi-threaded application is in a request but needs to block or perform lengthy computation that can race safely with the garbage collector, it should call js_suspendrequest before the time-consuming operation and js_resumerequest after. for more information about thread safety and requests, see js_threadsafe. js_suspendrequest suspends any currently
active requests associated with the context cx. this allows the runtime to perform garbage collection if needed and allows other threads to access objects that the calling thread had locked. the return value is the number of nested requests that were suspended. it may be 0. js_resumerequest resumes the previously suspended requests. the savedepth argument must be the value returned by the matching js_s...
JSAPI reference
en using spidermonkey and the jsapi. a note on versioning: up until the release of firefox 4, spidermonkey, and thus the jsapi, was versioned in an ad-hoc way, with releases happening at times that roughly, but not really, corresponded to firefox releases. in the fall of 2012, the spidermonkey team decided to align releases with those of firefox. the reference applies this versioning scheme retro
actively starting with firefox 5. firefox 4 is the last release that has a corresponding spidermonkey release with the old scheme, where the jsapi has the version 1.8.5. runtimes and contexts 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 spidermon...
SpiderMonkey 1.8.5
en removed. multithreaded js programs that race against the same objects are now explicitly not supported. multithreaded programs are allowed, but each thread must operate on objects in a separate compartment, isolated from the other threads. the old build system (using makefile.ref) is no longer supported. spidermonkey 1.8.5 includes a new configure-based build system, introduced shortly after
active development on the engine moved from cvs to mercurial. spidermonkey 1.8.5 is not binary-compatible with previous releases, nor is it source-code compatible. many jsapi types, functions, and callback signatures have changed, though most of them still have the same names and do the same things. applications will need significant changes, but most of those changes will be detected by the c/c++ comp...
SpiderMonkey 45
t (bug 1216819) js::buildstackstring (bug 1133191) js::flushperformancemonitoring (bug 1181175) js::resetperformancemonitoring (bug 1181175) js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::getstopwatchismonitoringjank (bug 1156264) js::isstopwatch
active (bug 674779) js::getperfmonitoringtestcpurescheduling (bug 1181175) js::addcpowperformancedelta (bug 1181175) js::setstopwatchstartcallback (bug 1208747) js::setstopwatchcommitcallback (bug 1208747) js::setgetperformancegroupscallback (bug 1208747) js_stringhasbeeninterned renamed to js_stringhasbeenpinned (bug 1178581) js_internjsstring renamed to js_atomizeandpinjsstring (bug 1178581) j...
SpiderMonkey releases
we have periodically created "releases", but they are best-effort and incomplete. we do happily accept patches, and make some effort to keep the tip of the gecko tree minimally working as an embeddable source package. ...
Setting up CDT to work on SpiderMonkey
there is a guide for setting up cdt to work with the mozilla codebase, but it does not cover setting things up for just spidermonkey instead of the whole mozilla codebase. hence, here is a short-ish guide for doing just that. step 1 - preparing a spidermonkey build for cdt to index all code, spidermonkey has to be built with debug information. the full process of and requisites for doing so are described here. please follow those instructions up until the point of invoking configure. ...
Shell global objects
ns::lazy_source) to hook; call fun with no arguments; and then restore the runtime's original hook. return or throw whatever fun did. hook gets passed the requested code's url, and should return a string. notes: spidermonkey may assert if the returned code isn't close enough to the script's real code, so this function is not fuzzer-safe. the runtime can have only one source retrieval hook
active at a time. if fun is not careful, hook could be asked to retrieve the source code for compilations that occurred long before it was set, and that it knows nothing about. the reverse applies as well: the original hook, that we reinstate after the call to fun completes, might be asked for the source code of compilations that fun performed, and which, presumably, only hook knows how to find. ...
Zest
able so that anyone can play around with it. all constructive feedback is very welcome. anyone can contribute to the onward development of zest, and teams or individuals who develop security tools are especially welcome to join and help shape zest's future. zest topics usecases reporting security vulnerabilities to developers reporting security vulnerabilities to companies defining
active and passive scanner rules deep integration with security tools runtimes the runtime environments that support zest tools the tools that include support zest implementation the state of zest development videos simon demoed zest at appsec usa in november 2013, and the full video of my talk is available on youtube. the zest part of the talk starts at 23:47. more...
Redis Tips
the right-hand side of the page. recipes - at the bottom of many pages is a section that gives usage patterns or recipes for the command under discussion. there are many insightful ideas to be found here. getting started with redis before you go any further in this document, make sure you have played with redis for at least 5 or 10 minutes. if you have not, here is a fantastic on-line, inter
active redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-line for hacking. node.js redis client: https://github.com/mranney/node_redis npm install redis python redis client: https://github.com/andymccurdy/redis-py there are some...
extIApplication
for the application. supports: "load", "ready", "quit", "unload" the following interfaces are only available to firefox: attribute type description bookmarks readonly attribute fuelibookmarkroots the root bookmarks object for the application. windows readonly attribute nsivariant an array of browser windows within the application.
activewindow readonly attribute fueliwindow the currently
active browser window. methods quit() attempts to shutdown the application. it is possible for the shutdown to be canceled. boolean quit() return value boolean value indicating whether the shutdown was successful. restart() attempts to restart the application. it is possible for the restart to be canceled. boolean restart()...
XML Extras
rowser xml paging code" and "implement a flexible shopping cart with xml and asp". the mozilla developer center has several pages for xmlhttprequest. below are some key differencies in "xml extras" between mozilla and microsoft software: difference microsoft mozilla member names case insensitive? begins with lower case letter xmlhttprequest creation new
activexobject("msxml2.xmlhttp") new xmlhttprequest() xmlhttprequest.send("some string") ok ok starting with milestone 0.9.7 (actually nightly 2001-11-28). with older builds, passing strings to send() works only in chrome, see post.html sample. the "workaround" is to use domparser object's parsefromstring() method to create a document from string, and pass the temporary document into se...
Finishing the Component
do what you are trying to do. be as precise you possibly can. they may be able to suggest a supported alternative, or they may be able to notify you about pending changes. the interface that we need for this project is something called nsicontentpolicy. at the time this book was written, this interface was under review. an interface reaches this state when a group of module owners and peers are
actively engaged in discussion about how best to expose it. usually there are only minor changes to interfaces marked with such a tag. even with interfaces marked "under review," however, it's still a good idea to contact the module owners responsible for the interfaces you are interested in using. copying interfaces into your build environment to get and implement interfaces that are not part of geck...
JavaXPCOM
javaxpcom allows for communication between java and xpcom, such that a java application can access xpcom objects, and xpcom can access any java class that implements an xpcom interface. javaxpcom is not
actively maintained. with javaxpcom, a developer can talk to xpcom or embed gecko from a java application. javaxpcom is very similar to xpconnect (javascript-xpcom bridge), and uses xpidl. note: javaxpcom was included in xulrunner up through version 1.9.2. it has been removed in xulrunner 2, and is not
actively maintained. documentation javaxpcom development how to get and build the source, as well as how to view and report bugs. sample code there are several java test applications checked in to the tree that give exampl...
Community
if you know of useful mailing lists, newsgroups, forums, or other communities related to pyxpcom, please link to them here.
activestate python xpcom bindings mailing list discussion of the bindings between the python language and the xpcom (cross-platform com) technology from the mozilla project. #pyxpcom on irc.mozilla.org chat with other pyxpcom developers on mozilla's irc network. ...
Architecture basics
xpcom is like com, for windows. it lets you get pointers to components inside mozilla, and it lets you talk about their interfaces as well. xpconnect is what lets javascript talk with mozilla guts, the xpcom system. you can imagine it like a bridge between javascript code, and mozilla guts. xpcshell is a command line interface to mozilla javascript. it's an inter
active interpreter -- it gives you a shell that talks straight to mozilla, via javascript's xpconnect bridge into it. ...
XPConnect
documentation architecture basics xpconnect, javascript, xpcom, xul... using components how to talk with xpcom components. xpconnect and xpidl faq a faq about using xpconnect and xpidl. this page needs to migrate to mdn. ...
inIDOMUtils
long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long long astate); constants constant value description exclude_shorthands (1<<0) include_aliases (1<<1) content state flags the content state flags are used in a bitmask. value state 1 :
active 2 :focus 4 :hover 8 :-moz-drag-over 16 :target 1<<29 :-moz-focusring methods getbindingurls() returns an array of nsiuri objects representing the current xml binding for the specified element. nsiarray getbindingurls( in nsidomelement aelement ); parameters aelement a dom element to retrieve the bindings of. return va...
mozIStorageStatement
e this query with the given sql statement. void initialize( in mozistorageconnection adbconnection, in autf8string asqlstatement ); parameters adbconnection a mozistorageconnection database connection. asqlstatement string key representing the sql statement. finalize() finalizes a statement which releases all resources that were allocated for it. you must call this method on every
active statement before you try to call mozistorageconnection.close(). void finalize(); note: this method does not need to be used from native callers because you have to release the statement in order to not leak. finalize will be called for you when the reference count on the statement goes to zero. clone() creates a copy of the statement whose state will be mozistoragestatement.moz_storage_state...
nsIAccessNode
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the nsiaccessnode implementations are instantiated lazily. the nsiaccessnode tree for a given dom window has a one to one relationship to the dom tree. ...
nsIAccessibleEvent
rns true if the event was caused by explicit user input, as opposed to purely originating from a timer or mouse movement. constants constant gecko version description 1.7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x8002 0x0001 an object has been created. event_hide 0x8003 0x0002 an object has been destroyed. event_reorder 0x8004 0x005c 0x0003 an object's children have changed. event_
active_decendent_changed 0x0007 0x0004 the
active descendant of a component has changed. the
active descendant is used in objects with transient children. event_focus 0x8005 0x0008 0x0005 an object has received the keyboard focus. event_state_change 0x800a 0x0009 0x0006 an object's state has changed. event_location_change 0x800b 0x000a 0x0007 an object has changed location, shape, or size. eve...
nsIAccessibleRelation
unsigned long returns the number of targets for this relation. read only. constants constant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a target object. relation_controller_for 0x02 this object is inter
active and controls some attribute of a target object. relation_label_for 0x03 this object is label for a target object. relation_labelled_by 0x04 this object is labelled by a target object. if the accessible has an nsiaccessible.name() , you can get the nsiaccessible that it was labelled by in order to get more formatting information. ...
nsIAccessibleStates
ome/atk support) constant value description ext_state_supports_autocompletion 0x00000001 for editable areas that have any kind of auto completion. ext_state_defunct 0x00000002 object no longer exists. ext_state_selectable_text 0x00000004 for text which is selectable, object must implement nsiaccessibletext. ext_state_editable 0x00000008 implements nsiaccessibleeditabletext. ext_state_
active 0x00000010 this window is currently the
active window. ext_state_modal 0x00000020 must do something with control before leaving it. ext_state_multi_line 0x00000040 edit control that can take multiple lines. ext_state_horizontal 0x00000080 uses horizontal layout. ext_state_opaque 0x00000100 indicates this object paints every pixel within its rectangular region. ext_state_single_line 0x00...
nsIAppStartup
this can be used, for example, when doing performance testing of the startup process to discount numbers for tests that were interrupted by a user prompt. nativeappsupport nsinativeappsupport getter for "native application support." read only. obsolete since gecko 1.9.1 constants the following flags may be passed as the amode parameter to the quit() method. one and...
nsIApplicationUpdateService
alue a string indicating the status of the update upon return: "downloading" the update is being downloaded. "pending" the update is ready to be applied. "applying" the update is in the process of being applied. "succeeded" the update has been installed successfully. "download-failed" the update failed to be downloaded. "failed" installing the update failed. pausedownload() pauses the currently
active update download. void pausedownload(); parameters none. removedownloadlistener() removes a listener that is receiving progress and state information about the update that is currently being downloaded. void removedownloadlistener( in nsirequestobserver listener ); parameters listener the listener object to remove. selectupdate() selects the best update to install from a provided list of ava...
nsIBadCertListener2
problem(in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string targetsite); methods notifycertproblem() called in case of a broken ssl status. boolean notifycertproblem( in nsiinterfacerequestor socketinfo, in nsisslstatus status, in autf8string targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the
active connection. this object usually supports nsisslsocketcontrol, nsitransportsecurityinfo, nsiidentityinfo, nsisslstatusprovider, nsiclientauthuserdecision and possibly other interfaces. status the ssl status object that describes the problem(s). targetsite the site name that was used to open the current connection. return value the consumer shall return true if it wants to suppress the error messa...
nsIBrowserSearchService
may be null if there are no visible search engines. defaultengine nsisearchengine the default search engine. returns the first visible engine if the default engine is hidden. may be null if there are no visible search engines. read only. originaldefaultengine nsisearchengine the original default engine. this differs from the "...
nsIContentView
at dimensions of scrolled content in chrome-document css pixels. read only. id nscontentviewid id that can be used in conjunction with nsidomwindowutils to change the actual document, instead of just how it is transformed; this is a 64-bit unsigned integer. read only. scrollx float horizontal scroll offset in chrome-document css pixels. when this view is
active (that is it is being painted because it's in the visible region of the screen), this value is at first lined up with the content's scroll offset. note: when this view becomes in
active, the new content view will have scroll values that are reset to the default. read only. scrolly float horizontal scroll offset in chrome-document css pixels. read only. viewporth...
nsIDOMChromeWindow
ize() minimizes the window. void minimize(); parameters none. notifydefaultbuttonloaded() when a document has been loaded, the document can notify the default button of the document to the window by using this method. when this method is called on windows, gecko moves the mouse cursor to center of the button if the auto cursor snap setting is enabled on the system. however, when the window isn't
active at that time, the cursor isn't moved. on other systems, this method doesn't have any reaction currently. this method is called automatically on dialog element or wizard element of xul. if some xul applications create a dialog like window which has a default button but it's not created by the dialog/wizard element, the applications should call this method for the accessibility and the usability on...
nsIDOMNSHTMLDocument
he command is in an indeterminate state, false otherwise. for instance, if there is a selection and part of the selected text is bold, then then bold command is in an indeterminate state. querycommandstate() boolean querycommandstate( in domstring commandid ); parameters commandid the name of the command to query. return value for stateful commands, returns true if the command has is
active, false otherwise. querycommandsupported() boolean querycommandsupported( in domstring commandid ); parameters commandid the name of the command to query. return value returns true if the command is supported on the current range, false otherwise. querycommandtext() obsolete since gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) this method never...
nsIDispatchSupport
boolean isobjectsafeforscripting(in voidptr theobject, in nsiidref id); void jsval2comvariant(in jsval var, out comvariant comvar); methods comvariant2jsval() converts a com variant to a jsval. void comvariant2jsval( in comvariantptr comvar, out jsval val ); parameters comvar the com variant to be converted. val the jsval to receive the converted value. gethostingflags() return the
activex security and hosting flags. see nsi
activexsecuritypolicy for list of flags. unsigned long gethostingflags( in string acontext ); parameters acontext return value isclassmarkedsafeforscripting() test if the specified class is marked safe for scripting. boolean isclassmarkedsafeforscripting( in nscidref cid, out boolean classexists ); parameters cid the nsid representation of the clsi...
nsIEditorIMESupport
read only. methods native code only!begincomposition obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. handles the start of inline input composition. void begincomposition( in nstexteventreplyptr ar...
nsIEditorSpellCheck
ictionaries. the strings will typically be language ids, such as "en-us". void getdictionarylist( [array, size_is(count)] out wstring dictionarylist, out pruint32 count ); parameters dictionarylist an array into which the list of dictionary name strings are placed. count on return, contains the number of entries in the dictionarylist array. getnextmisspelledword() when inter
actively spell checking the document, this will return the value of the next word that is misspelled. this also computes the suggestions which you can get by calling getsuggestedword(). wstring getnextmisspelledword(); parameters none. return value the next misspelled word in the document. getpersonaldictionary() fills an internal list of words added to the personal dictionary. these words can be retri...
nsIEventListenerInfo
uring boolean indicates whether or not the event listener is in capture mode. read only. insystemeventgroup boolean indicates whether or not the event listener is in the system event group. read only. type astring the type of the event for which the listener was added. read only. methods getdebugobject() returns the debugger object if the debug service is
active. nsisupports getdebugobject(); parameters none. return value if jsdidebuggerservice is
active and the listener is implemented in js, this returns the listener as a jsdivalue. otherwise null. this is the method you should use if you want to get access to the actual listener, but the debugger service must be already
active, which significantly slows down script execution. accordingly, this should ...
nsILoadGroup
oup maintains a collection of nsirequest objects. inherits from: nsirequest last changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in nsresult astatus); attributes attribute type description
activecount unsigned long returns the count of "
active" requests (that is requests without the load_background bit set). read only. defaultloadrequest nsirequest accesses the default load request for the group. each time a number of requests are added to a group, the defaultloadrequest may be set to indicate that all of the requests are related to a base ...
nsIMacDockSupport
itself when one of its dock menu items are selected, since doing so does not automatically activate the application. void activateapplication( in boolean aignoreotherapplications ); parameters aignoreotherapplications if true, the application is activated regardless of the state of other applications. if false, the application is only activated if other applications are not currently
active. about dockmenu by default firefox adds two menu items to the dock menu. the menu items are "new window" and "new private window". if permanent private browsing mode is enabled then the "new private window" menu item is hidden. this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/browser/base/content/browser.js#1562 this is seen...
nsINavHistoryObserver
toryservice.idlscriptable this interface is similar to the nsirdfobserver class, but is used to observe interactions on the global history. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) warning: if you are in the middle of a batch transaction, there may be a database transaction
active. you can still access the database in this situation but be careful (of what?). method overview void onbeforedeleteuri(in nsiuri auri, in acstring aguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onclearhistory(); void ondeleteuri(in nsiuri auri, in acstring aguid); void ondeletevisits(in nsiuri auri, in prtime avisittime, in acstring...
nsISSLErrorListener
erview boolean notifysslerror(in nsiinterfacerequestor socketinfo, in print32 error, in autf8string targetsite); methods notifysslerror() called in case of an ssl error. boolean notifysslerror( in nsiinterfacerequestor socketinfo, in print32 error, in autf8string targetsite ); parameters socketinfo a network communication context that can be used to obtain more information about the
active connection. error the code associated with the error. the ssl status object that describes the problem(s). targetsite the site name that was used to open the current connection. return value the consumer shall return true if it wants to suppress the error message related to the error (the connection will still get canceled). see also nsisockettransport ...
nsITaskbarPreview
introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) you can not directly instantiate this interface. instead, you use nsitaskbartabpreview or nsitaskbarwindowpreview as appropriate. method overview void invalidate(); attributes attribute type description
active boolean indicates whether or not the preview is marked as
active (currently selected) in the taskbar. controller nsitaskbarpreviewcontroller the controller for this preview. the controller provides the behavior and appearance for the taskbar preview, and is responsible for determining the size and contents of the preview, which buttons are displaye...
nsIUpdateManager
global application service that maintains a list of previously installed updates, as well as the currently in use update. 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 nsiupdate getupdateat(in long index); void saveupdates(); attributes attribute type description
activeupdate nsiupdate an nsiupdate object describing the currently in use update. this update is not in the history list. read only. updatecount long the number of updates in the history list; the updates can be fetched by calling getupdateat(). read only. methods getupdateat() returns the update at the specified index into the history list. nsiupdate getupdateat( in long index ); parameters i...
nsIWebBrowser
e is always valid. the embedder must explicitly set this value back to nsnull if the chrome object is destroyed before the browser object. note: nsiinterfacerequestor and nsiweakreference might also need to be implemented by the chrome object. contentdomwindow nsidomwindow the top-level dom window. the embedder may walk the entire dom starting from this value. read only. is
active boolean indicates whether this web browser is
active.
active means that it's visible enough that we want to avoid certain optimizations like discarding decoded image data and throttling the refresh driver. in firefox, this corresponds to the visible tab. defaults to true. for optimal performance, set it to false when appropriate. parenturicontentlistener nsiuricontentl...
nsIWebNavigation
an external application. load_flags_allow_popups 32768 this flag specifies that the load should not be subject to popup blocking checks. note for valid load flag combinations look here nsdocshellloadtypes.h stop flags constant value description stop_network 1 this flag specifies that all network activity should be stopped. this includes both
active network loads and pending meta-refreshes. stop_content 2 this flag specifies that all content activity should be stopped. this includes animated images, plugins and pending javascript timeouts. stop_all 3 this flag specifies that all activity should be stopped. attributes attribute type description cangoback prbool indicates if t...
nsIWindowMediator
32 getzlevel( in nsixulwindow awindow ); parameters awindow the window in question. return value awindow's z level. getzorderdomwindowenumerator() return an enumerator which iterates over all windows of type awindowtype in their z (front-to-back) order. note this interface makes no requirement that a window couldn't be revisited if windows are re-ordered while z-order enumerators are
active. nsisimpleenumerator getzorderdomwindowenumerator( in wstring awindowtype, in boolean afronttoback ); parameters awindowtype the returned enumerator will enumerate only windows of this type. ("type" is the |windowtype| attribute of the xml <window> element.) if null, all windows will be enumerated. afronttoback if true, the enumerator enumerates windows in order from front to back. b...
Performance
e_version definition in db/sqlite3/src/sqlite3.h for the current version if you are having problems. caching sqlite has a cache of database pages in memory. 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. in the past, it flushed the cache at the end of a transaction (by default). in order to keep the cache
active between transactions, you needed to have a second connection with a 'dummy' (and schema changing) transaction. that is not needed now. you can control the size of the memory cache using the cache_size pragma. this value controls the number of pages of the file that can be kept in memory at once. the page size can be set using the page_size pragma before any operations have been done on the file. ...
Storage
ombination of asynchronous and synchronous statement execution. the best way to deal with this is to only execute your statements asynchronously using mozistorageconnection.executeasync(). this method will manage the transactions for you, so you don't have to worry about them. note: the database engine does not support nested transactions, so attempting to start a transaction when one is already
active will throw an exception. transactions can be started with mozistorageconnection.begintransaction() or mozistorageconnection.begintransactionas(). the latter takes one of three constants to describe the type of transaction: mozistorageconnection.transaction_deferred mozistorageconnection.transaction_immediate mozistorageconnection.transaction_exclusive mozistorageconnection.begintransactio...
Test-Info
ypically consumed by dashboards, like www.arewefissionyet.com. running test-info locally "test-info" is a mach command and can be run from any source tree. test-info has several sub-commands; the "report" sub-command is used by the test-info tasks mozilla-central$ mach help test-info report to reproduce test-info(all): mozilla-central$ mach test-info report --show-tests --show-summary --show-
activedata running test-info on try to run these tasks on try, use something like: mach try fuzzy -q test-info contact information test-info is maintained by :gbrown. bugs should be filed in testing :: general. ...
Autoconfiguration in Thunderbird
a configuration file in the thunderbird installation folder. ispdb database url is <https://autoconfig.thunderbird.net/v1.1/>, append domain name, e.g. <https://autoconfig.thunderbird.net/v1.1/freenet.de>. current process: file a bug in bugzilla, product "webtools", component "ispdb database entries", with a configuration file that matches the requirements described below. the component is
actively watched for new bugs (as of november 2015) so there is no need to request review on the file. configuration server at isp given the email address "fred@example.com", thunderbird checks <https://autoconfig.example.com/mail/config-v1.1.xml?emailaddress=fred@example.com> (preferred) and <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> and the same urls with http (see section ssl...
nsIMsgCloudFileProvider
rror acstring readonly: the last error message received from the server. constants the following constants are used for the status codes passed to the onstoprequest functions of the nsirequestobserver's used by the asynchronous methods of nsimsgcloudfileprovider. constant value description offlineerr 0x80550014 returned when it appears that there is no
active network connection. autherr 0x8055001e returned when authorizing has failed. uploaderr 0x8055311a returned when uploading has failed for an unknown reason. uploadwouldexceedquota 0x8055311b returned when uploading has failed because the user has exceeded their storage quota. uploadexceedsfilelimit 0x8055311c returned when uploading has f...
Index
erfaces that you'll will most likely use when writing extensions that work with email or other accounts. see account examples for examples and code snippets. 5 activity manager thunderbird 3, thunderbird the activity manager is a simple component that understands how to display a combination of user activity and history. the activity manager works in conjunction with the inter
active status bar to give the user notifications concerning what thunderbird is doing and how thunderbird has handled user requests. 6 activity manager interfaces thunderbird this page describes the programmatic interfaces behind the activity manager component. the functionality of the component is described on the activity manager page, and the activity manager examples page has co...
Using COM from js-ctypes
e interaction between the operating system and an application. for communication between the different windows applications among themselves, microsoft has developed a series of technologies alongside the main windows api. this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects,
activex controls, and the .net framework. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes conv...
Declaring types
edetermined size. this is permitted since c allows it, for the widest possible compatibility. declaring an array type with unspecified length to declare a new array type without specifying a length, you simply pass in the ctype specifying the element type when calling ctypes.arraytype(). for example, to create a type for an array of c standard i/o file pointers (perhaps for tracking a number of
active files on disk): const file = new ctypes.structtype("file").ptr; // create file as a file * type const filearray = new ctypes.arraytype(file); // create a filearray type in this example, file is an opaque pointer we can use to refer to c file records, as defined in stdio.h. filearray is a new type representing an array of unspecified length, in which each entry is a pointer to a fil...
URLs - Plugins
topic in a nethelp window. browser-specific. news (usenet news) locates usenet news groups or individual usenet articles. nntp (usenet news using nntp access) locates usenet news groups or individual usenet articles; alternate to news. prospero (prospero directory service) locates a resource on a prospero directory server. telnet (reference to inter
active sessions) locates an inter
active service. wais (wide area information servers) locates wais databases and their documents. wysiwyg placed before another url; displays a page that javascript has updated using document.write. for more information, see rfc 3986, "uniform resource identifier (uri): generic syntax", and the iana uri scheme registry. getting urls post...
DOM Inspector FAQ - Firefox Developer Tools
f you do not know anything about the node, you can try to select it by clicking on it. scroll the node into view, choose the select-by-click toolbar button, and then click on the element you wish to inspect. the edit menu also includes a select element by click menu item. how do i inspect pseudo-classes and pseudo-elements in the css rules viewer? dom inspector allows you to force the :hover, :
active, and :focus pseudo-classes to apply to a given node. from the dom nodes viewer, select the node and bring up the context menu. you should notice the set pseudo-classes menu item, which will allow you to set the content state for the aforementioned pseudo-classes. there is currently no way to inspect dynamically-applied rules for other pseudo-classes or any pseudo-elements from the dom inspector ...
DOM Inspector internals - Firefox Developer Tools
document panel and the object panel, respectively. (internally, a panel may be loosely referred to as a "pane", but a panelset is always referred to as a "panelset".) a panel's purpose is to manage available viewers. at the top of each panel is a toolbar which contains a menu button allowing you to choose which viewer to display from the viewer list, a label displaying the name of the currently
active viewer, and another menu button allowing you to issue viewer-specific commands. viewers are dynamically loaded; when the panel is made to switch from one viewer to another, the old viewer is destroyed, and the new viewer is loaded in its place. in this way, the panelset and panels function like a frameset and frames. this comparison turns out to be quite apt, since each panel actually contains a...
Debug worker threads - Firefox Developer Tools
process and set breakpoints and logpoints just as you can with javascript code running on the main thread. inspecting worker code for example, see the selected item worker.js below — it is listed in a separate thread in the sources list, but appears in the source pane in the same way as main thread code when selected. setting breakpoints, etc. you can set a breakpoint (or logpoint) on any
active worker thread: when execution is paused in a worker thread, the context of the debugger is updated to show the correct breakpoints, call stack, etc., just as you'd expect. ...
Examine, modify, and watch variables - Firefox Developer Tools
ly in the code ready for inspection. to add a watch expression, click in the box that says "add watch expression" and enter a javascript expression whose output you'd like to monitor as you step through code. then start running your code. the watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. at that point, a box showing your
active watch expressions and their current values will appear: you can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. you can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time. ...
Index - Firefox Developer Tools
g css transitions. 77 animation inspector example: web animations api example animation using the web animations api. 78 page inspector 3-pane mode 3-pane, css, guide, inspector, tools this article explains how to use the page inspector's 3-pane mode. 79 page inspector keyboard shortcuts these shortcuts work while the node picker is
active. 80 ui tour guide, inspector, tools this article is a quick tour of the main sections of the page inspector's user interface. 81 paint flashing tool web performance the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. with th...
Migrating from Firebug - Firefox Developer Tools
cting them within the panel and copying the selection by pressing ctrl+c or via the context menu. the rules side panel of the devtools is smarter when it comes to pasting css into it. you can paste whole style declarations into an existing rule property declarations which are commented out are automatically disabled. toggle pseudo-classes firebug lets you toggle the css pseudo-classes :hover, :
active and :focus for an element via the options menu of the style side panel. in the devtools there are two ways to do the same. the first one is to toggle them via the pseudo-class panel within the rules side panel. the second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu. examine css shorthand properties css shorthand properties can be spl...
Network Monitor - Firefox Developer Tools
e hamburger menu (), then select "network". the network monitor will appear at the bottom of the browser window. when it first opens, the network monitor does not show request information. the just opened tool looks like this: either action causes the network monitor to begin monitoring network activity. once the tool is monitoring network requests, the display looks like this: when it is
actively monitoring activity, the network monitor records network requests any time the toolbox is open, even if the network monitor itself is not selected. this means you can start debugging a page in, for example, the web console, then switch to the network monitor to see network activity without having to reload the page. ui overview the ui is divided into four main pieces: the main screen conta...
Select an element - Firefox Developer Tools
ith the keyboard. with the node picker to select an element in the page itself, activate the "node picker" by clicking its icon: (also called the select element icon). after that, as you move the mouse around the page, the element under the mouse is highlighted. click the element to select it: starting in firefox 52, if you shift + click the element, then it is selected but the picker stays
active. this lets you see the rules for the element in the css pane, but conveniently select another element in the page. ...
Flame Chart - Firefox Developer Tools
underneath that, colored olive-green, are the calls it's making to sort(). underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm. let's zoom in: this slice is about 140 ms long, and shows us more details of the functions being called by sort()...
UI Tour - Firefox Developer Tools
recording overview details pane, which may contain any one of: waterfall call tree flame chart toolbar the toolbar contains buttons to: start and stop a recording import a recording you previously saved clear the recordings pane. note that if you do this, you lose any recordings you have not saved. filter the markers that are displayed in the waterfall view switch the
active tool in the details pane. access the settings popup recordings pane the recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported. at any given time, one recording is selected, and that recording is displayed in the rest of the tool. to select a different recording, click its entry in the pane. to save the recording as...
Settings - Firefox Developer Tools
ls in a separate window. show split console adds a section at the bottom of the tools showing the console. it makes visible the command line and one or two lines of the console output. the rest of the settings are on the developer tools settings pane. to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the
active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of checkboxes determines which tools are enabled in the toolbox. new tools are often included in firefox but not enabled by default. available toolbox buttons this group of checkboxes determines which tools get an icon in the toolbox's toolbar. as of firefox 62, ...
Shader Editor - Firefox Developer Tools
note: this tool has been deprecated and will soon be removed from firefox. for details, see deprecated tools. the shader editor enables you to see and edit the vertex and fragment shaders used by webgl. webgl is a javascript api for rendering inter
active 3d graphics and 2d graphics in the browser without using plugins. with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn. these shaders are written in opengl shading language, or glsl. in webgl they can be included in a page in several ways: as text hardcoded in javascript strings, as separate files inc...
IndexedDB - Firefox Developer Tools
xes — array of indexes present in the object store as shown below. when an object store is selected in the storage tree, all the items in that object store are listed in the table. ...
Style Editor - Firefox Developer Tools
understand css source maps. this means that if you use, for example, sass, then the style editor will show you, and allow you to edit, sass files, rather than the css that is generated from them: for this to work, you must: use a css preprocessor that understands the source map revision 3 proposal. currently this means sass 3.3.0 or above or the 1.5.0 version of less. other preprocessors are
actively working on adding support, or considering it. actually instruct the preprocessor to generate a source map, for example by passing the --source-map argument to the lass command-line tool, but in some preprocessors like sass, source maps are generated by default and you don't need to do anything. viewing original sources now, if you check "show original sources" in the style editor settings, ...
Toolbox - Firefox Developer Tools
ggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings. main pane the content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected. keyboard shortcuts these shortcuts work whenever the toolbox is open, no matter which tool is
active. command windows macos linux cycle through tools left to right ctrl + ] cmd + ] ctrl + ] cycle through tools right to left ctrl + [ cmd + [ ctrl + [ toggle between
active tool and settings. f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d ...
Firefox Developer Tools
ge measure a specific area of a web page. rulers overlay horizontal and vertical rulers on a web page for the latest developer tools and features, try firefox developer edition. download firefox developer edition connecting the developer tools if you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently
active tab. but you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices. about:debugging debug add-ons, content tabs, and workers running in the browser. connecting to firefox for android connect the developer tools to an instance of firefox running on an android device. connecting to iframes connect the de...
Animation.effect - Web APIs
web animations api gets and sets the target effect of an animation. the target effect may be either an effect object of a type based on animationeffectreadonly, such as keyframeeffect, or null. syntax var effect = animation.effect; animation.effect = animationeffectreadonly value a animationeffectreadonly object describing the target animation effect for the animation, or null to indicate no
active effect. specifications specification status comment web animationsthe definition of 'animation.effect' in that specification. working draft editor's draft. ...
Animation.onremove - Web APIs
syntax var removehandler = animation.onremove; animation.onremove = removehandler; value a function to be called to handle the remove event, or null if no remove event handler is set. ...
Animation.persist() - Web APIs
r the mouse moves. the event handler sets up an animation that animates the <div> element to the position of the mouse pointer. this could result in a huge animations list, which could create a memory leak. for this reason, modern browsers automatically remove overriding forward filling animations. you can see the replacestate of the animation being logged at the end of the handler. this will be
active for each animation by default, or persisted if the persist() call is uncommented. specifications specification status comment web animationsthe definition of 'persist()' in that specification. working draft ...
AnimationEffect.getComputedTiming() - Web APIs
dstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a computedeffecttiming dictionary object, which contains the following properties: endtime the end time of the animation in milliseconds from the animation's start (if the keyframeeffect is associated with an animation). (also includes effecttiming.enddelay in that calculation.)
activeduration the length of time in milliseconds that the animation's effects will run. this is equal to the iteration duration multiplied by the iteration count. localtime the current time of the animation in milliseconds. if the keyframeeffect is not associated with an animation, its value is null. progress indicates how far along the animation is through its current iteration with values betwee...
AnimationPlaybackEvent.timelineTime - Web APIs
the timelinetime read-only property of the animationplaybackevent interface represents the time value of the animation's timeline at the moment the event is queued. this will be unresolved if the animation was not associated with a timeline at the time the event was generated or if the associated timeline was in
active. value a number representing the current time in milliseconds, or null. specifications specification status comment web animationsthe definition of 'animationplaybackevent.timelinetime' in that specification. working draft editor's draft. ...
AnimationTimeline - Web APIs
s interface exists to define timeline features (inherited by documenttimeline and future timeline types) and is not itself directly used by developers. anywhere you see animationtimeline, you should use documenttimeline or any other timeline type instead. properties animationtimeline.currenttime read only returns the time value in milliseconds for this timeline or null if this timeline is in
active. specifications specification status comment web animationsthe definition of 'animationtimeline' in that specification. working draft editor's draft. ...
AudioContext() - Web APIs
on in chrome prior to version 66 google chrome only supported up to six audio contexts per tab at a time. non-standard exceptions in chrome if the value of the latencyhint property isn't valid, chrome throws a typeerror exception with the message "the provided value '...' is not a valid enum value of type audiocontextlatencycategory". example this example creates a new audiocontext for inter
active audio (optimizing for latency) and a sample rate of 44.1khz. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'inter
active', samplerate: 44100, }); specifications specification status comment web audio apithe definition of 'audiocontext()' in that specification. working draft initial definiti...
AudioContext.baseLatency - Web APIs
audiodestinationnode — i.e. the end of the audio graph — into the host system's audio subsystem ready for playing. note: you can request a certain latency during construction time with the latencyhint option, but the browser may ignore the option. syntax var baselatency = audioctx.baselatency; value a double representing the base latency in seconds. example // default latency ("inter
active") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment web audio apithe definition of 'baselatency' in that specification. working draft initial definit...
AudioNode - Web APIs
analysernode, where the result of the processing is accessed separately). the more nodes in a graph, the higher the latency will be. for example, if your graph has a latency of 500ms, when the source node plays a sound, it will take half a second until that sound can be heard on your speakers (or even longer because of latency in the underlying audio device). therefore, if you need to have inter
active audio, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. for example, a volume control (gainnode) should be the last node so that volume changes take immediate effect. each input and output has a given amount of channels. for example, mono audio has one channel, while stereo audio has two channels. the web audio api will up-mix or down-mix the number...
AudioTrack.enabled - Web APIs
the audiotracks property of a media element isn't actually a javascript array, it can be accessed like one for the most part). the scan looks for the tracks whose kind values are "main" and "commentary" and remembers those audiotrack objects. once those have been found, the values of the two tracks' enabled properties are exchanged, which results in swapping which of the two tracks is currently
active. specifications specification status comment html living standardthe definition of 'audiotrack.enabled' in that specification. living standard html5the definition of 'audiotrack.enabled' in that specification. recommendation ...
Background Tasks API - Web APIs
most obvious ways users notice performance issues, it's important for your code to be a good citizen of the web and help to prevent stalls in the execution of the event loop. in the past, there's been no way to do this reliably other than by writing code that's as efficient as possible and by offloading as much work as possible to workers. window.requestidlecallback() 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. if you stay within the limit given, you can make the user's experience much better. getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event l...
BaseAudioContext.createDynamicsCompressor() - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
BluetoothRemoteGATTCharacteristic - Web APIs
promise that resolves to an arraybuffer holding a duplicate of the value property if it is available and supported. otherwise it throws an error. bluetoothremotegattcharacteristic.writevalue() sets the value property to the bytes contained in an arraybuffer and returns a promise. bluetoothremotegattcharacteristic.startnotifications() returns a promise when navigator.bluetooth is added to the
active notification context. bluetoothremotegattcharacteristic.stopnotifications() returns a promise when navigator.bluetooth is removed from the
active notification context. specifications specification status comment web bluetooththe definition of 'bluetoothremotegattcharacteristic' in that specification. draft initial definition. ...
Applying styles and colors - Web APIs
you will learn how to add different colors, line styles, gradients, patterns and shadows to your drawings. colors up until now we have only seen methods of the drawing context. if we want to apply colors to a shape, there are two important properties we can use: fillstyle and strokestyle. ...
Basic animations - Web APIs
in this chapter we will take a look at how to do some basic animations. probably the biggest limitation is, that once a shape gets drawn, it stays that way. if we need to move it we have to redraw it and everything that was drawn before it. it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on. ...
Hit regions and accessibility - Web APIs
canvas element. see aria and aria techniques for more information. <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="start game"></canvas> hit regions whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. the hit region api allows you to define an area of your canvas and provides another possibility to expose inter
active content on a canvas to accessibility tools. it allows you to make hit detection easier and lets you route events to dom elements. the api has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables). canvasrenderingcontext2d.addhitregion() adds a hit region to the canvas. canvasrenderingcontext2d.removehitregion() removes...
Canvas API - Web APIs
below can make the creation of canvas-based projects faster and easier. easeljs is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy. fabric.js is an open-source canvas library with svg parsing capabilities. heatmap.js is an open-source library for creating canvas-based data heat maps. javascript infovis toolkit creates inter
active data visualizations. konva.js is a 2d canvas library for desktop and mobile applications. p5.js has a full set of canvas drawing functionality for artists, designers, educators, and beginners. paper.js is an open-source vector graphics scripting framework that runs on top of the html5 canvas. phaser is a fast, free and fun open source framework for canvas and webgl powered browser games. pro...
Clients.claim() - Web APIs
this triggers a "controllerchange" event on navigator.serviceworker in any clients that become controlled by this service worker. when a service worker is initially registered, pages won't use it until they next load. the claim() method causes those pages to be controlled immediately. be aware that this results in your service worker controlling pages that loaded regularly over the network, or possibly via a different service worker. syntax await clients.claim(); parameters none. return value a promise that resolves to undefined. ...
Clients - Web APIs
.clients within a service worker. methods clients.get() returns a promise for a client matching a given id. clients.matchall() returns a promise for an array of client objects. an options argument allows you to control the types of clients returned. clients.openwindow() opens a new browser window for a given url and returns a promise for the new windowclient. clients.claim() allows an
active service worker to set itself as the controller for all clients within its scope. examples the following example shows an existing chat window or creates a new one when the user clicks a notification. addeventlistener('notificationclick', event => { event.waituntil(async function() { const allclients = await clients.matchall({ includeuncontrolled: true }); let chatclient;...
Clipboard.write() - Web APIs
note: browser support for the asynchronous clipboard apis is still in the process of being implemented. be sure to check the compatibility table as well as clipboard availability in clipboard for more information. ...
Clipboard.writeText() - Web APIs
note: browser support for the asynchronous clipboard apis is still in the process of being implemented. be sure to check the compatibility table as well as clipboard availability in clipboard for more information. ...
ClipboardItem - Web APIs
ipboard api. that is clipboard.read() and clipboard.write() respectively. the benefit of having the clipboarditem interface to represent data, is that it enables developers to cope with the varying scope of file types and data easily. access to the contents of the clipboard is gated behind the permissions api: the clipboard-write permission is granted automatically to pages when they are in the
active tab. the clipboard-read permission must be requested, which you can do by trying to read data from the clipboard. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. note: you can only pass in one clipboard item at a time. constructor clipboarditem.clipboarditem() creates a new clipboarditem object, with the mime type as th...
Clipboard API - Web APIs
the clipboard-read permission must be requested, which you can do by trying to read data from the clipboard. ...
Console.dir() - Web APIs
the output is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects. in other words, console.dir() is the way to see all the properties of a specified javascript object in console by which the developer can easily get the properties of the object. note: this feature is available in web workers. syntax console.dir(object); parameters object a javascript object whose properties should be output. specifications specification status comment console apithe definition of 'console.dir()' in that specification. ...
Console.dirxml() - Web APIs
if it is not possible to display as an element the javascript object view is shown instead. the output is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes. syntax console.dirxml(object); parameters object a javascript object whose properties should be output. specifications specification status comment console apithe definition of 'console.dirxml()' in that specification. ...
console - Web APIs
le.assert() log a message and stack trace to console if the first argument is false. console.clear() clear the console. console.count() log the number of times this line has been called with the given label. console.countreset() resets the value of the counter with the given label. console.debug() outputs a message to the console with the log level debug. console.dir() displays an inter
active listing of the properties of a specified javascript object. this listing lets you use disclosure triangles to examine the contents of child objects. console.dirxml() displays an xml/html element representation of the specified object if possible or the javascript object view if it is not possible. console.error() outputs an error message. you may use string substitution and additional argumen...
Detecting device orientation - Web APIs
en view of the web content when the device is rotated so that its width is greater than its height. there are two javascript events that handle orientation information. the first one is the deviceorientationevent, which is sent when the accelerometer detects a change to the orientation of the device. by receiving and processing the data reported by these orientation events, it's possible to inter
actively respond to rotation and elevation changes caused by the user moving the device. the second event is the devicemotionevent, which is sent when a change in acceleration was added. it is different from the deviceorientationevent because it is listening for changes in acceleration as opposed to orientation. sensors that are commonly capable of detecting devicemotionevent include sensors in laptops...
Document.execCommand() - Web APIs
ed to designmode, its document object exposes an execcommand method to run commands that manipulate the current editable region, such as form inputs or contenteditable elements. most commands affect the document's selection (bold, italics, etc.), while others insert new elements (adding a link), or affect an entire line (indenting). when using contenteditable, execcommand() affects the currently
active editable element. syntax document.execcommand(acommandname, ashowdefaultui, avalueargument) return value a boolean that is false if the command is unsupported or disabled. note: only returns true if part of a user interaction. don't try using the return value to verify browser support before calling a command. parameters acommandname a domstring specifying the name of the command to ...
Document.fullscreen - Web APIs
the obsolete document interface's fullscreen read-only property reports whether or not the document is currently displaying content in full-screen mode. although this property is read-only, it will not throw if it is modified (even in strict mode); the setter is a no-operation and it will be ignored. note: since this property is deprecated, you can determine if full-screen mode is
active on the document by checking to see if document.fullscreenelement is not null. syntax var isfullscreen = document.fullscreen; value a boolean value which is true if the document is currently displaying an element in full-screen mode; otherwise, the value is false. example this simple function reports whether or not full-screen mode is currently
active, using the obsolete fullscreen property. functi...
Document.hasFocus() - Web APIs
the hasfocus() method of the document interface returns a boolean value indicating whether the document or any element inside the document has focus. this method can be used to determine whether the
active element in a document has focus. when viewing a document, an element with focus is always the
active element in the document, but an
active element does not necessarily have focus. for example, an
active element within a popup window that is not the foreground doesn't have focus. syntax var focused = document.hasfocus(); return value false if the
active element in the document has no focus; true if the
active element in the document has focus. example this example checks whether the document has focus every 300 milliseconds. to test the functionality of hasfocus(), click on the butto...
Document: pointercancel event - Web APIs
event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is
active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the browser will also send pointerout followed b...
Document: pointerdown event - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. for touch, it is fired when physical contact is made with the digitizer. for pen, it is fired when the stylus makes physical contact with the digitizer. ...
Document: pointerup event - Web APIs
the pointerup event is fired when a pointer is no longer
active. bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): document.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: document.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
Document.timeline - Web APIs
is timeline is unique to each document and persists for the lifetime of the document including calls to document.open(). the time values for this timeline are calculated as a fixed offset from the global clock such that the zero time corresponds to the navigationstart moment plus a signed delta known as the origin time. prior to establishing the navigationstart moment, the document timeline is in
active. note: a document timeline that is associated with a non-
active document is also considered to be in
active. syntax var pagetimeline = document.timeline; var thismoment = pagetimeline.currenttime; value a documenttimeline object. specifications specification status comment web animationsthe definition of 'document.timeline' in that specification. working draft...
Document.visibilityState - Web APIs
visible tab, or only loaded for pre-rendering. possible values are: 'visible' the page content may be at least partially visible. in practice this means that the page is the foreground tab of a non-minimized window. 'hidden' the page content is not visible to the user. 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. 'prerender' the page content is being prerendered and is not visible to the user (considered hidden for purposes of document.hidden). the document may start in this state, but will never transition to it from another value. note: this was removed from the standard. check compatibility table for details. when the value of this property changes, the visibilitychange event is sent to the docu...
DocumentFragment - Web APIs
changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made. ...
DocumentOrShadowRoot.getSelection() - Web APIs
selectedtext is a string (selected text). related objects you can call window.getselection(), which works identically to document.getselection(). it is worth noting that currently getselection() doesn't work on the content of <input> elements in firefox. htmlinputelement.setselectionrange()) could be used to work around this. notice also the difference between selection and focus. document.
activeelement returns the focused element. specifications specification status comment shadow domthe definition of 'documentorshadowroot' in that specification. obsolete initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/...
DocumentOrShadowRoot - Web APIs
documentorshadowroot.fullscreenelementread only returns the element that's currently in full screen mode for this document. documentorshadowroot.pointerlockelement read only returns the element set as the target for mouse events while the pointer is locked. ...
DocumentTimeline.DocumentTimeline() - Web APIs
the documenttimeline() constructor of the web animations api creates a new instance of the documenttimeline object associated with the
active document of the current browsing context. syntax var sharedtimeline = new documenttimeline(options); parameters options an object specifying options for the new timeline. currently the only supported option is the origintime member which specifies the zero time for the documenttimeline as a real number of milliseconds relative to the navigationstart moment of the
active document for the current browsing context. examples we could share a single documenttimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds...
DocumentTimeline - Web APIs
the documenttimeline interface of the the web animations api represents animation timelines, including the default document timeline (accessed via document.timeline). constructor documenttimeline() creates a new documenttimeline object associated with the
active document of the current browsing context. properties this interface inherits its property from its parent, animationtimeline. animationtimeline.currenttime returns the time value in milliseconds for this timeline or null if it is in
active. examples we could share a single documenttimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: const cats = document.query...
DynamicsCompressorNode.attack - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
DynamicsCompressorNode.knee - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
DynamicsCompressorNode.ratio - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
DynamicsCompressorNode.release - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
DynamicsCompressorNode.threshold - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
DynamicsCompressorNode - Web APIs
(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var
active = button.getattribute('data-
active'); if(
active == 'false') { button.setattribute('data-
active', 'true'); button.innerhtml = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(
active == 'true') { button.setattribute('data-
active', 'false'); button.innerhtml = 'add compressi...
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
tax any ext.getqueryext(target, pname); parameters target a glenum specifying the target of the time query. must be ext.timestamp_ext or ext.time_elapsed_ext. pname a glenum specifying which information to return. must be ext.current_query_ext or ext.query_counter_bits_ext. return value depends on pname: if pname is ext.current_query_ext: a webglquery object, which is the currently
active query for the given target. if pname is ext.query_counter_bits_ext: a glint indicating the number of bits used to hold the query result for the given target. examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); var currentquery = ext.getqueryext(ext.timestamp_ext, ...
EXT_disjoint_timer_query - Web APIs
and primitive queries) are possible using webglquery objects. types this extension exposes a new type: gluint64ext unsigned 64-bit integer number. constants this extension exposes seven new constants. ext.query_counter_bits_ext a glint indicating the number of bits used to hold the query result for the given target. ext.current_query_ext a webglquery object, which is the currently
active query for the given target. ext.query_result_ext a gluint64ext containing the query result. ext.query_result_available_ext a glboolean indicating whether or not a query result is available. ext.time_elapsed_ext elapsed time (in nanoseconds). ext.timestamp_ext the current time. ext.gpu_disjoint_ext a glboolean indicating whether or not the gpu performed any disjoint operation. methods ...
EffectTiming.delay - Web APIs
he value of delay corresponds directly to effecttiming.delay in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { delay: delayinmilliseconds }; timingproperties.delay = delayinmilliseconds; value a number specifying the delay, in milliseconds, from the start of the animation's play cycle to the beginning of its
active interval (the time index at which actual animation begins). defaults to 0. examples in the pool of tears example, each tear is passed a random delay via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfallin...
EffectTiming.endDelay - Web APIs
the animation's end time—the time at which an iteration is considered to have finished—is the time at which the animation finishes an iteration (its initial delay, animationeffecttimingreadonly.delay, plus its duration,duration, plus its end delay. ...
Element: DOMActivate event - Web APIs
the domactivate event is fired at an element when it becomes
active, such as when it is clicked on using the mouse or a keypress is used to navigate to it. bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius * 2)...
Element.className - Web APIs
the classname property of the element interface gets and sets the value of the class attribute of the specified element. syntax var cname = elementnodereference.classname; elementnodereference.classname = cname; cname is a string variable representing the class or space-separated classes of the current element. example let el = document.getelementbyid('item'); if (el.classname === '
active'){ el.classname = 'in
active'; } else { el.classname = '
active'; } notes the name classname is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the dom. classname can also be an instance of svganimatedstring if the element is an svgelement. it is better to get/set the classname of an element using element.getattr...
Element.releasePointerCapture() - Web APIs
ment.setpointercapture() method for a description of pointer capture and how to set it for a particular element. syntax targetelement.releasepointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object. return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the
active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. 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 begins...
Element.requestFullscreen() - Web APIs
to full screen is complete. exceptions rather than throw a traditional exception, the requestfullscreen() procedure announces error conditions by rejecting the promise it has returned. the rejection handler receives one of the following exception values: typeerror the typeerror exception may be delivered in any of the following situations: the document containing the element isn't fully
active; that is, it's not the current
active document. the element is not contained by a document. the element is not permitted to use the "fullscreen" feature, either because of feature policy configuration or other access control features. the element and its document are the same node. usage notes compatible elements an element that you wish to place into full-screen mode has to meet a ...
Element.setPointerCapture() - Web APIs
receive pointer events even if the pointer device's contact moves off the element (such as by scrolling or panning). syntax targetelement.setpointercapture(pointerid); parameters pointerid the pointerid of a pointerevent object. return value this method returns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the
active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. 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 begins...
Element - Web APIs
tylemap() returns a stylepropertymapreadonly interface which provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration. eventtarget.dispatchevent() dispatches an event to this node in the dom and returns a boolean that indicates whether no handler canceled the event. element.getanimations() returns an array of animation objects currently
active on the element. element.getattribute() retrieves the value of the named attribute from the current node and returns it as an object. element.getattributenames() returns an array of attribute names from the current element. element.getattributens() retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an object. element.getboundi...
ExtendableEvent - Web APIs
ableevent() creates a new extendableevent object. properties doesn't implement any specific properties, but inherits properties from its parent, event. methods inherits methods from its parent, event. extendableevent.waituntil() extends the lifetime of the event. it is intended to be called in the install eventhandler for the installing worker and on the activate eventhandler for the
active worker. examples this code snippet is from the service worker prefetch sample (see prefetch example live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall, delaying treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully. the promise resolves when all resources have been fetched and cached, or else ...
Using files from web applications - Web APIs
this is explained in the section using hidden file input elements using the click() method, as is the method that invokes the file picker. the handlefiles() method follows: const fileselect = document.getelementbyid("fileselect"), fileelem = document.getelementbyid("fileelem"), filelist = document.getelementbyid("filelist"); fileselect.addeventlist...
FileHandle API - Web APIs
the device. the database itself only stores a pointer to that file. it means that if the filehandle object is stored several times in several dbs or several data stores, all those objects will reference the same unique file. this is not a problem because to access the file, a lockedfile object is required and operations on such object are performed in isolation, meaning that once a lockedfile is
active, all operations of this lockedfile are guaranteed to happen sequentially on the underlying file without being interleaved with operations from other lockedfile. secured write operation for performance reasons, write (and read) operations are done in memory. periodically, the results of those operation are asynchronously flushed to the device storage area. if for some reason a problem occurs bef...
Guide to the Fullscreen API - Web APIs
een) { document.exitfullscreen(); } } } this starts by looking at the value of the fullscreenelement attribute on the document (checking it prefixed with both moz, ms, or webkit). if it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. switching to fullscreen mode is done by calling element.requestfullscreen(). if fullscreen mode is already
active (fullscreenelement is non-null), we call document.exitfullscreen(). prefixing note: currently, only firefox 64 and chrome 71 supports this unprefixed. for the moment not all browsers are implementing the unprefixed version of the api (for vendor agnostic access to the fullscreen api you can use fscreen). here is the table summarizing the prefixes and name differences between them: ...
GlobalEventHandlers.onanimationend - Web APIs
syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window). ...
HTMLAnchorElement - Web APIs
enting that the rev html attribute, specifying the relationship of the link object to the target object. note: currently the w3c html 5.2 spec states that rev is no longer obsolete, whereas the whatwg living standard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmlanchorelement.shape is a domstring representing the shape of the
active area. methods inherits methods from its parent, htmlelement, and implements those from htmlhyperlinkelementutils. htmlelement.blur() removes the keyboard focus from the current element. htmlelement.focus() gives the keyboard focus to the current element. htmlhyperlinkelementutils.tostring() returns a usvstring containing the whole url. it is a synonym for htmlhyperlinkelementutils.href...
HTMLAreaElement - Web APIs
containing a valid url of a linked resource. htmlareaelement.hreflang is a domstring containing that reflects the hreflang html attribute, indicating the language of the linked resource. htmlareaelement.media is a domstring containing that reflects the media html attribute, indicating target media of the linked resource. htmlareaelement.nohref is a boolean flag indicating if the area is in
active (true) or
active (false). htmlhyperlinkelementutils.password is a usvstring containing the password specified before the domain name. htmlhyperlinkelementutils.origin read only returns a usvstring containing the origin of the url, that is its scheme, its domain and its port. htmlhyperlinkelementutils.pathname is a usvstring containing the path name component, if any, of the referenced url.
msAudioDeviceType - Web APIs
rite proprietary attribute, specific to internet explorer and microsoft edge. msaudiodevicetype specifies the output device id that the audio will be sent to. syntax <audio src="sound.mp3" msaudiodevicetype="communications" /> by default, audio on your system will output to your default speakers and be considered a foreground element, meaning that the audio will play only when the element is
active in the app. for real-time communications, you can use the msaudiodevicetype property with the value console, multimedia, or communications to specify where the current audio should output. value include a description of the property's value, including data type and what it represents. value description console specifies that the audio output will be sent to the co...
HTMLBodyElement - Web APIs
4" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers. htmlbodyelement.alink is a domstring that represents the color of
active hyperlinks. htmlbodyelement.background is a domstring that represents the description of the location of the background image resource. note that this is not an uri, though some older version of some browsers do expect it. htmlbodyelement.bgcolor is a domstring that represents the background color for the document. htmlbodyelement.link is a domstring that represents the color of unvis...
HTMLElement: pointercancel event - Web APIs
event handler property onpointercancel some examples of situations that will trigger a pointercancel event: a hardware event occurs that cancels the pointer activities. this may include, for example, the user switching applications using an application switcher interface or the "home" button on a mobile device. the device's screen orientation is changed while the pointer is
active. the browser decides that the user started pointer input accidentally. this can happen if, for example, the hardware supports palm rejection to prevent a hand resting on the display while using a stylus from accidentally triggering events. the touch-action css property prevents the input from continuing. after the pointercancel event is fired, the browser will also send pointerout followed b...
HTMLElement: pointerdown event - Web APIs
for mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. for touch, it is fired when physical contact is made with the digitizer. for pen, it is fired when the stylus makes physical contact with the digitizer. ...
HTMLElement: pointerup event - Web APIs
the pointerup event is fired when a pointer is no longer
active. bubbles yes cancelable yes interface pointerevent event handler property onpointerup examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerup', (event) => { console.log('pointer up'); }); using the onpointerup event handler property: const para = document.queryselector('p'); para.onpointerup = (event) => { console.log('pointer up'); }; specifications specification status pointer events obsolete ...
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 - Web APIs
value is src. htmliframeelement.allowfullscreen is a boolean indicating whether the inline frame is willing to be placed into full screen mode. see using full-screen mode for details. htmliframeelement.allowpaymentrequest is a boolean indicating whether the payment request api may be invoked inside a cross-origin iframe. htmliframeelement.contentdocument read only returns a document, the
active document in the inline frame's nested browsing context. htmliframeelement.contentwindow read only returns a windowproxy, the window proxy for the nested browsing context. htmliframeelement.csp specifies the content security policy that an embedded document must agree to enforce upon itself. htmliframeelement.frameborder is a domstring that indicates whether to create borders between fram...
HTMLImageElement.isMap - Web APIs
tructs the string "?x,y", where x and y indicate the coordinates at which the mouse was clicked as offsets from the top-left corner of the image, specified in css pixels. the browser then fetches that url from the server and displays or downloads it depending on the value of the download attribute. unlike server-side image maps, client-side image maps don't cause the <img> element to adopt inter
active content mode. specifications specification status comment html living standardthe definition of 'htmlimageelement.ismap' in that specification. living standard browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data...
HTMLImageElement.srcset - Web APIs
uation. syntax htmlimageelement.srcset = imagecandidatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image candidate strings to be used when determining which image resource to present inside the <img> element represented by the htmlimageelement. each image candidate string must begin with a valid url referencing a non-inter
active graphic resource. this is followed by a comma (,) character and then a condition descriptor that indicates the circumstances in which the indicated image should be used. space characters, other than the whitespace separating the url and the corresponding condition descriptor, are ignored; this includes both leading and trailing space, as well as space before or after each comma. if the condition...
HTMLMediaElement.autoplay - Web APIs
the htmlmediaelement.autoplay property reflects the autoplay html attribute, indicating whether playback 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 playback when it becomes
active (that is, when mediastream.
active becomes true). note: sites which automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so it should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, autoplay can be useful when creating media elements whose source will be set at a later time, under user control. for a much more in-depth look at...
HTMLMediaElement.ended - Web APIs
the htmlmediaelement.ended indicates whether the media element has ended playback. syntax var isended = htmlmediaelement.ended value a boolean which is true if the media contained in the element has finished playing. if the source of the media is a mediastream, this value is true if the value of the stream's
active property is false. example var obj = document.createelement('video'); console.log(obj.ended); // false specifications specification status comment html living standardthe definition of 'htmlmediaelement.ended' in that specification. living standard html5the definition of 'htmlmediaelement.ended' in that specification. recommendation ...
HTMLMediaElement.networkState - Web APIs
he htmlmediaelement.networkstate property indicates the current state of the fetching of media over the network. syntax var networkstate = audioorvideo.networkstate; value an unsigned short. possible values are: constant value description network_empty 0 there is no data yet. also, readystate is have_nothing. network_idle 1 htmlmediaelement is
active and has selected a resource, but is not using the network. network_loading 2 the browser is downloading htmlmediaelement data. network_no_source 3 no htmlmediaelement src found. examples this example will listen for the audio element to begin playing and then check if it is still loading data. <audio id="example" preload="auto"> <source src="sound.ogg" type...
HTMLMediaElement.src - Web APIs
the htmlmediaelement.src property reflects the value of the html media element's src attribute, which indicates the url of a media resource to use in the element. note: the best way to know the url of the media resource currently in
active use in this element is to look at the value of the currentsrc attribute, which also takes into account selection of a best or preferred media resource from a list provided in an htmlsourceelement (which represents a <source> element). syntax var mediaurl = htmlmediaelement.src; value a usvstring object containing the url of a media resource to use in the element; this property reflects the value of the html element's src attribute. example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification ...
HTMLObjectElement - Web APIs
class, including the class file itself. htmlobjectelement.codebase is a domstring that reflects the codebase html attribute, specifying the base path to use to resolve relative uris. htmlobjectelement.codetype is a domstring that reflects the codetype html attribute, specifying the content type of the data. htmlobjectelement.contentdocument read only returns a document representing the
active document of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.contentwindow read only returns a windowproxy representing the window proxy of the object element's nested browsing context, if any; otherwise null. htmlobjectelement.data returns a domstring that reflects the data html attribute, specifying the address of a resource's data. htmlobjectelement...
The HTML DOM API - Web APIs
object representing the <input> elements whose ids are username and sendbutton. with these, we can access the properties and methods that provide information about and grant control over these elements. the htmlinputelement object for the "send" button's disabled property is set to true, which disables the "send" button so it can't be clicked. in addition, the user name input field is made the
active focus by calling the focus() method it inherits from htmlelement. then addeventlistener() is called to add a handler for the input event to the user name input. this code looks at the length of the current value of the input; if it's zero, then the "send" button is disabled if it's not already disabled. otherwise, the code ensures that the button is enabled. with this in place, the "send" butto...
Working with the History API - Web APIs
r even check that bar2.html exists. suppose now that the user navigates to http://www.microsoft.com, then clicks the back button. at this point, the url bar will display http://mozilla.org/bar2.html. if the user now clicks back again, the url bar will display http://mozilla.org/foo.html, and totally bypass bar.html. the popstate event a popstate event is dispatched to the window every time the
active history entry changes. if the history entry being activated was created by a call to pushstate or affected by a call to replacestate, the popstate event's state property contains a copy of the history entry's state object. see window.onpopstate for sample usage. reading the current state when your page loads, it might have a non-null state object. this can happen, for example, if the page set...
IDBCursor.advance() - Web APIs
e() method of the idbcursor interface sets the number of times a cursor should move its position forward. note: this feature is available in web workers. syntax cursor.advance(count); parameters count the number of times to move the cursor forward. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbcursor's transaction is in
active. typeerror the value passed into the count parameter was zero or a negative number. invalidstateerror the cursor is currently being iterated or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through the records in the ob...
IDBCursor.continue() - Web APIs
y parameter. if no key is specified, the cursor advances to the immediate next position, based on its direction. note: this feature is available in web workers. syntax cursor.continue(key); parameters key optional the key to position the cursor at. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbcursor's transaction is in
active. dataerror the key parameter may have any of the following conditions: the key is not a valid key. the key is less than or equal to this cursor's position and the cursor's direction is next or nextunique. the key is greater than or equal to this cursor's position and this cursor's direction is prev or prevuniqu...
IDBCursor.continuePrimaryKey() - Web APIs
g from an object store will throw an error. note: this feature is available in web workers. syntax cursor.continueprimarykey(key, primarykey); parameters key the key to position the cursor at. primarykey the primary key to position the cursor at. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbcursor's transaction is in
active. dataerror the key parameter may have any of the following conditions: the key is not a valid key. the key is less than or equal to this cursor's position and the cursor's direction is next or nextunique. the key is greater than or equal to this cursor's position and this cursor's direction is prev or prevuniqu...
IDBCursor.delete() - Web APIs
ve to use idbindex.opencursor() instead. note: this feature is available in web workers. syntax myidbcursor.delete(); returns an idbrequest object on which subsequent events related to this operation are fired. the result attribute is set to undefined. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbcursor's transaction is in
active. readonlyerror the transaction mode is read-only. invalidstateerror the cursor was created using idbindex.openkeycursor, is currently being iterated, or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in...
IDBCursor.source - Web APIs
note: this feature is available in web workers. syntax var source = cursor.source; value the idbobjectstore or idbindex that the cursor is iterating over. ...
IDBCursor.update() - Web APIs
s available in web workers. syntax var anidbrequest = myidbcursor.update(value); parameters value the new value to be stored at the current position. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbcursor's transaction is in
active. readonlyerror the transaction mode is read only. invalidstateerror the cursor was created using idbindex.openkeycursor, is currently being iterated, or has iterated past its end. dataerror the underlying object store uses in-line keys and the property in the value at the object store's key path does not mat...
IDBCursor - Web APIs
is feature is available in web workers. properties note: idbcursorwithvalue is an idbcursor interface with an additional value property. idbcursor.source read only returns the idbobjectstore or idbindex that the cursor is iterating. this function never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not
active. idbcursor.direction read only returns the direction of traversal of the cursor. see constants for possible values. idbcursor.key read only returns the key for the record at the cursor's position. if the cursor is outside its range, this is set to undefined. the cursor's key can be any data type. idbcursor.primarykey read only returns the cursor's current effective primary key. if the cu...
IDBDatabase.createObjectStore() - Web APIs
alse. unknown parameters are ignored. returns a new idbobjectstore. 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 callback. for older webkit browsers, you must call first. transactionin
activeerror occurs if a request is made on a source database that doesn't exist (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected ...
IDBDatabase.deleteObjectStore() - Web APIs
ce.deleteobjectstore(name); parameters name the name of the object store you want to delete. 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 callback. for older webkit browsers, you must call first. transactionin
activeerror occurs if a request is made on a source database that doesn't exist (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) notfounderror you are trying to delete an object store that does not exist. names are case sensitive. example var...
IDBIndex.count() - Web APIs
var request = myindex.count(); var request = myindex.count(key); parameters key optional the key or key range that identifies the record to be counted. return value a idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idb...
IDBIndex.get() - Web APIs
key optional a key or idbkeyrange that identifies the record to be retrieved. if this value is null or missing, the browser will use an unbound key range. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idb...
IDBIndex.getAll() - Web APIs
he number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. invalidstateerror the idbindex has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. example var myindex = objectstore.index('index'); var getallrequest = myindex.getall(); getallrequest.onsuccess = function() { console.log(getallrequest.result); } specificat...
IDBIndex.getAllKeys() - Web APIs
he number of records in the query, the browser will only retrieve the first item. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. invalidstateerror the idbindex has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. example var myindex = objectstore.index('index'); var getallkeysrequest = myindex.getallkeys(); getallkeysrequest.onsuccess = function() { console.log(getallkeysrequest.
IDBIndex.getKey() - Web APIs
key optional a key or idbkeyrange that identifies a record to be retrieved. if this value is null or missing, the browser will use an unbound key range. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idb...
IDBIndex.name - Web APIs
value a domstring specifying a name for the index. exceptions there are a several exceptions which can occur when you attempt to change an index's name. invalidstateerror the index, or its object store, has been deleted; or the current transaction is not an upgrade transaction. you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange". transactionin
activeerror the current transaction is not
active. constrainterror an index is already using the specified name. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor() — this works the same as opening a cursor directly on an idbobjectstore using open...
IDBIndex.openCursor() - Web APIs
to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simp...
IDBIndex.openKeyCursor() - Web APIs
to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbindex's transaction is in
active. typeerror the value for the direction parameter is invalid. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a si...
IDBObjectStore.add() - Web APIs
to use to identify the record. if unspecified, it results to null. returns an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror any of the following conditions apply: the object store uses in-line keys or has a key generator, and a key parameter was provided. the object store uses out-of-line keys and has no key generator, and no key parameter was provided. the object store uses in-line keys but no key generator, and the...
IDBObjectStore.clear() - Web APIs
ailable in web workers. syntax var request = objectstore.clear(); returns an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactionin
activeerror this idbobjectstore's transaction is in
active. example in the following code snippet, we open a read/write transaction on our database and clear all the current data out of the object store using clear(). for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbo...
IDBObjectStore.count() - Web APIs
tional a key or idbkeyrange object that specifies a range of records you want to count. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore has been deleted. transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the specified key or key range is invalid. example in this simple fragment we create a transaction, retrieve an object store, then count the number of records in the store using count() — when the success handler fires, we log the count value (an integer) to the console. var transaction = db.transaction(['fthi...
IDBObjectStore.createIndex() - Web APIs
ry is set to true in the objectparameters object. invalidstateerror occurs if either: the method was not called from a versionchange transaction mode callback, i.e. from inside a idbopendbrequest.onupgradeneeded handler. the object store has been deleted. syntaxerror occurs if the provided keypath is not a valid key path. transactionin
activeerror occurs if the transaction this idbobjectstore belongs to is not
active (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the databas...
IDBObjectStore.delete() - Web APIs
rameters key the key of the record to be deleted, or an idbkeyrange to delete all records with keys in range. return value an idbrequest object on which subsequent events related to this operation are fired. the request.result attribute is set to undefined. exceptions this method may raise a domexception of the following types: exception description transactionin
activeerror this object store's transaction is in
active. readonlyerror the object store's transaction mode is read-only. invalidstateerror the object store has been deleted. dataerror the key is not a valid key or a key range. example in the following code snippet, we open a read/write transaction on our database and delete one specific record out ...
IDBObjectStore.deleteIndex() - Web APIs
ers. syntax objectstore.deleteindex(indexname); parameters indexname the name of the existing index to remove. 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 callback. transactionin
activeerror occurs if the transaction this idbobjectstore belongs to is not
active (e.g. has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 1176165.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database. example ...
IDBObjectStore.get() - Web APIs
available in web workers. syntax var request = objectstore.get(key); parameters key the key or key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbobjectstore has been deleted or removed. example in the following code snippet, we open a read/write transaction on our database and get one specific record from object store using get() — a sample record ...
IDBObjectStore.getAll() - Web APIs
ional specifies the number of values to return if more than one is found. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the key or key range provided contains an invalid key or is null. invalidstateerror the idbobjectstore has been deleted or removed. a typeerror exception is thrown if the count parameter is not between 0 and 232-1 included. specifications specification status comment ...
IDBObjectStore.getAllKeys() - Web APIs
ional specifies the number of values to return if more than one is found. if it is lower than 0 or greater than 232-1 a typeerror exception will be thrown. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the key or key range provided contains an invalid key or is null. invalidstateerror the idbobjectstore has been deleted or removed. specifications specification status comment indexed database api draftthe definition of 'getallkeys()' in that specification. re...
IDBObjectStore.getKey() - Web APIs
ailable in web workers. syntax var request = objectstore.getkey(key); parameters key the key or key range that identifies the record to be retrieved. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the key or key range provided contains an invalid key. invalidstateerror the idbobjectstore has been deleted or removed. example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.result; let store = db.transaction("netlogs").ob...
IDBObjectStore.name - Web APIs
alue a domstring containing the object store's name. exceptions there are a several exceptions which can occur when you attempt to change an object store's name. invalidstateerror either the object store has been deleted or the current transaction is not an upgrade transaction; you can only rename indexes during upgrade transactions; that is, when the mode is "versionchange". transactionin
activeerror the current transaction is not
active. constrainterror an object store is already using the specified name. example in the following code snippet, we open a read/write transaction on our database and add some data to an object store using add(). after the object store has been created, we log objectstore.name to the console. for a full working example, see our to-do notifications app (...
IDBObjectStore.openCursor() - Web APIs
s are "next", "nextunique", "prev", and "prevunique". the default is "next". return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the specified key or key range is invalid. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); va...
IDBObjectStore.openKeyCursor() - Web APIs
s are "next", "nextunique", "prev", and "prevunique". the default is "next". return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description invalidstateerror this idbobjectstore or idbindex has been deleted. transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror the specified key or key range is invalid. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); va...
IDBObjectStore.put() - Web APIs
t doesn't know what existing record you might want to modify. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this method may raise a domexception of one of the following types: exception description readonlyerror the transaction associated with this operation is in read-only mode. transactionin
activeerror this idbobjectstore's transaction is in
active. dataerror any of the following conditions apply: the object store uses in-line keys or has a key generator, and a key parameter was provided. the object store uses out-of-line keys and has no key generator, and no key parameter was provided. the object store uses in-line keys but no key generator, and the...
IDBTransaction.commit() - Web APIs
the commit() method of the idbtransaction interface commits the transaction if it is called on an
active transaction. note that commit() doesn't normally have to be called — a transaction will automatically commit when all outstanding requests have been satisfied and no new requests have been made. commit() can be used to start the commit process without waiting for events from outstanding requests to be dispatched. if it is called on a transaction that is not
active, it throws an invalidstateerror domexception. note: this feature is available in web workers. syntax transaction.commit(); parameters none. return value void. exceptions exception description invalidstateerror the transaction state is not
active. examples // open a read/write db tran...
IDBTransaction - Web APIs
inherits from: eventtarget idbtransaction.abort() rolls back all the changes to objects in the database associated with this transaction. if this transaction has been aborted or completed, this method fires an error event. idbtransaction.objectstore() returns an idbobjectstore object representing an object store that is part of the scope of this transaction. idbtransaction.commit() for an
active transaction, commits the transaction. note that this doesn't normally have to be called — a transaction will automatically commit when all outstanding requests have been satisfied and no new requests have been made. commit() can be used to start the commit process without waiting for events from outstanding requests to be dispatched. events listen to these events using addeventlistener() or ...
InstallEvent.InstallEvent() - Web APIs
the installevent() constructor creates a new installevent object. syntax var myinstallevent = new installevent(type, init); parameters type the type of the event. init optional an options object containing any custom settings that you want to apply to the event object. available options are as follows:
activeworker: the serviceworker that is currently
actively controlling the page. ...
InstallEvent - Web APIs
="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object. properties inherits properties from its ancestor, event. installevent.
activeworker read only returns the serviceworker that is currently controlling the page. methods inherits methods from its parent, extendableevent. examples this code snippet is from the service worker prefetch sample (see prefetch running live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall and delays treating the serviceworkerregistration.installing worker as ...
Timing element visibility with the Intersection Observer API - Web APIs
ible or vice-versa, the document.hidden property is checked to see if the document is not currently visible. since it's theoretically possible to get called multiple times, we only proceed if we haven't already paused the timers and saved the visibility states of the existing ads. to pause the timers, all we need to do is remove the ads from the set of visible ads (visibleads) and mark them as in
active. to do so, we begin by saving the set of visible ads into a variable known as previouslyvisibleads to be sure we can restore them when the user tabs back into the document, and we then empty the visibleads set so they won't be treated as visible. then, for each of the ads that are being suspended, we call our updateadtimer() function, which handles updating the ad's total visible time counter, th...
KeyboardEvent.initKeyboardEvent() - Web APIs
or keyup. canbubblearg whether or not the event can bubble. cancelablearg whether or not the event can be canceled. viewarg the windowproxy it is associated to. chararg the value of the char attribute. keyarg the value of the key attribute. locationarg the value of the location attribute. modifierslistarg a whitespace-delineated list of modifier keys that should be considered to be
active on the event's key. for example, specifying "control shift" indicates that the user was holding down the control and shift keys when pressing the key described by the event. repeatarg the value of the repeat attribute. ...
Keyboard API - Web APIs
ation-specific or layout-specific string associated with the key labeled w on an english qwerty keyboard. if (navigator.keyboard) { var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); }); } else { // do something else. } keyboard locking richly inter
active web pages, games, and remote-streaming experiences often require access to special keys and keyboard shortcuts while in full-screen mode. examples of such key/key combinations include escape, alt+tab, and ctrl+n. those keys and key combinations are typically captured by the user agent or the underlying operating system, as illustrated in the following example. to capture the "w", "a", "s", and "...
LockedFile.abort() - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. summary the abort method is used to release the lock on the lockedfile object, making it in
active: its
active property is set to false and all ongoing operations are canceled. note: when an ongoing operation is canceled, there is no rollback (it is not a database transaction), therefore the file can be corrupted if the canceled operation was performing some writing. syntax var request = instanceoflockedfile.abort(); return a filerequest object to handle the success or failure of the operation. ...
Long Tasks API - Web APIs
high/variable input latency. high/variable event handling latency. janky animations and scrolling. ...
MSGraphicsTrust - Web APIs
er. there may also be large incompatibilities between implementations and the behavior may change in the future. the msgraphicstrust() constructor returns an object that provides properties for info on protected video playback. this proprietary method is specific to internet explorer and microsoft edge. syntax var trustobject = media.msgraphicstruststatus; parameters constriction
active a read-only property which returns true when protected media is forced to play in a lower resolution. status a read-only property which returns an enum with the driver status when playing protected content. inheritance hierarchy the msgraphicstrust does not inherit from any class or interface. example var trustobject = media.msgraphicstruststatus; ...
MSManipulationEvent.initMSManipulationEvent() - Web APIs
msmanipulationevent extends uievent { readonly currentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_
active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also m...
MSManipulationEvent - Web APIs
msmanipulationevent extends uievent { readonly currentstate: number; readonly inertiadestinationx: number; readonly inertiadestinationy: number; readonly laststate: number; initmsmanipulationevent(typearg: string, canbubblearg: boolean, cancelablearg: boolean, viewarg: window, detailarg: number, laststate: number, currentstate: number): void; readonly ms_manipulation_state_
active: number; readonly ms_manipulation_state_cancelled: number; readonly ms_manipulation_state_committed: number; readonly ms_manipulation_state_dragging: number; readonly ms_manipulation_state_inertia: number; readonly ms_manipulation_state_preselect: number; readonly ms_manipulation_state_selecting: number; readonly ms_manipulation_state_stopped: number; } see also t...
MediaDeviceInfo.label - Web APIs
syntax var label = mediadeviceinfo.label; value a domstring which describes the media device. for security reasons, the label is always an empty string ("") if the user has not obtained permission to use at least one media device, either by starting a stream from the microphone or camera, or by persistent permissions being granted. ...
MediaDevices.enumerateDevices() - Web APIs
nd + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more mediastreams are
active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status comment media capture and streamsthe...
MediaDevices.getDisplayMedia() - Web APIs
bject to the promise's failure handler. possible errors are: aborterror an error or failure that doesn't match any of the other exceptions below occurred. invalidstateerror the call to getdisplaymedia() was not made from code running due to a user action, such as an event handler. another potential cause for this event: the document in whose context getdisplaymedia() was called is not fully
active; for example, perhaps it is not the frontmost tab. notallowederror permission to access a screen area was denied by the user, or the current browsing instance is not permitted access to screen sharing. notfounderror no sources of screen video are available for capture. notreadableerror the user selected a screen, window, tab, or other source of screen data, but a hardware or operating syste...
MediaRecorder.pause() - Web APIs
the media.pause() method (part of the mediarecorder api) is used to pause recording of media streams. when a mediarecorder object’s pause()method is called, the browser queues a task that runs the below steps: if mediarecorder.state is "in
active", raise a dom invalidstate error and terminate these steps. if not, continue to the next step. set mediarecorder.state to "paused". stop gathering data into the current blob, but keep it available so that recording can be resumed later on. raise a pause event. syntax mediarecorder.pause() return value undefined. exceptions invalidstateerror the mediarecorder is currently "in
active"; you can't pause recording if it's not
active. if you call pause() while already paused, it silently does nothing. example ... pause.onclick = functio...
MediaRecorder.stop() - Web APIs
the mediarecorder.stop() method (part of the mediarecorder api) is used to stop media capture. when the stop() method is invoked, the ua queues a task that runs the following steps: if mediarecorder.state is "in
active", raise a dom invalidstate error and terminate these steps. if the mediarecorder.state is not "in
active", continue on to the next step. set the mediarecorder.state to "in
active" and stop capturing media. raise a dataavailable event containing the blob of data that has been gathered. raise a stop event. syntax mediarecorder.stop() errors an invalidstate error is raised if the stop() method is called while the mediarecorder object’s mediarecorder.state is "in
active" — it makes no sense to stop media capture if it is already stopped. example ... stop.onclick = f...
MediaRecorder - Web APIs
the container's mime type (such as "video/webm" or "video/mp4") and the bit rates of the audio and video tracks or a single overall bit rate. properties mediarecorder.mimetype read only returns the mime type that was selected as the recording container for the mediarecorder object when it was created. mediarecorder.state read only returns the current state of the mediarecorder object (in
active, recording, or paused.) mediarecorder.stream read only returns the stream that was passed into the constructor when the mediarecorder was created. mediarecorder.ignoremutedmedia indicates whether the mediarecorder instance will record input when the input mediastreamtrack is muted. if this attribute is false, mediarecorder will record silence for audio and black frames for video. the default...
MediaSource - Web APIs
e="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers. properties mediasource.sourcebuffers read only returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource. mediasource.
activesourcebuffers read only returns a sourcebufferlist object containing a subset of the sourcebuffer objects contained within mediasource.sourcebuffers — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks. mediasource.readystate read only returns an enum representing the state of the current mediasource, whether it is not currently attac...
MediaStreamTrack: ended event - Web APIs
data left to send. the user revoked the permissions needed for the data to be sent. the hardware generating the source data has been removed or ejected. a remote peer has permanently stopped sending data; pausing media does not generate an ended event. examples this example sets up an event handler for the ended event, which changes an on-screen icon to indicate that the track is no longer
active. track.addeventlistener('ended', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications ...
MediaStreamTrack.getConstraints() - Web APIs
in the returned object are listed in the same order as when they were set, and only properties specifically set by the site or app are included. note: the returned set of constraints doesn't necessarily describe the actual state of the media. even if any of the constraints couldn't be met, they are still included in the returned object as originally set by the site's code. to get the currently
active settings for all constrainable properties, you should instead call getsettings(). example this example obtains the current constraints for a track, sets the facingmode, and applies the updated constraints. function switchcameras(track, camera) { const constraints = track.getconstraints(); constraints.facingmode = camera; track.applyconstraints(constraints); } specifications s...
MediaStreamTrack.onended - Web APIs
the remote peer ending a connection. syntax mediastreamtrack.onended = function; value a function to serve as an eventhandler for the ended event. the event handler function receives a single parameter: the event object, which is a simple event object. examples this example sets up an event handler for the ended event which changes an on-screen icon to indicate that the track is no longer
active. track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification. candidate recommendation initial specification. ...
Using the MediaStream Recording API - Web APIs
(mediarecorder.state); console.log("recorder stopped"); record.style.background = ""; record.style.color = ""; } note that the recording may also stop naturally if the media stream ends (e.g. if you were grabbing a song track and the track ended, or the user stopped sharing their microphone). grabbing and using the blob when recording has stopped, the state property returns a value of "in
active", and a stop event is fired. we register an event handler for this using mediarecorder.onstop, and finalize our blob there from all the chunks we have received: mediarecorder.onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelemen...
MediaTrackConstraints - Web APIs
a constraindouble (a double-precision integer) specifying the intensity of edges. focusdistance a constraindouble (a double-precision integer) specifying distance to a focused object. zoom a constraindouble (a double-precision integer) specifying the desired focal length. torch a boolean defining whether the fill light is continuously connected, meaning it stays on as long as the track is
active. properties of video tracks aspectratio a constraindouble specifying the video aspect ratio or range of aspect ratios which are acceptable and/or required. facingmode a constraindomstring object specifying a facing or an array of facings which are acceptable and/or required. framerate a constraindouble specifying the frame rate or range of frame rates which are acceptable and/or require...
MessagePort.close() - Web APIs
this stops the flow of messages to that port. note: this feature is available in web workers. syntax port.close() returns void. parameters none. 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 - Web APIs
kers. methods inherits methods from its parent, eventtarget postmessage() sends a message from the port, and optionally, transfers ownership of objects to other browsing contexts. start() starts the sending of messages queued on the port (only needed when using eventtarget.addeventlistener; it is implied when using messageport.onmessage.) close() disconnects the port, so it is no longer
active. event handlers inherits event handlers from its parent, eventtarget onmessage an eventlistener called when messageevent of type message is fired on the port—that is, when the port receives a message. onmessageerror an eventlistener called when a messageevent of type messageerror is fired—that is, when it receives a message that cannot be deserialized. events message fired when...
Navigator.wakeLock - Web APIs
the wakelock read-only property returns a wakelock interface which allows a document to acquire a screen wake lock. while a screen wake lock is
active, the user agent will try to prevent the device from dimming the screen, turning it off completely, or showing a screensaver. syntax const wakelock = navigator.wakelock; specifications specification status comment screen wake lock api editor's draft initial definition ...
NetworkInformation.rtt - Web APIs
it excludes connections made to a private address space. if no recent measurement data is available, the value is based on the properties of the underlying connection technology. ...
Notification.Notification() - Web APIs
ssociated with the notification. this can be of any data type. vibrate: a vibration pattern for the device's vibration hardware to emit with the notification. renotify: a boolean specifying whether the user should be notified after a new notification replaces an old one. the default is false, which means they won't be notified. requireinteraction: indicates that a notification should remain
active until the user clicks or dismisses it, rather than closing automatically. the default value is false. actions: an array of notificationactions representing the actions available to the user when the notification is presented. these are options the user can choose among in order to act on the action within the context of the notification itself. the action's name is sent to the service worker no...
Notification.requireInteraction - Web APIs
note: this can be set when the notification is first created by setting the requireinteraction option to true in the options object of the notification.notification() constructor. ...
Notification - Web APIs
r's options parameter. notification.image read only the url of an image to be displayed as part of the notification, as specified in the constructor's options parameter. notification.renotify read only specifies whether the user should be notified after a new notification replaces an old one. notification.requireinteraction read only a boolean indicating that a notification should remain
active until the user clicks or dismisses it, rather than closing automatically. notification.silent read only specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued, regardless of the device settings. notification.timestamp read only specifies the time at which a notification is created or applicable (past, present, or future). notification.title r...
PaymentResponse.complete() - Web APIs
mpletion without a known result state. see the browser compatibility section below for details. return value a promise which resolves with no input value once the payment interface has been fully closed. if an error occurs, the promise instead rejects, returning one of the exceptions listed below. exceptions aborterror the document in which the payment request is taking place became in
active while the user interface was shown. invalidstateerror the payment has already completed, or complete() was called while a request to retry the payment is pending. you can't treat a payment as complete after requesting that the payment be tried again. examples the following example sends payment information to a secure server using the fetch api. it calls complete() with an answer appropriate...
PerformanceNavigationTiming.domComplete - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.dominter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status com...
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.loadEventEnd - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.dominter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status com...
PerformanceNavigationTiming.loadEventStart - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.redirectCount - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.type - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming.unloadEventStart - Web APIs
vents var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom inter
active = " + p.inter
active); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status commen...
PerformanceNavigationTiming - Web APIs
hrestimestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. performancenavigationtiming.domcontentloadedeventstart read only a domhighrestimestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. performancenavigationtiming.dominter
active read only a domhighrestimestamp representing a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to inter
active. performancenavigationtiming.loadeventend read only a domhighrestimestamp representing the time when the load event of the current document is completed. performancenavigationtiming...
PerformanceTiming - Web APIs
d only when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server, the cache, or from a local resource. performancetiming.domloading read only when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. performancetiming.dominter
active read only when the parser finished its work on the main document, that is when its document.readystate changes to 'inter
active' and the corresponding readystatechange event is thrown. performancetiming.domcontentloadedeventstart read only right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing have been exec...
Using the Permissions API - Web APIs
le, the permissions functionality is handled by one function — handlepermission(). this starts off by querying the permission status using permissions.query(). depending on the value of the state property of the permissionstatus object returned when the promise resolves, it reacts differently: "granted" the "enable geolocation" button is hidden, as it isn't needed if geolocation is already
active. "prompt" the "enable geolocation" button is hidden, as it isn't needed if the user will be prompted to grant permission for geolocation. the geolocation.getcurrentposition() function is then run, which prompts the user for permission; it runs the revealposition() function if permission is granted (which shows the map), or the positiondenied() function if permission is denied (which makes the "...
PointerEvent.pointerId - Web APIs
since the value may be randomly generated, it is not guaranteed to convey any particular meaning. syntax var id = pointerevent.pointerid; return value id the pointer event's unique identifier number. example the following code snippet compares a previously saved pointerid with the one of the pointerdown event that was just fired. ...
PointerEvent.pressure - Web APIs
lized pressure of the pointer input. syntax var pressure = pointerevent.pressure; return value pressure the normalized pressure of the pointer input in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively. for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is
active buttons state and 0 otherwise. example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's pressure property. someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { // maximum pressure process_ma...
Using Pointer Events - Web APIs
example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear. selecting a color for each touch in order to make each touch's drawing look different, the colorfortouch() function is used to pick a color based on the touch's unique identifier. this identifier is an opaque number, but we can at least rely on it differing between the currently-
active touches. function colorfortouch(touch) { var r = touch.pointerid % 16; var g = math.floor(touch.pointerid / 3) % 16; var b = math.floor(touch.pointerid / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; log("color for touch with identifier " + touch.pointerid + " ...
PopStateEvent - Web APIs
if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. note: just calling history.pushstate() or history.replacestate() won't trigger a popstate event. ...
PushRegistrationManager - Web APIs
this interface has been superceded by pushmanager. methods pushregistrationmanager.register() returns a promise that resolves to a pushregistration with details of a new registration. pushregistrationmanager.unregister() returns a promise that resolves to a pushregistration with details of the unregistered registration. pushregistrationmanager.getregistration() returns a promise that resolves the pushregistration associated with the current webapp. ...
RTCConfiguration.iceServers - Web APIs
up to the implementation of the user agent. while it can be useful to provide a second server as a fallback 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. if the list of servers is changed while a connection is already
active by calling the the rtcpeerconnection method setconfiguration(), no immediate effect occurs. however, the new list of servers is used for any future renegotiation, such as while handling an ice restart. examples the configuration below opens a new peer connection, specifying two servers for the ice agent to use for negotiation. the first one, stun:stun.services.mozilla.com, requires authenticati...
RTCIceCandidate.tcpType - Web APIs
s about the candidate type. the tcptype field's value is set when the rtcicecandidate() constructor is used. you can't directly set its value; instead, its value is automatically extracted from the candidate a-line, if it's formatted properly. syntax var tcptype = rtcicecandidate.tcptype; value a domstring whose value is one of those defined by the rtcicetcpcandidatetype enumerated type. "
active" the transport will try to open an outbound connection but won't receive inoming connection requests. "passive" the transport will receive incoming connection requests but won't try to open an outbound connection. "so" the transport will try to open a connection simultaneously with its peer. tcptype is null for udp candidates. example in this example, the candidate's protocol and tcptype...
RTCIceCandidateStats.deleted - Web APIs
type of candidate: local candidate a value of true means the candidate has been deleted as described by rfc 5245: 8.3. host candidate a value of true indicates that the candidate's network resources have been released. this generally mean sthat any associated socket(s) have been closed and released. remote (turn) candidate a value of true means the candidate's turn allocation is no longer
active. the net result is the same; the candidate is no longer under consideration if this value is true. example in this example, setinterval() is used to set up a function that runs periodically to display the latest statistics for candidates. only candidates which have not been deleted are included in the output. window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { ...
RTCIceCandidateStats - Web APIs
a boolean value indicating whether or not the candidate has been released or deleted; the default value is false. for local candidates, it's value is true if the candidate has been deleted or released. for host candidates, true means that any network resources (usually a network socket) associated with the candidate have already been released. for turn candidates, the turn allocation is no longer
active for deleted candidates. this property is not present for remote candidates. networktype optional a string from the rtcnetworktype enumerated type which indicates the type of interface used for a local candidate. this property is only present for local candidates. port optional the network port number used by the candidate. priority optional the candidate's priority, corresponding to rtcicec...
RTCIceTcpCandidateType - Web APIs
"passive" the transport will receive incoming connection requests but won't try to open an outbound connection. "so" the transport will try to open a connection simultaneously with its peer. usage notes the rtcicetcpcandidatetype type is used by the tcptype property of rtcicecandidate objects. ...
RTCInboundRtpStreamStats.averageRtcpInterval - Web APIs
e that should elapse between transmissions of rtcp packets. syntax var averagertcpinterval = rtcinboundrtpstreamstats.averagertcpinterval; value a floating-point value indicating the average interval, in seconds, between transmissions of rtcp packets. this interval is computed following the formula outlined in rfc 1889: a.7. because the interval's value is determined in part by the number of
active senders, it will be different for each user of a service. since this value is also used to determine the number of seconds after a stream starts to flow before the first rtcp packet should be sent, the result is that if many users try to start using the service at the same time, the server won't be flooded with rtcp packets coming in all at once. the sending endpoint computes this value when sen...
RTCOutboundRtpStreamStats.averageRtcpInterval - Web APIs
pass between transmissions of rtcp packets on this stream. syntax var averagertcpinterval = rtcoutboundrtpstreamstats.averagertcpinterval; value a floating-point value indicating the average interval, in seconds, between transmissions of rtcp packets. this interval is computed following the formula outlined in rfc 1889: a.7. because the interval's value is determined in part by the number of
active senders, it will be different for each user of a service. since this value is also used to determine the number of seconds after a stream starts to flow before the first rtcp packet should be sent, the result is that if many users try to start using the service at the same time, the server won't be flooded with rtcp packets coming in all at once. the sending endpoint computes this value when sen...
RTCPeerConnection.addTrack() - Web APIs
g to the existing rtcrtpsender and its rtcrtptransceiver: the rtcrtpsender's track is set to the specified track. the sender's set of associated streams is set to the list of streams passed into this method, stream.... the associated rtcrtptransceiver has its currentdirection updated to include sending; if its current value is "recvonly", it becomes "sendrecv", and if its current value is "in
active", it becomes "sendonly". new senders if no existing sender exists that can be reused, a new one is created. this also results in the creation of the associated objects that must exist. the process of creating a new sender results in these changes: the new rtcrtpsender is created with the specified track and set of stream(s). a new rtcrtpreceiver is created with a new mediastreamtrack as it...
RTCPeerConnection.getConfiguration() - Web APIs
ation includes a list of the ice servers used by the connection, information about transport policies, and identity information. syntax var configuration = rtcpeerconnection.getconfiguration(); parameters this method takes no input parameters. return value an rtcconfiguration object describing the rtcpeerconnection's current configuration. example this example adds a new certificate to an
active connection if it doesn't already have one in use. let configuration = mypeerconnection.getconfiguration(); if ((configuration.certificates != undefined) && (!configuration.certificates.length)) { rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]) }).then(function(cert) { ...
RTCPeerConnection.setLocalDescription() - Web APIs
f rtcpeerconnection.localdescription is successfully changed or rejected if the change cannot be applied (for example, if the specified description is incompatible with one or both of the peers on the connection). the promise's fulfillment handler receives no input parameters. the process of changing descriptions actually involves intermediary steps handled by the webrtc layer to ensure that an
active connection can be changed without losing the connection if the change does not succeed. see pending and current descriptions in webrtc connectivity for more details on this process. deprecated parameters in older code and documentation, you may see a callback-based version of this function used. this has been deprecated and its use is strongly discouraged, as it will be removed in the future. ...
RTCPeerConnection.setRemoteDescription() - Web APIs
e connection's remotedescription is successfully changed or rejected if the change cannot be applied (for example, if the specified description is incompatible with one or both of the peers on the connection). the promise fulfillment handler receives no input parameters. note: the process of changing descriptions actually involves intermediary steps handled by the webrtc layer to ensure that an
active connection can be changed without losing the connection if the change does not succeed. see pending and current descriptions in webrtc connectivity for more details on this process. exceptions the following exceptions are reported to the rejection handler for the promise returned by setremotedescription(): invalidaccesserror the content of the description is invalid. invalidstateerror th...
RTCPeerConnection - Web APIs
of the connection's ice agent, as represented by the iceconnectionstate property, changes.onicegatheringstatechange the rtcpeerconnection.onicegatheringstatechange property is an eventhandler which specifies a function to be called when the icegatheringstatechange event is sent to an rtcpeerconnection instance. this happens when the ice gathering state—that is, whether or not the ice agent is
actively gathering candidates—changes.onidentityresult the rtcpeerconnection.onidentityresult event handler is a property containing the code to execute when the identityresult event, of type rtcidentityevent, is received by this rtcpeerconnection. such an event is sent when an identity assertion is generated, via getidentityassertion() or during the creation of an offer or an answer.onidpassertioner...
RTCRtpEncodingParameters - Web APIs
an instance of the webrtc api's rtcrtpencodingparameters dictionary describes a single configuration of a codec for an rtcrtpsender. it's used in the rtcrtpsendparameters describing the configuration of an rtp sender's encodings; rtcrtpdecodingparameters is used to describe the configuration of an rtp receiver's encodings. properties
active if true, the described encoding is currently
actively being used. that is, for rtp senders, the encoding is currently being used to send data, while for receivers, the encoding is being used to decode received data. the default value is true. codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending the stream; the value matches one from the owning rtcrtppar...
RTCRtpSendParameters.encodings - Web APIs
tpsender's track. syntax sendparameters.encodings = encodingparameterlist; encodingparameterlist = sendparameters.encodings; value an array of objects conforming to the rtcrtpencodingparameters dictionary, each of which contains properties which provide settings and parameters that describe and configure a single codec that could be used to encode the track. each object's properties are:
active if true, the described encoding is currently
actively being used. that is, for rtp senders, the encoding is currently being used to send data, while for receivers, the encoding is being used to decode received data. the default value is true. codecpayloadtype when describing a codec for an rtcrtpsender, codecpayloadtype is a single 8-bit byte (or octet) specifying the codec to use for sending ...
RTCStatsReport - Web APIs
the statistic categories the type gives the name of the statistic category represented by the object, and is how you locate the specific type of data you need. the statistic category names are members of the enumerated type rtcstatstype, as follows: candidate-pair an rtcicecandidatepairstats object providing statistics related to an rtcicetransport. candidate pairs other than the currently
active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the
active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. certificate an rtccertificatestats object providing statistics related to a certificate being used by an rtcicetransport. ...
RTCStatsType - Web APIs
the rtcstatstype enumerated type (enum) is a set of strings which define the type of statistics reported in a record found in the rtcstatsreport object. this type determines which of the rtcstats-based dictionaries the record is based upon. values candidate-pair an rtcicecandidatepairstats object providing statistics related to an rtcicetransport. candidate pairs other than the currently
active pair for the transport are deleted when the rtcpeerconnection changes its rtcpeerconnection.icegatheringstate to new during an ice restart. the
active candidate pair is deleted after the transport switches to another candidate pair; this change cannot be detected otherwise. certificate an rtccertificatestats object providing statistics related to a certificate being used by an rtcicetransport. co...
ReadableStreamBYOBReader.releaseLock() - Web APIs
if the associated stream is errored when the lock is released, the reader will appear errored in that same way subsequently; otherwise, the reader will appear closed. a reader’s lock cannot be released while it still has a pending read request, i.e., if a promise returned by the reader’s readablestreambyobreader.read() method has not finished. this will result in a typeerror being thrown. syntax readablestreambyobreader.releaselock(); parameters none. ...
ReadableStreamDefaultReader.cancel() - Web APIs
may not use it. cancel is used when you've completely finished with the stream and don't need any more data from it, even if there are chunks enqueued waiting to be read. that data is lost after cancel is called, and the stream is not readable any more. to read those chunks still and not completely get rid of the stream, you'd use readablestreamdefaultcontroller.close(). note: if the reader is
active, the cancel() method behaves the same as that for the associated stream (readablestream.cancel()). syntax var promise = readablestreamdefaultreader.cancel(reason); parameters reason optional a domstring providing a human-readable reason for the cancellation. return value a promise, which fulfills with the value given in the reason parameter. exceptions typeerror the source object i...
ReportingObserver.disconnect() - Web APIs
the disconnect() method of the reportingobserver interface stops a reporting observer that had previously started observing from collecting reports. after calling disconnect(), neither reportingobserver.takerecords() nor the records parameter of the reportingobserver() callback will return any reports. the associated observer will no longer be
active. syntax reportingobserverinstance.disconnect() examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); observer.observe() ... observer.disconnect() specifications specification status comment reporting apithe definition of 'reportingobserver.disconnect()' in...
SVGAnimationElement: beginEvent event - Web APIs
the beginevent event of the svganimationelement interface is fired when the element local timeline begins to play. it will be raised each time the element begins the
active duration (i.e., when it restarts, but not when it repeats). it may be raised both in the course of normal (i.e. scheduled or inter
active) timeline play, as well as in the case that the element was begun with a dom method. bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="...
SVGAnimationElement: endEvent event - Web APIs
the endevent event of the svganimationelement interface is fired when at the
active end of the animation is reached. note: this event is not raised at the simple end of each animation repeat. this event may be raised both in the course of normal (i.e. scheduled or inter
active) timeline play, as well as in the case that the element was ended with a dom method. bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> ...
SVGAnimationElement - Web APIs
ce time for the current time plus the specified offset. the new instance time is added to the end instance times list. events listen to these events using addeventlistener() or by assigning an event listener to the on... handler property of this interface. beginevent fired when the element local timeline begins to play. also available via the onbegin property. endevent fired when at the
active end of the animation is reached. also available via the onend property. repeatevent fired when the element's local timeline repeats. it will be fired each time the element repeats, after the first iteration. also available via the onrepeat property. specifications specification status comment svg animations level 2the definition of 'svganimationelement' in that spec...
SVGSVGElement - Web APIs
ndleid) note that multiple suspendredraw() calls can be used at once, and that each such method call is treated independently of the other suspendredraw() method calls. svgsvgelement.unsuspendredraw() cancels a specified suspendredraw() by providing a unique suspend handle id that was returned by a previous suspendredraw() call. svgsvgelement.unsuspendredrawall() cancels all currently
active suspendredraw() method calls. this method is most useful at the very end of a set of svg dom calls to ensure that all pending suspendredraw() method calls have been cancelled. svgsvgelement.forceredraw() in rendering environments supporting interactivity, forces the user agent to immediately redraw all regions of the viewport that require updating. svgsvgelement.pauseanimations() suspends (...
Sensor.activated - Web APIs
syntax var boolean = sensorinstance.activated because sensor is a base class, activated may only be read from one of its derived classes. value a boolean. ...
Sensor.onactivate - Web APIs
syntax sensorinstance.onactivate = function sensorinstance.addeventlistener('activate', function() { ... }) because sensor is a base class, onactivate may only be used on one of its derived classes. ...
ServiceWorker.state - Web APIs
o). the code listens for any change in the serviceworker.state and returns its value. var serviceworker; if (registration.installing) { serviceworker = registration.installing; document.queryselector('#kind').textcontent = 'installing'; } else if (registration.waiting) { serviceworker = registration.waiting; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.
active) { serviceworker = registration.
active; document.queryselector('#kind').textcontent = '
active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } specifications specification status comment service workersthe definition of 'state' in that specification. working...
ServiceWorkerContainer.register() - Web APIs
the register() method of the serviceworkercontainer interface creates or updates a serviceworkerregistration for the given scripturl. if successful, a service worker registration ties the provided script url to a scope, which is subsequently used for navigation matching. you can call this method unconditionally from the controlled page. i.e., you don't need to first check whether there's an
active registration. there is frequent confusion surrounding the meaning and use of scope. since a service worker can't have a scope broader than its own location, only use the scope option when you need a scope that is narrower than the default. syntax serviceworkercontainer.register(scripturl, options) .then(function(serviceworkerregistration) { ... }); parameters scripturl the url of the servic...
ServiceWorkerGlobalScope: activate event - Web APIs
bubbles no cancelable no interface extendableevent event handler property serviceworkerglobalscope.onactivate examples the following snippet shows how you could use an activate event handler to upgrade a cache. ...
ServiceWorkerMessageEvent.data - Web APIs
r sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerMessageEvent.lastEventId - Web APIs
ssages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e.lasteventid); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerMessageEvent.origin - Web APIs
ng messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e.origin); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerMessageEvent.ports - Web APIs
ing messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e.ports); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerMessageEvent.source - Web APIs
ng messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e.source); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerMessageEvent - Web APIs
r sending messages between the two, the event object of onmessage will be a serviceworkermessageevent. navigator.serviceworker.ready.then(function(reg) { ... // set up a message channel to communicate with the sw var channel = new messagechannel(); channel.port1.onmessage = function(e) { console.log(e); handlechannelmessage(e.data); } mysw = reg.
active; mysw.postmessage('hello', [channel.port2]); }); ...
ServiceWorkerRegistration.pushManager - Web APIs
syntax var pushmanager = serviceworkerregistration.pushmanager; value a pushmanager object. examples this.onpush = function(event) { console.log(event.data); // from here we can write the data to indexeddb, send it to any open // windows, display a notification, etc. ...
Using Service Workers - Web APIs
mdn.github.io/sw-test/. but the path needs to be written as /sw-test/sw.js, not /sw.js. the service worker being pointed to is on a different origin to that of your app. this is also not allowed. also note: the service worker will only catch requests from clients under the service worker's scope. the max scope for a service worker is the location of the worker. if your service worker is
active on a client being served with the service-worker-allowed header, you can specify a list of max scopes for that worker. in firefox, service worker apis are hidden and cannot be used when the user is in private browsing mode. install and activate: populating your cache after your service worker is registered, the browser will attempt to install then activate the service worker for your page/sit...
ShadowRoot - Web APIs
r closed. this defines whether or not the shadow root's internal features are accessible from javascript. properties included from documentorshadowroot the shadowroot interface includes the following properties defined on the documentorshadowroot mixin. note that this is currently only implemented by chrome; other browsers still implement them on the document interface. documentorshadowroot.
activeelement read only returns the element within the shadow tree that has focus. documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document. methods the shadowroot interface includes the following methods defined on the documentorshadowroot mixin. note that this is currently only implemented by ...
StyleSheet.disabled - Web APIs
note that disabled == false does not guarantee the style sheet is applied (it could be removed from the document, for instance). syntax bool = stylesheet.disabled example // if the stylesheet is disabled... if (stylesheet.disabled) { // ... apply styles in-line. ...
TextTrack - Web APIs
the texttrack interface—part of the api for handling webvtt (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element. properties this interface also inherits properties from eventtarget. texttrack.
activecues read only a texttrackcuelist object listing the currently
active set of text track cues. track cues are
active if the current playback position of the media is between the cues' start and end times. thus, for displayed cues such as captions or subtitles, the
active cues are currently being displayed. texttrack.cues read only a texttrackcuelist which contains all of the track's cues. texttrack.id read only a domstring which identifies the track, if it has one. if it doesn't have an id, then this value is an emp...
TextTrackList: change event - Web APIs
the change event is fired when a text track is made
active or in
active, or a texttracklist is otherwise changed. bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const mediaelement = document.queryselectorall('video, audio')[0]; mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status html living standardthe definition of 'change' in that specification. livi...
TextTrackList - Web APIs
terface also inherits methods from its parent interface, eventtarget. gettrackbyid() returns the texttrack found within the texttracklist whose id matches the specified string. if no match is found, null is returned. events addtrack fired when a new text track has been added to the media element. also available via the onaddtrack property. change fired when a text track has been made
active or in
active. also available via the onchange property. removetrack fired when a new text track has been removed from the media element. also available via the onremovetrack property. usage notes in addition to being able to obtain direct access to the text tracks present on a media element, texttracklist lets you set event handlers on the addtrack and removetrack events, so that you can de...
Touch.target - Web APIs
note that if the target element is removed from the document, events will still be targeted at it, and hence won't necessarily bubble up to the window or document anymore. if there is any risk of an element being removed while it is being touched, the best practice is to attach the touch listeners directly to the target. ...
Touch - Web APIs
cludes the horizontal scroll offset, if any. touch.pagey read only returns the y coordinate of the touch point relative to the top of the document. unlike clienty, this value includes the vertical scroll offset, if any. touch.target read only returns the element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the inter
active area of that element or even been removed from the document. touch area touch.radiusx read only returns the x radius of the ellipse that most closely circumscribes the area of contact with the screen. the value is in pixels of the same scale as screenx. touch.radiusy read only returns the y radius of the ellipse that most closely circumscribes the area of contact with the screen.
TouchEvent.changedTouches - Web APIs
for the touchmove event, it is a list of the touch points that have changed since the last event. for the touchend event, it is a list of the touch points that have been removed from the surface (that is, the set of touch points corresponding to fingers no longer touching the surface). ...
Multi-touch interaction - Web APIs
. // consequently, an application might want to "ignore" some touchmoves. // // this function sets the target element's border to "dashed" to visually // indicate the target received a move event. // ev.preventdefault(); if (logevents) log("touchmove", ev, false); // to avoid too much color flashing many touchmove events are started, // don't update the background if two touch points are
active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's border to dashed to give a clear visual // indication the element received a move event. ev.target.style.border = "dashed"; // check this event for 2-touch move/pinch/zoom gesture handle_pinch_zoom(ev); } touch end handler the touchend handler restores the event target's...
VideoTrack.selected - Web APIs
the videotrack property selected controls whether or not a particular video track is
active. syntax isvideoselected = videotrack.selected; videotrack.selected = true | false; value the selected property is a boolean whose value is true if the track is
active. only a single video track can be
active at any given time, so setting this property to true for one track while another track is
active will make that other track in
active. specifications specification status comment html living standardthe definition of 'videotrack: selected' in that specification. living standard ...
VideoTrackList: change event - Web APIs
the change event is fired when a video track is made
active or in
active, for example by changing the track's selected property. bubbles no cancelable no interface event event handler property onchange examples using addeventlistener(): const videoelement = document.queryselector('video'); videoelement.videotracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); // changing the value of `selected` will trigger the `change` event const toggletrackbutton = document.queryselector('.toggle-track'); toggletrackbutton.addeventlistener('click', () => { const track = videoelement.videotracks[0]; track.selected = !track.selected; }); using the onchange event handler property: const videoelement = ...
VideoTrackList.onchange - Web APIs
the videotracklist property onchange is an event handler which is called when the change event occurs, indicating that a videotrack in the videotracklist has been made
active. the event is passed into the event handler in the form of an event object; the event doesn't provide any additional information. to determine the new state of media's tracks, you'll have to look at their videotrack.selected flags. note: you can also add a handler for the change event using addeventlistener(). syntax videotracklist.onchange = eventhandler; value set onchange to a function that should be called whenever a track is made
active. example this snippet establishes a handler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface cont...
WakeLock.request() - Web APIs
tions are as follows: 'screen': requests a screen wake lock. prevents devices from dimming or locking the screen. return value a promise that resolves with a wakelocksentinel object. exceptions notallowederror thrown when wake lock is not available, which can happen because: document is not allowed to use screen wake lock due to screen-wake-lock policy. document is not fully
active. document is hidden. user agent could not acquire platform's wake lock. examples the following asynchronous function requests a wakelocksentinel object. the request() method is wrapped in a try...catch statement to account for if the browser refuses the request for any reason. const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'...
WakeLockSentinel - Web APIs
interface of the screen wake lock api provides a handle to the underlying platform wake lock and can be manually released and reacquired. an object representing the wake lock is returned via the navigator.wakelock.request() method. an acquired wakelocksentinel can be released manually via the release() method, or automatically via the platform wake lock. this can happen if the document becomes in
active or looses visibility, if the device is low on power or the user turns on a power save mode. releasing all wakelocksentinel instances of a given wake lock type will cause the underlying platform wake lock to be released. properties this interface provides the following properties. type read only returns a string representation of the currently acquired wakelocksentinel type. return values ...
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the x offset within the compressed texture image. yoffset a glint specifying the y offset within the compre...
WebGL2RenderingContext.getBufferSubData() - Web APIs
gth optional a gluint defaulting to 0. return value none. exceptions an invalid_value error is generated if: offset + returneddata.bytelength would extend beyond the end of the buffer returneddata is null offset is less than zero. an invalid_operation error is generated if: zero is bound to target target is transform_feedback_buffer, and any transform feedback object is currently
active. examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.getbuffersubdata(gl.array_buffer, 0, arrbuffer); specifications specification status comment webgl 2.0the definition of 'get...
WebGL2RenderingContext.getQuery() - Web APIs
syntax webglquery gl.getquery(target, pname); parameters target a glenum specifying the target of the query. possible values: gl.any_samples_passed: specifies an occlusion query: these queries detect whether an object is visible (whether the scoped drawing commands pass the depth test and if so, how many samples pass). gl.any_samples_passed_conservative: same as above above, but less accurate and faster version. gl.transform_feedback_primitives_written: number of primitives that are written to transform feedback buffers. ...
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettransformfeedbackvarying() method of the webgl 2 api returns information about varying variables from webgltransformfeedback buffers. syntax webgl
activeinfo gl.gettransformfeedbackvarying(program, index); parameters program a webglprogram. index a gluint specifying the index of the varying variable whose information to retrieve. return value a webgl
activeinfo object. examples
activeinfo = gl.gettransformfeedbackvarying(program, 0); specifications specification status comment webgl 2.0the definition of 'gettransformfeedbackvarying' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgettransformfeedbackvarying' in that specification. standard ma...
WebGL2RenderingContext.texImage3D() - Web APIs
possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. internalformat a glint specifying the color components in the texture. possible values: gl.alpha: discards the red, green and blue c...
Taking still photos with WebRTC - Web APIs
g = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide. height the output height of the image will be computed given the width and the aspect ratio of the stream. streaming indicates whether or not there is currently an
active stream of video running. video this will be a reference to the <video> element after the page is done loading. canvas this will be a reference to the <canvas> element after the page is done loading. photo this will be a reference to the <img> element after the page is done loading. startbutton this will be a reference to the <button> element that's used to trigger capture. we'll get that ...
The WebSocket API (WebSockets) - Web APIs
with this api, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. note: while a websocket connection is functionally somewhat similar to standard unix-style sockets, they are not related. interfaces websocket the primary interface for connecting to a websocket server and then sending and receiving data on the connection. closeevent the event sent by the websocket object when the connection closes. ...
Web Video Text Tracks Format (WebVTT) - Web APIs
p; cue payload text tags there are a number of tags, such as <bold>, that can be used. however, if the webvtt file is used in a <track> element where the attribute kind is chapters then you cannot use tags. timestamp tag the timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. the
active text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. any text before the
active text in the payload is previous text . any text beyond the
active text is future text . this enables karaoke style captions. example 12 - karaoke style text 1 00:16.500 --> 00:18.500 when the moon <00:17.500>hits your e...
Using bounded reference spaces - Web APIs
y. each point's w is always 1 as well. the interior of the bounded area is always considered to be on the right side of the boundary. by listing the points in clockwise order, the boundary is placed inside the defined shape. if the points are listed counterclockwise it would suggest that the safe area lies outside the boundary, probably with undesirable results. you should consider including pro
active checks for the user approaching the boundary. this is useful both for their safety (in case the boundary represents a physical obstacle of some nature) and to avoid possible conditions in which the accuracy is reduced near the boundaries. it's also useful because the user may be engrossed in gameplay or other activity, not realize they're approaching the boundary, and could become confused or dis...
Geometry and reference spaces in WebXR - Web APIs
distance, and background elements. the right balance can create a unique presence and guide your user. the foreground includes objects and interfaces that you can interact with directly. the mid-distance includes objects you can interact with to some extent, or can approach in order to examine and engage with more closely. the background, on the other hand, is usually largely or entirely non-inter
active, at least until and unless the user is able to approach it, bringing it into the mid-distance or foreground range. in webxr, the fundamental concept of a space—as in, a coordinate space in which a scene takes place—is represented by an instance of xrspace. the space is used to make determinations about the relative positions and motion of objects and other entities (such as light sources and...
Movement, orientation, and motion: A WebXR example - Web APIs
buffers.indices); gl.useprogram(programinfo.program); gl.uniformmatrix4fv( programinfo.uniformlocations.projectionmatrix, false, view.projectionmatrix); gl.uniformmatrix4fv( programinfo.uniformlocations.modelviewmatrix, false, modelviewmatrix); gl.uniformmatrix4fv( programinfo.uniformlocations.normalmatrix, false, normalmatrix); gl.
activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); gl.uniform1i(programinfo.uniformlocations.usampler, 0); { const vertexcount = 36; const type = gl.unsigned_short; const offset = 0; gl.drawelements(gl.triangles, vertexcount, type, offset); } } renderscene() begins by calculating how much rotation should occur around each of the three axes in the amount of tim...
WebXR Device API - Web APIs
is article discusses those issues. using bounded reference spaces in this article, we examine how to use a bounded-floor reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their xr hardware or colliding with a physical obstacle. on devices which support it, bounded-floor can be a useful tool in your repertoire. making it inter
active movement, orientation, and motion: a webxr example in this example and tutorial, we use information learned throughout the webxr documentation to create a scene containing a rotating cube which the user can move around using both vr headset and keyboard and mouse. inputs and input sources a guide to input sources and how to efficiently manage the input devices being used to control the webx...
Example and tutorial: Simple synth keyboard - Web APIs
darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:
active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left...
Background audio processing using AudioWorklet - Web APIs
orklet processor the only means by which you can influence the lifespan of your audio worklet processor is through the value returned by process(), which should be a boolean value indicating whether or not to override the user agent's decision-making as to whether or not your node is still in use. in general, the lifetime policy of any audio node is simple: if the node is still considered to be
actively processing audio, it will continue to be used. in the case of an audioworkletnode, the node is considered to be
active if its process() function returns true and the node is either generating content as a source for audio data, or is receiving data from one or more inputs. specifying a value of true as the result from your process() function in essence tells the web audio api that your process...
Web Audio API - Web APIs
seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. however, it can also be used to create advanced inter
active instruments. with that in mind, it is suitable for both developers and musicians alike. we have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the api. there's also a basic concepts behind web audio api article, to help you understand the way digital audio works, specifically in the realm of the api.
Functions and classes available to Web Workers - Web APIs
s url.createobjecturl and url.revokeobjecturl with blob objects accesible to the worker. workers can also create a new url using the url() constructor and call any normal method on the returned object. 21 (21) and 26 (26) for url() constructor no support no support no support webgl with offscreencanvas webgl (web graphics library) is a javascript api for rendering inter
active 3d and 2d graphics within any compatible web browser without the use of plug-ins. 44 (44) behind a feature preference setting. in about:config, set gfx.offscreencanvas.enabled to true. no support no support no support websocket creates and returns a new websocket object; this mimics the behavior of the standard websocket() constructor. 37 (37) 11.0 (yes) (yes)...
Web Workers API - Web APIs
esponsexml and channel attributes on xmlhttprequest always return null. in addition to dedicated workers, there are other types of worker: shared workers are workers that can be utilized by multiple scripts running in different windows, iframes, etc., as long as they are in the same domain as the worker. they are a little more complex than dedicated workers — scripts must communicate via an
active port. see sharedworker for more details. serviceworkers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). they are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the...
Window.getSelection() - Web APIs
which works identically to window.getselection(). it is worth noting that currently getselection() doesn't work on the content of <textarea> and <input> elements in firefox, edge (legacy) and internet explorer. htmlinputelement.setselectionrange() or the selectionstart and selectionend properties could be used to work around this. notice also the difference between selection and focus. document.
activeelement returns the focused element. specifications specification status comment selection apithe definition of 'window.getselection()' in that specification. working draft new spec. ...
Window.innerHeight - Web APIs
to get the outer height of a window, i.e. the height of the whole browser window, see window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view ...
Window.open() - Web APIs
ver use this form of code for links: <a href="javascript:window.open(...)" ...> "javascript:" links break accessibility and usability of webpages in every browser. "javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no
activex, no flash. for various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled. "javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, ctrl+click on links, tab-browsing features in extensions, etc. "javascript:" links will interfere with the process of indexing webpages by ...
Window: popstate event - Web APIs
it changes the current history entry to that of the last page the user visited or, if history.pushstate() has been used to add a history entry to the history stack, that history entry is used instead. bubbles yes cancelable no interface popstateevent event handler property onpopstate the history stack if the history entry being activated was created by a call to history.pushstate() or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. ...
Window.self - Web APIs
in a way that will work not only in a window context (self will resolve to window.self) but also in a worker context (self will then resolve to workerglobalscope.self). example uses of window.self like the following could just as well be replaced by window. ...
Window - Web APIs
available through the onpagehide event handler property. pageshow sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab. also available using the onpageshow event handler property. popstate fired when the
active history entry changes. also available using the onpopstate event handler property. load & unload events beforeunload fired when the window, the document and its resources are about to be unloaded. also available via the onbeforeunload property. domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish...
WindowClient - Web APIs
the service worker client independently selects and uses a service worker for its own loading and sub-resources. methods windowclient inherits methods from its parent interface, client. windowclient.focus() gives user input focus to the current client. windowclient.navigate() loads a specified url into a controlled client page. properties windowclient inherits properties from its parent interface, client. ...
WindowEventHandlers.onpopstate - Web APIs
if the activated history entry was created by a call to history.pushstate(), or was affected by a call to history.replacestate(), the popstate event's state property contains a copy of the history entry's state object. note: calling history.pushstate() or history.replacestate() won't trigger a popstate event. ...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
window.setinterval.ispolyfill = true; } another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. example: var intervalid = setinterval(function() { myfunc('one', 'two', 'three'); }, 1000); another possibility is to use function's bind. example: var intervalid = setinterval(function(arg1) {}.bind(undefined, 10), 1000); in
active tabs requires gecko 5.0(firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) starting in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), intervals are clamped to fire no more often than once per second in in
active tabs. the "this" problem when you pass a method to setinterval() or any other function, it is invoked with the wrong this value. this problem is explained in detail in the ...
WritableStreamDefaultWriter.releaseLock() - Web APIs
if the associated stream is errored when the lock is released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed. syntax writablestreamdefaultwritere.releaselock() parameters none. return value undefined. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... ...
WritableStreamDefaultWriter - Web APIs
eam, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. writablestreamdefaultwriter.close() closes the associated writable stream. writablestreamdefaultwriter.releaselock() releases the writer's lock on the corresponding stream. after the lock is released, the writer is no longer
active. if the associated stream is errored when the lock is released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed. writablestreamdefaultwriter.write() writes a passed chunk of data to a writablestream and its underlying sink, then returns a promise that resolves to indicate the success or failure of the write operation. examples the fol...
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
n secure? was the used ssl certificate valid and what are its details (owner, expiration, certificate authority, etc.)? notes: this code requires elevated privileges to run; you can only call it from a browser extension or from a xulrunner application. the channel property becomes available only after the request is sent and the connection was established, that is, on readystate loaded, inter
active or completed. by setting the mozbackgroundrequest property of the request object and modifying the example appropriately, you can create your own alert dialog to handle ssl exceptions in your firefox extension or xulrunner application. // adapted from the patch for moztcpsocket error reporting (bug 861196). const {cc,ci} = require("chrome"); function createtcperrorfromfailedxhr(xhr) { let s...
XMLHttpRequest.open() - Web APIs
syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc. ignored for non-http(s) urls. url a domstring representing the url to send the request to. async optional an optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. ...
XMLHttpRequest.readyState - Web APIs
response as it loads. done the fetch operation is complete. this could mean that either the data transfer has been completed successfully or failed. the state names are different in versions of internet explorer earlier than 11. instead of unsent, opened, headers_received, loading and done, the names readystate_uninitialized (0), readystate_loading (1), readystate_loaded (2), readystate_inter
active (3) and readystate_complete (4) are used. example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', x...
XRSession.updateRenderState() - Web APIs
syntax xrsession.updaterenderstate(newstate) parameters newstate an object conforming to the xrrenderstateinit dictionary specifying the properties of the session's renderstate to update before rendering the next frame. the specified object may have any combination of the following fields. baselayer optional an xrwebgllayer object from which the webxr compositor will obtain imagery. this is null by default. ...
XRSession - Web APIs
event description end sent to the xrsession object after the webxr session has ended and all hardware-related functions have completed. the event is represented by an object of type xrsessionevent. also available through the onend event handler property. inputsourceschange an event of type xrinputsourceschangeevent sent to the xrsession when the list of
active xr input sources has changed. also available through the oninputsourceschange event handler property. select an event of type xrinputsourceevent which is sent to the session when one of the session's input sources has successfully completed a primary action. this generally corresponds to the user pressing a trigger, touchpad, or button, speaks a command, or performs a recognizable...
XRWebGLLayer.getViewport() - Web APIs
ed by the view. syntax let viewport = xrwebgllayer.getviewport(view); parameters view an xrview object indicating the view for which the viewport is to be returned. return value a xrviewport object representing the viewport which will restrict drawing to the portion of the layer corresponding to the specified view. exceptions invalidstateerror either the specified view is not in an
active xrframe or that xrframe and the xrwebgllayer are not part of the same webxr session. example this example demonstrates in part what the callback 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. this works because the set of views re...
Web APIs
ffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context wakelock wakelocksentinel waveshapernode webgl2renderingcontext webgl
activeinfo webglbuffer webglcontextevent webglframebuffer webglprogram webglquery webglrenderbuffer webglrenderingcontext webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope worker...
ARIA guides - Accessibility
accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. error handling in forms labeling widgets labeling composite widgets and regions managing focus in composite widgets (aria-
activedescendant vs roving tabindex) using landmark roles handling dynamic updates & live regions virtual vs. non virtual mode in at products using drag & drop notifying users of non-aria screen readers fixing structure with presentation role hiding layout tables managing modal and non modal dialogs using aria with html5 how to test aria aria on mobile devices ...
ARIA live regions - Accessibility
bute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using javascript. simple live regions dynamic content which updates without a page reload is generally either a region or a widget. simple content changes which are not inter
active should be marked as live regions. below is a list of each related aria live region property with a description. aria-live: the aria-live=politeness_setting is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. the default setting is off. this attribute is by far the most important. aria-controls: the...
Using the alert role - Accessibility
a dialog box notes using the alert role on an element implies that element has aria-live="assertive". the alert role should only be used for static text content. the element that the alert role is used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where keyboard focus is currently located. if an alert also provides inter
active controls (such as form controls that allow the user to rectify a problem, or an "ok" button that discards the alert) the alertdialog role should be used instead. aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources a...
Using ARIA: Roles, states, and properties - Accessibility
a-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-
activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific properties x-ms-aria-flowfrom ...
ARIA: timer role - Accessibility
keyboard interactions keyboard interaction is xxx. focus is being managed via xxx. the tab , space and enter keys, as well as escape , must be handled by the application. the one exception is if focus xxx. required javascript features keypress used to handle keyboard input and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-
activedescendant is used to manage the focus inside the application container. set in response to keyboard or other application events that change focus or point of interaction. the timer role does not have a related html widget and xxx. the author of the timer must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside something the user cannot exit of. all as...
ARIA: document role - Accessibility
logy user can read when tabbing to it. description by default, web pages are treated as documents; assistive technologies (at) enter browse or read mode when entering a new web page. this mode can be altered through various roles, including the widget and application roles. the document role brings the at back into browse or read mode. generally placed within an application role or other inter
active widget role, the document role is used to indicate a section of a complex composit widget that an assistive technology user should read using its browse or virtual reading mode, if available. because ats with reading mode default to that mode for all elements except for those with a widget or application role set, document role is only useful for focusable elements within a widget or application...
ARIA: gridcell role - Accessibility
ria-describedby. the ids provided for aria-describedby should correspond to parent elements intended to be the rows and columns. by referencing the parent elements with roles of rowheader or columnheader applied to them via aria-describedby, it allows assistive technology to understand the position and relationship of the gridcell element to the rest of the table-style grouping of content. inter
active grids and treegrids editable cells both td elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. this is done by applying the html contenteditable attribute. <td contenteditable="true">notes</td> <div role="gridcell" contenteditable="true">item cost</div> contenteditable will make the element it is appl...
ARIA: rowgroup role - Accessibility
ng the native html table element (<table>) along with the table header (<thead>), footer (<tfoot>), and body (<tbody>) elements whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="table" one of the three possible contexts (along with grid and treegrid) in which you'll find a row. it identifies the row as being part of a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element. role="grid" one of the three possible contexts (along with table and treegrid) in which you'll find a row. it identifies the row as being part of a non-inter
active table structure containing data arranged in rows and columns, similar to the native <table> html element. role="treegrid" si...
ARIA: switch role - Accessibility
unlike a <checkbox> or role="checkbox", there is no indeterminate or mixed state. the switch role does not support the value mixed for the aria-checked attribute; assigning a value of mixed to a switch instead sets the value to false. assistive technologies may choose to represent switch widgets with a specialized presentation to reflect the notion of an on/off switch. since a switch is an inter
active control, it must be focusable and keyboard accessible. if the role is applied to a non-focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for toggling the value of a switch is the space key. the developer is required to change the value of the aria-checked attribute dynamically when the switch is toggled. associated aria roles, states, and properties ...
Web applications and ARIA FAQ - Accessibility
preventdefault(); }, false); } initdemo(); how do assistive technologies work? assistive technologies use an api built into each operating system specifically designed to describe the roles, states, and structure of an application's user interface. for example, a screen reader uses this api to read the user interface with a text-to-speech engine, a magnifier uses it to highlight important or
active areas of the screen, and an onscreen keyboard might use it to provide the most efficient keyboard layout for a given context or ui control. assitive technologies often access a page's dom as well through this api in order to understand the semantics and attributes of the page. aria provides a bridge between the world of the dom and the desktop. browsers expose aria-enabled elements to the assist...
Accessibility Information for Web Authors - Accessibility
>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are usually not even keyboard focusable. furthermore, assistive technologies do not understand what these widgets are supposed to be, or what state they are in or what they are capable of. this document tackles such difficulties and shows several inter
active desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative input devices. join the mozilla accessibility community live chat both end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a ...
Web Accessibility: Understanding Colors and Luminance - Accessibility
see w3c/wcag issue #360. r, g, and b have distinct weights in the relative luminance formula. calculations for relative luminance are not casual ones, luckily, there are tools that will do it for you. here are a few. relative luminance calculation. calculate relative luminance analyze luminosity contr...
Operable - Accessibility
1.1. to achieve aaa conformance, all functionality should be accessible using keyboard controls — with no exceptions. 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. understanding character key shortcuts note: also see the wcag description for guideline 2.1 keyboard accessible: make all functionality available from a keyboard. guideline 2.2 — enough time: provide users enough time to read and use content this guideline covers situations in which functionality may have a time limit. for ex...
Color contrast - Accessibility
text) should be great enough to ensure legibility. when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1
active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as in
active controls, logotypes, or purely decorative text. see the solution section below for further information. having good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain typ...
-moz-user-input - CSS: Cascading Style Sheets
put was one of the proposals leading to the proposed css 3 user-input property, which has not yet reached candidate recommendation (call for implementations). a similar property, user-focus, was proposed in early drafts of a predecessor of the css3 ui specification, but was rejected by the working group. syntax values none the element does not respond to user input, and it does not become :
active. enabled the element accepts user input. for textboxes, this is the default behavior. please note that this value is no longer supported in firefox 60 onwards (bug 1405087). disabled the element does not accept user input. however, this is not the same as setting disabled to true, in that the element is drawn normally. please note that this value is no longer supported in firefox 60 onwards (...
:focus-visible - CSS: Cascading Style Sheets
or be at least 3 to 1. accessible visual focus indicators: give your site some focus! tips for designing useful and usable focus indicators cognition it may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. for users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for inter
active elements may be confusing. specifications specification status comment selectors level 4the definition of ':focus-visible' in that specification. working draft initial definition. ...
:hover - CSS: Cascading Style Sheets
the :hover css pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. it is generally triggered when the user hovers over an element with the cursor (mouse pointer). /* selects any <a> element when "hovered" */ a:hover { color: orange; } styles defined by the :
active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :visited, or :
active) that has at least equal specificity. to style links appropriately, put the :hover rule after the :link and :visited rules but before the :
active one, as defined by the lvha-order: :link — :visited — :hover — :
active. note: the :hover pseudo-class is problematic on touchscreens. depending on the browser, the :hover pseudo-class might never match, matc...
:link - CSS: Cascading Style Sheets
the :link css pseudo-class represents an element that has not yet been visited. it matches every unvisited <a>, <area>, or <link> element that has an href attribute. /* selects any <a> that has not been visited yet */ a:link { color: red; } styles defined by the :link pseudo-class will be overridden by any subsequent link-related pseudo-class (:
active, :hover, or :visited) that has at least equal specificity. to style links appropriately, put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :
active. note: use :any-link to select an element independent of whether it has been visited or not. syntax :link examples by default, most browsers apply a special color value to visited links. thus, the links in this example will...
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text. /* selects any element with an
active placeholder */ :placeholder-shown { border: 2px solid silver; } syntax :placeholder-shown examples basic example this example applies special font and border styles when the placeholder is shown. html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way. you can use the text-overflow property to alter the way overflowing text is displayed. html <input id="input1" pl...
:visited - CSS: Cascading Style Sheets
the :visited css pseudo-class represents links that the user has already visited. for privacy reasons, the styles that can be modified using this selector are very limited. /* selects any <a> that has been visited */ a:visited { color: green; } styles defined by the :visited pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :
active) that has at least equal specificity. to style links appropriately, put the :visited rule after the :link rule but before the :hover and :
active rules, as defined by the lvha-order: :link — :visited — :hover — :
active. 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-c...
prefers-color-scheme - CSS: Cascading Style Sheets
r and return light (value: 0), dark (value: 1), or no-preference (value: 2). (any other value causes firefox to return light.) the prefers-color-scheme css media feature is used to detect if the user has requested the system use a light or dark color theme. syntax light indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an
active preference. dark indicates that user has notified the system that they prefer an interface that has a dark theme. examples the elements below have an initial color theme. they can be further themed according to the user's color scheme preference. html <div class="day">day (initial)</div> <div class="day light-scheme">day (changes in light scheme)</div> <div class="day dark-scheme">day (cha...
scripting - CSS: Cascading Style Sheets
the scripting css media feature can be used to test whether scripting (such as javascript) is available. syntax the scripting feature is specified as a keyword value chosen from the list below. none scripting is completely unavailable on the current document. initial-only scripting is enabled during the initial page load, but not afterwards. enabled scripting is supported and
active on the current document. examples html <p class="script-none">you do not have scripting available. :-(</p> <p class="script-initial-only">your scripting is only enabled during the initial page load. weird.</p> <p class="script-enabled">you have scripting enabled! :-)</p> css p { color: lightgray; } @media (scripting: none) { .script-none { color: red; } } @media (scripting: initial-only...
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element. scaling background images describes how to change the size and repeating behavior of background images. applying color to html elements using css an overview of how css color can be used in html, including for borders. border-image generator this inter
active tool lets you visually create border images (the border-image property). border-radius generator this inter
active tool lets you visually create rounded corners (the border-radius property). box-shadow generator this inter
active tool lets you visually create shadows behind elements (the box-shadow property). specifications specification status comment css backgro...
Ordering Flex Items - CSS: Cascading Style Sheets
explicit order value. you can also use negative values with order, which can be quite useful. if you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. as this is lower than 0 the item will always be displayed first. in the live code example below i have items laid out using flexbox. by changing which item has the class
active assigned to it in the html, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. the items are displayed in what is described in the specification as order-modified document order. the value of the order property is taken into account before the items are displayed. order also changes the paint order of t...
CSS Overflow - CSS: Cascading Style Sheets
s box shadows, border images, text decoration, overhanging glyphs, outlines, etc. the overflow that we sometimes need to manage in css is described as scrollable overflow. this is the content appearing outside of the box for which scrolling mechanisms need to be provided. the overflow properties are how we can control what happens when content overflows a box. basic example the following inter
active example shows how changing the value of the overflow property, changes how the overflow of a fixed height box is dealt with. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. reference css properties overflow overfl...
Using CSS transitions - CSS: Cascading Style Sheets
ss: div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them. it's easy to use transitions to make the effect even more attr
active. before we look at code snippets, you might want to take a look at the live demo (assuming your browser supports transitions). first, we set up the menu using html: <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">contact us</a> <a href="#">links</a> </nav> then we build the css to implement the look and feel of our menu. the relevant portions are shown here: a { color:...
CSS reference - CSS: Cascading Style Sheets
are entirely (ascii) text-based, whereas dom-css / cssom (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
align-items - CSS: Cascading Style Sheets
the css align-items property sets the align-self value on all direct children as a group. in flexbox, it controls the alignment of items on the cross axis. in grid layout, it controls the alignment of items on the block axis within their grid area. the inter
active example below demonstrates some of the values for align-items using grid layout. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* basic keywords */ align-items: normal; align-items: stretch; /* positional alignment */ /* align-items does not take left and right values */ align-items: center; /* pack items around the center */ align-items: ...
all - CSS: Cascading Style Sheets
the all shorthand css property resets all of an element's properties except unicode-bidi, direction, and css custom properties. it can set properties to their initial or inherited values, or to the values specified in another stylesheet origin. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global keyword values. note that none of these values affect the unicode-bidi and direction properties. values initial specifies that all the element's...
animation-delay - CSS: Cascading Style Sheets
the animation-delay css property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. the animation can start later, immediately from its beginning, or immediately and partway through the animation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* multiple animations */ animation-delay: 2.1s, 480ms; values <time> the time offset, from the mo...
animation-iteration-count - CSS: Cascading Style Sheets
the animation-iteration-count css property sets the number of times an animation sequence should be played before stopping. if multiple values are specified, each time the animation is played the next value in the list is used, cycling back to the first value after the last one is used. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. it is often convenient to use the shorthand property animation to set all animation properties at once. syntax /* keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* multiple values */ animation-...
animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles. it is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
based on the operating system's theme. the -moz-appearance and -webkit-appearance properties are non-standard versions of this propery, used (respectively) by gecko (firefox) and by webkit-based (e.g., safari) and blink-based (e.g., chrome, opera) browsers to achieve the same thing. note that firefox and edge also support -webkit-appearance, for compatibility reasons. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the -moz-appearance property was used in xul stylesheets to design custom widgets with platform-appropriate styling. it was also used in the xbl implementations of the widgets that ship with the mozilla pla...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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. even if an element has a...
background-color - CSS: Cascading Style Sheets
the background-color css property sets the background color of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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); /...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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 value...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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> */ backgr...
block-size - CSS: Cascading Style Sheets
the block-size css property defines the horizontal or vertical size of an element's block, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically orien...
border-block-end-color - CSS: Cascading Style Sheets
nes the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax border-block-end-color: yellow; border-block-end-color: #f5f6f7; related properties are border-block-start-color, border-inline-start-color, and border-inline-end-color, which define the other bor...
border-block-end-style - CSS: Cascading Style Sheets
nes the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-end-style: dashed; border-block-end-style: dotted; border-block-end-style: groove; related properties are border-block-start-style, border-inline-start-s...
border-block-end-width - CSS: Cascading Style Sheets
nes the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, w...
border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-c...
border-block-start-color - CSS: Cascading Style Sheets
s the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax border-block-start-color: blue; border-block-start-color: #4c5d21; related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other bor...
border-block-start-style - CSS: Cascading Style Sheets
s the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove; related properties are border-block-end-style, border-inline-sta...
border-block-start-width - CSS: Cascading Style Sheets
s the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width,...
border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, ...
border-bottom-color - CSS: Cascading Style Sheets
the border-bottom-color css property sets the color of an element's bottom border. it can also be set with the shorthand css properties border-color or border-bottom. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single v...
border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius css property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. 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. note: if the value of this property is not set in a borde...
border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. 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. note: if the value of this property is not set in a border-...
border-bottom-width - CSS: Cascading Style Sheets
the border-bottom-width css property sets the width of the bottom border of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the foll...
border-color - CSS: Cascading Style Sheets
each side can be set individually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color. you can find more information about border colors in borders in applying color to html elements using css. ...
border-image-outset - CSS: Cascading Style Sheets
the border-image-outset css property sets the distance by which an element's border image is set out from its border box. the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 45px; /* top | right | bottom | left */ border-image-outse...
border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values belo...
border-inline-end-color - CSS: Cascading Style Sheets
es the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax border-inline-end-color: rebeccapurple; border-inline-end-color: #663399; related properties are border-block-start-color, border-block-end-color, and border-inline-start-color, which define the o...
border-inline-end-style - CSS: Cascading Style Sheets
es the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove; related properties are border-block-start-style, border-block-end-s...
border-inline-end-width - CSS: Cascading Style Sheets
es the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, ...
border-inline-end - CSS: Cascading Style Sheets
the border-inline-end css property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it correspon...
border-inline-start-color - CSS: Cascading Style Sheets
the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax border-inline-start-color: red; border-inline-start-color: #ee4141; related properties are border-block-start-color, border-block-end-color, and border-inline-end-color, which define the other bor...
border-inline-start-style - CSS: Cascading Style Sheets
the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block...
border-inline-start-width - CSS: Cascading Style Sheets
the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width...
border-inline-start - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orient...
border-left-color - CSS: Cascading Style Sheets
the border-left-color css property sets the color of an element's left border. it can also be set with the shorthand css properties border-color or border-left. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent; /* global values */ border-left-color: inherit; border-left-color: initial; border-left-color: unset; the border-left-color property is specified as a single value. values <color> ...
border-left-width - CSS: Cascading Style Sheets
the border-left-width css property sets the width of the left border of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: ...
border-left - CSS: Cascading Style Sheets
as with all shorthand properties, border-left always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-left-style: dotted; border-left: thick green; ... is actually the same as ... border-left-style: dotted; border-left: none thick green; ... ...
border-right-color - CSS: Cascading Style Sheets
the border-right-color css property sets the color of an element's right border. it can also be set with the shorthand css properties border-color or border-right. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <color> values */ border-right-color: red; border-right-color: #ffbb00; border-right-color: rgb(255, 0, 0); border-right-color: hsla(100%, 50%, 25%, 0.75); border-right-color: currentcolor; border-right-color: transparent; /* global values */ border-right-color: inherit; border-right-color: initial; border-right-color: unset; the border-right-color property is specified as a single value. values...
border-right-width - CSS: Cascading Style Sheets
the border-right-width css property sets the width of the right border of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following value...
border-right - CSS: Cascading Style Sheets
as with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-right-style: dotted; border-right: thick green; ... is actually the same as ... ...
border-spacing - CSS: Cascading Style Sheets
the border-spacing css property sets the distance between the borders of adjacent <table> cells. this property applies only when border-collapse is separate. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table. note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it ha...
border-style - CSS: Cascading Style Sheets
the border-style shorthand css property sets the line style for all four sides of an element's border. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-bottom-style border-left-style border-right-style border-top-style syntax /* keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* ...
border-top-color - CSS: Cascading Style Sheets
the border-top-color css property sets the color of an element's top border. it can also be set with the shorthand css properties border-color or border-top. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <color> values */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent; /* global values */ border-top-color: inherit; border-top-color: initial; border-top-color: unset; the border-top-color property is specified as a single value. values <color> the color of ...
border-top-width - CSS: Cascading Style Sheets
the border-top-width css property sets the width of the top border of an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin ...
border-top - CSS: Cascading Style Sheets
as with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-top-style: dotted; border-top: thick green; ... is actually the same as ... ...
border-width - CSS: Cascading Style Sheets
the border-width shorthand css property sets the width of an element's border. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1px 2em ...
border - CSS: Cascading Style Sheets
the border shorthand css property sets an element's border. it sets the values of border-width, border-style, and border-color. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the...
bottom - CSS: Cascading Style Sheets
the bottom css property participates in setting the vertical position of a positioned element. it has no effect on non-positioned elements. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the effect of bottom depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the bottom property specifies the distance between the element's bottom edge and the bottom edge of its containing block. when position is set to relative, the bottom property specifies the distance the element's bottom edge is moved above its normal position. when position is set t...
box-decoration-break - CSS: Cascading Style Sheets
the box-decoration-break css property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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 value...
calc() - CSS: Cascading Style Sheets
the calc() css function lets you perform calculations when specifying css property values. it can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* property: calc(expression) */ width: calc(100% - 80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value. the expression can be any simple expression combining the following operators, using standard operator precedence rules: + addition. - subtraction. * multiplication. at least one of t...
caption-side - CSS: Cascading Style Sheets
the caption-side css property puts the content of a table's <caption> on the specified side. the values are relative to the writing-mode of the table. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* directional values */ caption-side: top; caption-side: bottom; /* warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* global values */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below. values top the caption box should be posi...
caret-color - CSS: Cascading Style Sheets
ible marker where the next character typed will be inserted. this is sometimes referred to as the text input cursor. the caret appears in elements such as <input> or those with the contenteditable attribute. the caret is typically a thin vertical line that flashes to help make it more noticeable. by default, it is black, but its color can be altered with this property. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note that the insertion caret is only one type of caret. for example, many browsers have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-editable text. on...
clamp() - CSS: Cascading Style Sheets
ecting a middle value within a range of values between a defined minimum and maximum. it takes three parameters: a minimum value, a preferred value, and a maximum allowed value. the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. i...
clip-path - CSS: Cascading Style Sheets
the clip-path css property creates a clipping region that sets what part of an element should be shown. parts that are inside the region are shown, while those outside are hidden. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-pa...
color - CSS: Cascading Style Sheets
the color css property sets the foreground color value of an element's text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. for an overview of using color in html, see applying color to html elements using css. syntax /* keyword values */ color: currentcolor; /* <named-color> values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900a...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
initially a part of multi-column layout, the definition of column-gap has been broadened to include multiple layout methods. now specified in box alignment, it may be used in multi-column, flexible box, and grid layouts. css grid layout initially defined the grid-column-gap property. this prefixed property is being replaced by column-gap. ...
column-rule-color - CSS: Cascading Style Sheets
the column-rule-color css property sets the color of the line drawn between columns in a multi-column layout. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <color> values */ column-rule-color: red; column-rule-color: rgb(192, 56, 78); column-rule-color: transparent; column-rule-color: hsla(0, 100%, 50%, 0.6); /* global values */ column-rule-color: inherit; column-rule-color: initial; column-rule-color: unset; the column-rule-color property is specified as a single <color> value. values <color> the color of the rule that separates columns. formal definition initial valuecurrentcolorapplies tomult...
column-rule-style - CSS: Cascading Style Sheets
the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <'border-style'> values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset; the column-rule-style property is specified as a single <'b...
column-rule-width - CSS: Cascading Style Sheets
the column-rule-width css property sets the width of the line drawn between columns in a multi-column layout. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value. values <'border-width'> is a keyword defined by border-width describing the width of the rule. it...
column-width - CSS: Cascading Style Sheets
the column-width css property sets the ideal column width in a multi-column layout. the container will have as many columns as can fit without any of them having a width less than the column-width value. if the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this property can help you create responsive designs that fit different screen sizes. especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact co...
columns - CSS: Cascading Style Sheets
the columns css shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: column-count column-width syntax /* column width */ columns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the value...
conic-gradient() - CSS: Cascading Style Sheets
the conic-gradient() css function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). example conic gradients include pie charts and color wheels. the result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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 ...
cursor - CSS: Cascading Style Sheets
the cursor css property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ cursor: pointer; cursor: auto; /* url, with a keyword fallback */ cursor: url(hand.cur), pointer; /* url and coordinates, with a keyword fallback */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* global values */ cursor: inherit; cursor: initial; cursor: unset; the cursor property is specified as zero or more <url> values, separated by commas, followed by a single mandatory keyword value. each <...
direction - CSS: Cascading Style Sheets
the direction css property sets the direction of text, table columns, and horizontal overflow. use rtl for languages written from right to left (like hebrew or arabic), and ltr for those written from left to right (like english and most other languages). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note that text direction is usually defined within a document (e.g., with html's dir attribute) rather than through direct use of the direction property. the property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. it also sets the default alignm...
blur() - CSS: Cascading Style Sheets
syntax blur(radius) parameters radius the radius of the blur, specified as a <length>. it defines the value of the standard deviation to the gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. a value of 0 leaves the input unchanged. ...
contrast() - CSS: Cascading Style Sheets
syntax contrast(amount) parameters amount the contrast of the result, specified as a <number> or a <percentage>. a value under 100% decreases the contrast, while a value over 100% increases it. a value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged. ...
grayscale() - CSS: Cascading Style Sheets
syntax grayscale(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely grayscale, while a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. default value when omitted is 1. ...
hue-rotate() - CSS: Cascading Style Sheets
syntax hue-rotate(angle) parameters angle the relative change in hue of the input sample, specified as an <angle>. a value of 0deg leaves the input unchanged. a positive hue rotation increases the hue value, while a negative rotation decreases the hue value. the lacuna value for interpolation is 0. ...
invert() - CSS: Cascading Style Sheets
syntax invert(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely inverted, while a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. the lacuna value for interpolation is 0. ...
saturate() - CSS: Cascading Style Sheets
syntax saturate(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value under 100% desaturates the image, while a value over 100% super-saturates it. a value of 0% is completely unsaturated, while a value of 100% leaves the input unchanged. ...
filter - CSS: Cascading Style Sheets
the filter css property applies graphical effects like blur or color shift to an element. filters are commonly used to adjust the rendering of images, backgrounds, and borders. included in the css standard are several functions that achieve predefined effects. you can also reference an svg filter with a url to an svg filter element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filte...
fit-content() - CSS: Cascading Style Sheets
the fit-content() css function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the function can be used as a track size in css grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where t...
flex-flow - CSS: Cascading Style Sheets
the flex-flow css shorthand property specifies the direction of a flex container, as well as its wrapping behavior. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: flex-direction flex-wrap syntax /* flex-flow: <'flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-...
flex-grow - CSS: Cascading Style Sheets
syntax /* <number> values */ flex-grow: 3; flex-grow: 0.6; /* global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; the flex-grow property is specified as a single <number>. values <number> see <number>. negative values are invalid. defaults to 0. ...
flex-shrink - CSS: Cascading Style Sheets
the flex-shrink css property sets the flex shrink factor of a flex item. if the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. in use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <number> values */ flex-shrink: 2; flex-shrink: 0.6; /* global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset; the flex-shrink property is specified as a single <number>. values <number> see <number>. negative ...
flex - CSS: Cascading Style Sheets
the flex css shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three ...
float - CSS: Cascading Style Sheets
the float css property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. the element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. a floating element is one where the computed value of float is not none. as float implies the use of the block layout, it modifies the computed value of the display values, in some cases: specified value computed value inline block inline-block block ...
font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in opentype fonts. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* use the default settings */ font-feature-settings: normal; /* set values for opentype feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand...
font-kerning - CSS: Cascading Style Sheets
kerning defines how letters are spaced. in well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be. in the image below, for instance, the examples on the left do not use kerning, while the ones on the right do: syntax the font-kerning property is specified as one of the keyword values listed below. ...
font-size - CSS: Cascading Style Sheets
the font-size css property sets the size of the font. changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit...
font-variant-caps - CSS: Cascading Style Sheets
when a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. if petite capital glyphs are not available, they are rendered using small capital glyphs. if these are not present, the browser synthesizes them from the uppercase glyphs. ...
font-variant-ligatures - CSS: Cascading Style Sheets
the font-variant-ligatures css property controls which ligatures and contextual forms are used in textual content of the elements it applies to. this leads to more harmonized forms in the resulting text. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */ font-variant-ligatures: no-discretionary-...
font-variant-numeric - CSS: Cascading Style Sheets
the font-variant-numeric css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; font-variant-numeric: lining-nums; /* <numeric-figure-values> */ font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */ font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-f...
font-variant - CSS: Cascading Style Sheets
the font-variant css shorthand property allows you to set all the font variants for a font. you can also set the css level 2 (revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric syntax font-variant: small-caps; font-variant: common-ligatures small-caps; /* global values */ font-variant: inherit; font-variant: initia...
font-variation-settings - CSS: Cascading Style Sheets
the font-variation-settings css property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.7; /* global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two forms: normal text is laid out us...
font-weight - CSS: Cascading Style Sheets
the font-weight css property sets the weight (or boldness) of the font. the weights available depend on the font-family that is currently set. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font...
gap (grid-gap) - CSS: Cascading Style Sheets
the gap css property sets the gaps (gutters) between rows and columns. it is a shorthand for row-gap and column-gap. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. css grid layout initially defined the grid-gap property. this prefixed property is being replaced by gap. however, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the inter
active example above. syntax /* one <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20px 10px; gap: 1em 0.5e...
grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. when grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to that <custom-ident>; otherwise...
grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense. two keywords: row dense or column dense. values row items are placed by f...
grid-column-end - CSS: Cascading Style Sheets
the grid-column-end css property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegrid...
grid-column-start - CSS: Cascading Style Sheets
the grid-column-start css property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. this start position defines the block-start edge of the grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: somegridarea; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; g...
grid-column - CSS: Cascading Style Sheets
the grid-column css shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values. if two <grid-line> values are given they are separated by "/". the grid-column-start longhand is set to the value befor...
grid-row-end - CSS: Cascading Style Sheets
the grid-row-end css property specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-row-end: auto; /* <custom-ident> values */ grid-row-end: somegridarea; /* <integer> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end: 5 somegridarea span; /* global valu...
grid-row-start - CSS: Cascading Style Sheets
the grid-row-start css property specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea s...
grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. constituent properties this property is a shorthand for the following css properties: grid-row-end grid-row-start syntax /* keyword val...
grid-template-columns - CSS: Cascading Style Sheets
the grid-template-columns css property defines the line names and track sizing functions of the grid columns. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-template-columns: none; /* <track-list> values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: minmax(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 1...
grid-template-rows - CSS: Cascading Style Sheets
the grid-template-rows css property defines the line names and track sizing functions of the grid rows. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ grid-template-rows: none; /* <track-list> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename3]; grid-template-rows: minmax(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; grid-template-rows: ...
grid-template - CSS: Cascading Style Sheets
the grid-template css property is a shorthand property for defining grid columns, rows, and areas. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: grid-template-areas grid-template-columns grid-template-rows syntax /* keyword value */ grid-template: none; /* grid-template-rows / grid-template-columns values */ grid-template: 100px 1fr / 50px 1fr; grid-template: auto 1fr / auto 1fr auto; grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* gri...
hyphens - CSS: Cascading Style Sheets
the hyphens css property specifies how words should be hyphenated when text wraps across multiple lines. it can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. hyphenation rules are language-specific. in html, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. in xml, the xml:lang attribute must be used. note: the rules defining how hyphenation is pe...
inline-size - CSS: Cascading Style Sheets
the inline-size css property defines the horizontal or vertical size of an element's block, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertic...
isolation - CSS: Cascading Style Sheets
this property is especially helpful when used in conjunction with mix-blend-mode. syntax /* keyword values */ isolation: auto; isolation: isolate; /* global values */ isolation: inherit; isolation: initial; isolation: unset; the isolation property is specified as one of the keyword values listed below. ...
justify-content - CSS: Cascading Style Sheets
the css justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. the inter
active example below demonstrates some of the values using grid layout. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. syntax /* positional alignment */ justify-content: center; ...
left - CSS: Cascading Style Sheets
the left css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the...
letter-spacing - CSS: Cascading Style Sheets
the letter-spacing css property sets the horizontal spacing behavior between text characters. this value is added to the natural spacing between characters while rendering the text. positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; values ...
line-height - CSS: Cascading Style Sheets
the line-height css property sets the height of a line box. it's commonly used to set the distance between lines of text. on block-level elements, it specifies the minimum height of line boxes within the element. on non-replaced inline elements, it specifies the height that is used to calculate line box height. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* global values */ line-height:...
linear-gradient() - CSS: Cascading Style Sheets
the linear-gradient() css function creates an image consisting of a progressive transition between two or more colors along a straight line. its result is an object of the <gradient> data type, which is a special kind of <image>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* a gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning gree...
list-style-position - CSS: Cascading Style Sheets
it is often more convenient to use the shorthand list-style. note: this property is applied to list items, i.e., elements with display: list-item;. by default this includes <li> elements. because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items. ...
list-style - CSS: Cascading Style Sheets
note: this property is applied to list items, i.e., elements with display: list-item; . by default this includes <li> elements. because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside. ...
margin-block-end - CSS: Cascading Style Sheets
the margin-block-end css property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ margin-block-end: 10px; /* an absolute length */ margin-block-end: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds t...
margin-block-start - CSS: Cascading Style Sheets
the margin-block-start css property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ margin-block-start: 10px; /* an absolute length */ margin-block-start: 1em; /* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; ...
margin-inline-end - CSS: Cascading Style Sheets
nline-end css property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. in other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the text size */ margin-inline-end: 5%; /* relative to the nearest block conta...
margin-inline-start - CSS: Cascading Style Sheets
he margin-inline-start css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block co...
max-block-size - CSS: Cascading Style Sheets
ally use max-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). see the example in writing-mode, which shows the different writing modes in action. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ max-block-size: 300px; max-block-size: 25em; /* <percentage> values */ max-block-size: 75%; /* keyword values */ max-block-size: auto; max-block-size: max-content; max-block-...
max-inline-size - CSS: Cascading Style Sheets
mode. it corresponds to the max-width or the max-height property depending on the value defined for writing-mode. if the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element, otherwise it relates to the maximal width of the element. it relates to max-block-size, which defines the other dimension of the element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-i...
max() - CSS: Cascading Style Sheets
the max() css function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a css property value. the max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). think of the max() value as providing the minimum value a property can have. syntax the max() function takes ...
min-block-size - CSS: Cascading Style Sheets
the min-block-size css property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if ...
min-inline-size - CSS: Cascading Style Sheets
the min-inline-size css property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: un...
min() - CSS: Cascading Style Sheets
the min() css function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a css property value. the min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). in other words, the maximum width is 200px. think of the min() value as providing the maximum value a property can ...
minmax() - CSS: Cascading Style Sheets
the minmax() css function defines a size range greater than or equal to min and less than or equal to max. it is used with css grids. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-br...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode...
object-fit - CSS: Cascading Style Sheets
the object-fit css property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. you can alter the alignment of the replaced element's content object within the element's box using the object-position property. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax the object-fit property is specified as a single keyword chosen from the list of values below. values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. the entire object is made to fill the box, while preserving its aspect r...
object-position - CSS: Cascading Style Sheets
specifies the alignment of the selected replaced element's contents within the element's box. areas of the box which aren't covered by the replaced element's object will show the element's background. you can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <position> values */ object-position: center top; object-position: 100px 50px; /* global values */ object-position: inherit; object-position: initial; object-position: unset; values <positi...
order - CSS: Cascading Style Sheets
the order css property sets the order to lay out an item in a flex or grid container. items in a container are sorted by ascending order value and then by their source code order. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <integer> values */ order: 5; order: -5; /* global values */ order: inherit; order: initial; order: unset; since order is only meant to affect the visual order of elements and not their logical or tab order. order must not be used on non-visual media such as speech. values <integer> represents the ordinal group to be used by the item. accessibility concerns using the order...
outline-color - CSS: Cascading Style Sheets
syntax /* <color> values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* keyword value */ outline-color: invert; /* global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below. ...
outline-offset - CSS: Cascading Style Sheets
syntax /* <length> values */ outline-offset: 3px; outline-offset: 0.2em; /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> the width of the space between the element and its outline. a negative value places the outline inside the element. ...
outline - CSS: Cascading Style Sheets
the outline css shorthand property set all the outline properties in a single declaration. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the ord...
overflow-x - CSS: Cascading Style Sheets
the overflow-x css property sets what shows when content overflows a block-level element's left and right edges. this may be nothing, a scroll bar, or the overflow content. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ overflow-x: visible; overflow-x: hidden; overflow-x: clip; overflow-x: scroll; overflow-x: auto; /* global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset; the overflow-x property is specified as a single keyword chosen from the list of values below. values visible content is not clipped and may be rendered outside the padding box's left and r...
overflow-y - CSS: Cascading Style Sheets
the overflow-y css property sets what shows when content overflows a block-level element's top and bottom edges. this may be nothing, a scroll bar, or the overflow content. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ overflow-y: visible; overflow-y: hidden; overflow-y: clip; overflow-y: scroll; overflow-y: auto; /* global values */ overflow-y: inherit; overflow-y: initial; overflow-y: unset; the overflow-y property is specified as a single keyword chosen from the list of values below. if overflow-x is hidden, scroll or auto and this property is visible (default) it will implicitly ...
overflow - CSS: Cascading Style Sheets
the overflow css shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: overflow-x overflow-y syntax /* keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* global values */ overflow: inherit; overflow: initial; overflow: unset; the overflow property is specified as one or ...
padding-block-end - CSS: Cascading Style Sheets
the padding-block-end css property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: uns...
padding-block-start - CSS: Cascading Style Sheets
the padding-block-start css property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-...
padding-inline-end - CSS: Cascading Style Sheets
the padding-inline-end css property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unse...
padding-inline-start - CSS: Cascading Style Sheets
the padding-inline-start css property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-in...
perspective - CSS: Cascading Style Sheets
the perspective css property determines the distance between the z=0 plane and the user in order to give a 3d-positioned element some perspective. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied. <length> a <length> giving the distance from the user to the z=0 plane. it is used to apply a perspective transform to the element and its content. if the val...
place-content - CSS: Cascading Style Sheets
the place-content css shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as grid or flexbox. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: align-content justify-content syntax /* positional alignment */ /* align-content does not take left and right values */ place-content: center start; place-content: start center; place-content: end left; place-content: flex-start center; place-content: fl...
place-items - CSS: Cascading Style Sheets
the css place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as grid or flexbox. if the second value is not set, the first value is also used for it. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: align-items justify-items syntax /* keyword values */ place-items: auto center; place-items: normal start; /* positional alignment */ place-items: center normal; place-items: start auto; place...
place-self - CSS: Cascading Style Sheets
the place-self css shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as grid or flexbox. if the second value is not present, the first value is also used for it. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: align-self justify-self syntax /* keyword values */ place-self: auto center; place-self: normal start; /* positional alignment */ place-self: center normal; place-self: start auto; ...
pointer-events - CSS: Cascading Style Sheets
the pointer-events css property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblepainted; /* svg only */ pointer-events: visiblefill; /* svg only */ pointer-events: visiblestroke; /* svg only */ pointer-events: visible; /* svg only */ pointer-events: painted; /* svg only */ pointer-events: fill; /* svg only */ pointer-events: stroke; /* svg only */ pointer-events: all; /...
quotes - CSS: Cascading Style Sheets
the quotes css property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the css content property. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword value */ quotes: none; quotes: auto; /* <string> values */ quotes: "«" "»"; /* set open-quote and close-quote to the french quotation marks */ quotes: "«" "»" "‹" "›"; /* set two levels of quotation marks */ /* global values */ quotes: inherit; quotes: initial; quotes: unset; values none the open-quote and close-quote values of the content property produce no quot...
radial-gradient() - CSS: Cascading Style Sheets
the radial-gradient() css function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. its shape may be a circle or an ellipse. the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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-o...
repeating-conic-gradient() - CSS: Cascading Style Sheets
the repeating-conic-gradient() css function creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center). {{embedinter
activeexample("pages/css/function-repeating-conic-gradient.html")}} the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. 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%, ...
repeating-linear-gradient() - CSS: Cascading Style Sheets
the repeating-linear-gradient() css function creates an image consisting of repeating linear gradients. it is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the length of the gradient that repeats is the distance between the first and last color stop. if the first color does not have a color-stop-length, the color-stop-length defaults to 0. with each repetition, the...
repeating-radial-gradient() - CSS: Cascading Style Sheets
image consisting of repeating gradients that radiate from an origin. it is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient() . the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. with each repetition, the positions of the color stops are shifted by a multiple of the dimensions of the basic radial gradient (the distance between the last color stop and the first). thus, the position o...
resize - CSS: Cascading Style Sheets
syntax /* keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single keyword value from the list below. values none the element offers no user-controllable method for resizing it. ...
right - CSS: Cascading Style Sheets
the right css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elem...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
the row-gap css property sets the size of the gap (gutter) between an element's grid rows. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. css grid layout initially defined the grid-row-gap property. this prefixed property is being replaced by row-gap. however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the inter
active example above. syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap...
scroll-margin-block-end - CSS: Cascading Style Sheets
the scroll-margin-block-end property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-block-end: 10px; scroll-margin-block-end: 1em; /* global values */ scroll-margin-block-end: inherit; scroll-margin-block-end: initial; scroll-margin-block-end: u...
scroll-margin-block-start - CSS: Cascading Style Sheets
scroll-margin-block-start property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-block-start: 10px; scroll-margin-block-start: 1em; /* global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-blo...
scroll-margin-block - CSS: Cascading Style Sheets
the scroll-margin-block shorthand property sets the scroll margins of an element in the block dimension. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: scroll-margin-block-end scroll-margin-block-start syntax /* <length> values */ scroll-margin-block: 10px; scroll-margin-block: 1em .5em ; /* global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values repres...
scroll-margin-bottom - CSS: Cascading Style Sheets
the scroll-margin-bottom property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-bottom: 10px; scroll-margin-bottom: 1em; /* global values */ scroll-margin-bottom: inherit; scroll-margin-bottom: initial; scroll-margin-bottom: unset; values <length> an outset from t...
scroll-margin-inline - CSS: Cascading Style Sheets
ed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the inter
active example above, except that here we'll explain to you how it's implemented. the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk ...
scroll-margin-left - CSS: Cascading Style Sheets
the scroll-margin-left property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-left: 10px; scroll-margin-left: 1em; /* global values */ scroll-margin-left: inherit; scroll-margin-left: initial; scroll-margin-left: unset; values <length> an outset from the left edge ...
scroll-margin-right - CSS: Cascading Style Sheets
the scroll-margin-right property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-right: 10px; scroll-margin-right: 1em; /* global values */ scroll-margin-right: inherit; scroll-margin-right: initial; scroll-margin-right: unset; values <length> an outset from the rig...
scroll-margin-top - CSS: Cascading Style Sheets
the scroll-margin-top property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* <length> values */ scroll-margin-top: 10px; scroll-margin-top: 1em; /* global values */ scroll-margin-top: inherit; scroll-margin-top: initial; scroll-margin-top: unset; values <length> an outset from the top edge of the sc...
scroll-padding-block-end - CSS: Cascading Style Sheets
sion of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-block-end: auto; /* <length> values */ scroll-padding-block-end: 10px; scroll-padding-block-end: 1em; scroll-padding-block-end: 10%; /* global values */ scroll...
scroll-padding-block-start - CSS: Cascading Style Sheets
sion of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-block-start: auto; /* <length> values */ scroll-padding-block-start: 10px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values *...
scroll-padding-bottom - CSS: Cascading Style Sheets
ttom of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-bottom: auto; /* <length> values */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* global values */ scroll-padding-bot...
scroll-padding-inline-end - CSS: Cascading Style Sheets
sion of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-inline-end: auto; /* <length> values */ scroll-padding-inline-end: 10px; scroll-padding-inline-end: 1em; scroll-padding-inline-end: 10%; /* global values */ sc...
scroll-padding-inline-start - CSS: Cascading Style Sheets
sion of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-inline-start: auto; /* <length> values */ scroll-padding-inline-start: 10px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global valu...
scroll-padding-left - CSS: Cascading Style Sheets
left of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-left: auto; /* <length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inher...
scroll-padding-right - CSS: Cascading Style Sheets
ight of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-right: auto; /* <length> values */ scroll-padding-right: 10px; scroll-padding-right: 1em; scroll-padding-right: 10%; /* global values */ scroll-padding-right: ...
scroll-padding-top - CSS: Cascading Style Sheets
top of the optimal viewing region of the scrollport: the region used as the target region for placing things in view of the user. this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ scroll-padding-top: auto; /* <length> values */ scroll-padding-top: 10px; scroll-padding-top: 1em; scroll-padding-top: 10%; /* global values */ scroll-padding-top: inherit; s...
shape-outside - CSS: Cascading Style Sheets
the shape-outside css property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. by default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inse...
table-layout - CSS: Cascading Style Sheets
syntax /* keyword values */ table-layout: auto; table-layout: fixed; /* global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most browsers use an automatic table layout algorithm. the widths of the table and its cells are adjusted to fit the content. ...
text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; /* global values */ text-align-last: inherit; text-align-last: initial; text-align-last: unset; values auto the affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-a...
text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block element or table-cell box. this means it works like vertical-align but in the horizontal direction. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* character-based alignment in a table column */ text-align: "."; text-align: "." center; /* block alignment values (non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* global values...
text-decoration-color - CSS: Cascading Style Sheets
the text-decoration-color css property sets the color of decorations added to text by text-decoration-line. the color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. css does not provide a direct mechanism for specifying a unique color for each line type. this effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-col...
text-decoration-style - CSS: Cascading Style Sheets
the text-decoration-style css property sets the style of the lines specified by text-decoration-line. the style applies to all lines that are set with text-decoration-line. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. if the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an html tag, like <del> or <s>. as browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation. when setting multiple line-decoration properties at once, it may be more convenient to ...
text-orientation - CSS: Cascading Style Sheets
the text-orientation css property sets the orientation of the text characters in a line. it only affects text in vertical mode (when writing-mode is not horizontal-tb). it is useful for controlling the display of languages that use vertical script, and also for making vertical table headers. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /* global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset; ...
text-shadow - CSS: Cascading Style Sheets
the text-shadow css property adds shadows to text. it accepts a comma-separated list of shadows to be applied to the text and any of its decorations. each shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow: 5px 5px #558abb; /* color | offset-x | offset-y */ text-shadow: white 2px 5px; /* offset-x | offset-y /*...
text-transform - CSS: Cascading Style Sheets
the text-transform css property specifies how to capitalize an element's text. it can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. it also can help improve legibility for ruby. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the text-transform property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i. in german (de), the ß beco...
text-underline-position - CSS: Cascading Style Sheets
the text-underline-position css property specifies the position of the underline which is set using the text-decoration property's underline value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* single keyword */ text-underline-position: auto; text-underline-position: under; text-underline-position: left; text-underline-position: right; /* multiple keywords */ text-underline-position: under left; text-underline-position: right under; /* global values */ text-underline-position: inherit; text-underline-position: initial; text-underline-position: unset; syntax values auto the user agent uses its own...
perspective() - CSS: Cascading Style Sheets
the perspective() css function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. its result is a <transform-function> data type. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the perspective() transform function is part of the transform value applied on the element being transformed. this differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space. syntax the perspective distance used by perspective() is...
scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a transformation that resizes an element in 3d space. because the amount of scaling is defined by a vector, it can resize different dimensions at different scales. its result is a <transform-function> data type. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is ...
translateZ() - CSS: Cascading Style Sheets
the translatez() css function repositions an element along the z-axis in 3d space, i.e., closer to or farther away from the viewer. its result is a <transform-function> data type. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this transformation is defined by a <length> which specifies how far inward or outward the element or elements move. in the above inter
active examples, perspective: 550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: translatez(tz) is equivalent to translate3d(0, 0, t...
transform-origin - CSS: Cascading Style Sheets
the transformation origin is the point around which a transformation is applied. for example, the transformation origin of the rotate() function is the center of rotation. this property is applied by first translating the element by the value of the property, then applying the element's transform, then translating by the negated property value. ...
transition - CSS: Cascading Style Sheets
the transition css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :
active or dynamically set using javascript. constituent properties this property is a shorthand for the following css properties: transition-delay transition-duration transition-property transition-timing-function syntax /* apply to 1 property */ /* property name | d...
word-break - CSS: Cascading Style Sheets
the word-break css property sets whether line breaks appear wherever the text would otherwise overflow its content box. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax /* keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /* global values */ word-break: inherit; word-break: initial; word-break: unset; the word-break property is specified as a single keyword chosen from the list of values below. values normal use the default line break rule. break-all to prevent overflow, word breaks should be inserted between any two characters ...
word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser. ...
writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. when set for an entire document, it should be set on the root element (html element for html documents). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. thus, it also determines the ordering of block-level content. syntax /* keyword values */ writing-mode: horizontal-tb; writ...
Community - Developer guides
if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here. ...
Creating a cross-browser video player - Developer guides
mute = document.getelementbyid('mute'); var volinc = document.getelementbyid('volinc'); var voldec = document.getelementbyid('voldec'); var progress = document.getelementbyid('progress'); var progressbar = document.getelementbyid('progress-bar'); var fullscreen = document.getelementbyid('fs'); using these handles, events can now be attached to each of the custom control buttons making them inter
active. most of these buttons require a simple click event listener to be added, and a media api defined method and/or attributes to be called/checked on the video. play/pause playpause.addeventlistener('click', function(e) { if (video.paused || video.ended) video.play(); else video.pause(); }); when a click event is detected on the play/pause button, the handler first of all checks if the vid...
DOM onevent handlers - Developer guides
the web platform provides several ways to be notified of dom events. two common approaches are addeventlistener() and the specific onevent handlers. this page focuses on how the latter work. registering onevent handlers the onevent handlers are properties on certain dom elements to manage how that element reacts to events. elements can be inter
active (links, buttons, images, forms, and so forth) or non-inter
active (such as the base <body> element). events are actions like: being clicked detecting pressed keys getting focus the onevent handler is usually named with the event it reacts to, like onclick, onkeypress, onfocus, etc. you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named o...
Content categories - Developer guides
p attribute is present <map>, if it contains only phrasing content <meta>, if the itemprop attribute is present embedded content embedded content imports another resource or inserts content from another mark-up language or namespace into the document. elements that belong to this category include: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, <video>. inter
active content inter
active content includes elements that are specifically designed for user interaction. elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>. some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is presen...
Making content editable - Developer guides
execcommand() method is made available. this lets you run commands to manipulate the contents of the editable region. most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). when using contenteditable, calling execcommand() will affect the currently
active editable element. differences in markup generation use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. for example, even something as simple as what happens when you press enter/return to create a new line of text inside an editable element was handled differently across the major browsers (firefox in...
Constraint validation - Developer guides
udo-classes, :valid or :invalid, applies.) in contrast, the reportvalidity() method reports any constraint failures to the user. by a call to the checkvalidity() or reportvalidity() method on the htmlformelement interface. by submitting the form itself. calling checkvalidity() is called statically validating the constraints, while calling reportvalidity() or submitting the form is called inter
actively validating the constraints. note: if the novalidate attribute is set on the <form> element, inter
active validation of the constraints doesn't happen. calling the submit() method on the htmlformelement interface doesn't trigger a constraint validation. in other words, this method sends the form data to the server even if doesn't satisfy the constraints. call the click() method on a submit ...
User input and controls - Developer guides
rence. when the input device is a mouse, you can also control user input through the pointer lock api and implement drag & drop (see below). finger touch when developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. touch events can help you implement inter
active elements and common interaction gestures on touchscreen devices. if you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired: element.addeventlistener("touchstart", handlestart, false);
element.addeventlistener("touchcancel", handlecancel, false);
element.addeventlistener("touchend", handleend, false);
e...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
alue is finalized. we respond by setting the contents of the <p> element with the id "output" to a string describing the finally selected color. using color wisely making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. the wrong color choice can render your site unattr
active, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness. finding the right colors coming up with just the right colors can be tricky, especially without training in art or design. fortunately, ther...
disabled - HTML: Hypertext Markup Language
that the user cannot interact with the control or it's descendant controls. if this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not have the attribute, then the control is enabled. if declared on an <optgroup>, the select is still inter
active (unless otherwise disabled), but none of the items in the option group are selectable. note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>. when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. conversely, elements that support the disabled attribute but...
HTML attribute: multiple - HTML: Hypertext Markup Language
ion>dopey@woodworkers.com</option> <option>doc@woodworkers.com</option> </select> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the two form controls. /* uncomment this css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:
active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute. depending on the operating system, mouse users can hold the ctrl, command, or shift keys and then click multiple options to select/deselect them. keyboard users can select multiple contiguous items by focusing on the <select> element, selecting an item at the top or bottom of t...
HTML attribute reference - HTML: Hypertext Markup Language
bject>, <video> specifies the height of elements listed here. for all other elements, use the css height property. note: in some instances, such as <div>, this is a legacy attribute, in which case the css height property should be used instead. hidden global attribute prevents rendering of given element, while keeping child elements, e.g. script elements,
active. high <meter> indicates the lower bound of the upper range. href <a>, <area>, <base>, <link> the url of a linked resource. hreflang <a>, <area>, <link> specifies the language of the linked resource. http-equiv <meta> defines a pragma directive. icon <command> specifies a picture which represents the command. id ...
Block-level elements - HTML: Hypertext Markup Language
his binary distinction is replaced with a more complex set of content categories. while the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any html5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in html5. there are also additional categories, e.g. inter
active content. elements the following is a complete list of all html "block-level" elements (although "block-level" is not technically defined for elements that are new in html5). <address> contact information. <article> article content. <aside> aside content. <blockquote> long ("block") quotation. <details> disclosure widget. <dialog> dialog box. <dd> describes a term in a descripti...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
the html abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. if present, title must contain this full description and nothing else. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content permitted content phrasing content tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content implicit aria role no corresponding role ...
<address>: The Contact Address element - HTML: Hypertext Markup Language
the html <address> element indicates that the enclosed html provides contact information for a person or people, or for an organization. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, url, email address, phone number, social media handle, geographic coordinates, and so forth. the <address> element should include the name of the person, people, or organization to which the contact information refers. <add...
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
removal is being considered in webkit and edge. the obsolete html applet element (<applet>) embeds a java applet into the document; this element has been deprecated in favor of <object>. use of java applets on the web is deprecated; most browsers no longer support use of plug-ins, including the java plug-in. content categories flow content, phrasing content, embedded content, inter
active content, palpable content. permitted content zero or more <param> elements, then transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. dom interface htmlappletelement attributes align this attribute is used to position the applet on the page relative to...
<article>: The Article Contents element - HTML: Hypertext Markup Language
the html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). examples include: a forum post, a magazine or newspaper article, or a blog entry. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. a given document can have multiple articles in it; for example, on a blog that shows the text of each article one after another as the reader scrolls, each post would be contained in an <article> element, possibly with one or more <section>s within. content categories flow content, ...
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
element's contents, which are not otherwise granted special importance. this was formerly known as the boldface element, and most browsers still draw the text in boldface. however, you should not use <b> for styling text; instead, you should use the css font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. it's particularly useful when a website dynamically inserts some text and doesn't know the directionality of the text being inserted. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. bidirectional text is text that may contain both sequences of characters that are arranged left-to-right (ltr) and sequences of characters that are arranged right-to-left (rtl), such as an arabic quotation embedded in an english string. browsers implement the unicode bidirectional...
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
the html <blockquote> element (or html block quotation element) indicates that the enclosed text is an extended quotation. usually, this is rendered visually by indentation (see notes for how to change it). a url for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, sectioning root, palpable content. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. ...
<body>: The Document Body element - HTML: Hypertext Markup Language
mitted dom interface htmlbodyelement the <body> element exposes the htmlbodyelement interface. you can access the <body> element through the document.body property. attributes this element includes the global attributes. alink color of text for hyperlinks when selected. this method is non-conforming, use css color property in conjunction with the :
active pseudo-class instead. background uri of a image to use as a background. this method is non-conforming, use css background property on the element instead. bgcolor background color for the document. this method is non-conforming, use css background-color property on the element instead. bottommargin the margin of the bottom of the body. this method is non-conforming, use css margin-bot...
<cite>: The Citation element - HTML: Hypertext Markup Language
the html citation element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work. the reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no correspo...
<colgroup> - HTML: Hypertext Markup Language
content categories none. permitted content if the span attribute is present: none, it is an empty element. if the attribute is not present: zero or more <col> element tag omission the start tag may be omitted, if it has a <col> element as its first child and if it is not preceded by a <colgroup> whose end tag has been omitted. ...
<del>: The Deleted Text element - HTML: Hypertext Markup Language
the html <del> element represents a range of text that has been deleted from a document. this can be used when rendering "track changes" or source code diff information, for example. the <ins> element can be used for the opposite purpose: to indicate text that has been added to the document. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this element is often (but need not be) rendered by applying a strike-through style to the text. content categories phrasing content or flow content. permitted content transparent. tag omission none, both the starting and ending tag are mandatory...
<dfn>: The Definition element - HTML: Hypertext Markup Language
the html definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence. the <p> element, the <dt>/<dd> pairing, or the <section> element which is the nearest ancestor of the <dfn> is considered to be the definition of the term. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content, but no <dfn> element must be a descendant. tag omission none, both the starting and ending tag are mandatory. permitted parents any el...
<dialog>: The Dialog element - HTML: Hypertext Markup Language
the html <dialog> element represents a dialog box or other inter
active component, such as a dismissable alert, inspector, or subwindow. content categories flow content, sectioning root permitted content flow content tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implicit aria role dialog permitted aria roles alertdialog dom interface htmldialogelement attributes this element includes the global attributes. the tabindex attribute must not be used on the <dialog> element. open indicates that the dialog is
active and can be interacted with. when the open attribute is not set, the dialog shouldn't be shown to the user. usag...
<dl>: The Description List element - HTML: Hypertext Markup Language
the html <dl> element represents a description list. the element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, and if the <dl> element's children include one name-value group, palpable content. permitted content either: zero or more groups each consisting of one or more <dt> elements followed by one or more <dd> elements, optionally ...
<dt>: The Description Term element - HTML: Hypertext Markup Language
definition list, and as such must be used inside a <dl> element. it is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element. the subsequent <dd> (description details) element provides the definition or other related text associated with the term specified using <dt>. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories none. permitted content flow content, but with no <header>, <footer>, sectioning content or heading content descendants. tag omission must have a star...
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
the html <figure> (figure with optional caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. the figure, its caption, and its contents are referenced as a single unit. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, sectioning root, palpable content. permitted content a <figcaption> element, followed by flow content; or flow content followed by a <figcaption> element; or flow content. tag omission none, both the starting and ending tag are mandatory. pe...
<form> - HTML: Hypertext Markup Language
it is possible to use the :valid and :invalid css pseudo-classes to style a <form> element based on whether or not the elements inside the form are valid. content categories flow content, palpable content permitted content flow content, but not containing <form> elements tag omission none, both the starting and ending tag are mandatory. ...
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. historically, these have been presented using italicized type, which is the original source of the <i> naming of this element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element ...
<input type="button"> - HTML: Hypertext Markup Language
<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note: while <input> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons. given that a <button>’s label text is inserted between the opening and closing tags, you can include html in the label, even images. value a domstring used as the button's label ...
<input type="checkbox"> - HTML: Hypertext Markup Language
ndered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form. the exact appearance depends upon the operating system configuration under which the browser is running. generally this is a square but it may have rounded corners. a checkbox allows you to select single values for submission in a form (or not). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note: radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow...
<input type="color"> - HTML: Hypertext Markup Language
l notations and a hexadecimal format with an alpha channel. the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and input supported common attributes autocomplete and list i...
<input type="date"> - HTML: Hypertext Markup Language
<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. the resulting value includes the year, month, and day, but not the time. the time and datetime-local input types support time and date+time input. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the input ui generally varies from browser to browser; see browser compatibility for further details. in unsupported browsers, the control degrades gracefully to <input type="text">. among browsers with custom interfaces for selecting dates are chrome and opera...
<input type="datetime-local"> - HTML: Hypertext Markup Language
<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the ...
<input type="month"> - HTML: Hypertext Markup Language
<input> elements of type month create input fields that let the user enter a month and year allowing a month and year to be easily entered. the value is a string whose value is in the format "yyyy-mm", where yyyy is the four-digit year and mm is the month number. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile browser versions — having usable implementations. in browsers that don't support month inputs, the control degrades gracefully to a simple <input ty...
<input type="number"> - HTML: Hypertext Markup Language
<input> elements of type number are used to let the user enter a number. they include built-in validation to reject non-numerical entries. the browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. on browsers that don't support inputs of type number, a number input falls back to type text. value any floating-point number, or empty. events change and input supported common attributes autocomplete, list, placeholder, readonly idl attrib...
<input type="password"> - HTML: Hypertext Markup Language
<input> elements of type password provide a way for the user to securely enter a password. the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•"). this character will vary depending on the user agent and os. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pr...
<input type="range"> - HTML: Hypertext Markup Language
must be no less than a given value, and no more than another given value. the precise value, however, is not considered important. this is typically represented using a slider or dial control rather than a text entry box like the number input type. because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. if the user's browser doesn't support type range, it will fall back and treat it as a text input. value a domstring containing the string representation of the selected numeric value; use value...
<input type="tel"> - HTML: Hypertext Markup Language
<input> elements of type tel are used to let the user enter and edit a telephone number. unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimize...
<input type="text"> - HTML: Hypertext Markup Language
value a domstring representing the text contained in the text field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange(). ...
<input type="time"> - HTML: Hypertext Markup Language
fields designed to let the user easily enter a time (hours and minutes, and optionally seconds). the control's user interface will vary from browser to browser. support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <input type="text">. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increm...
<input type="url"> - HTML: Hypertext Markup Language
the input value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted. the :valid and :invalid css pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. ...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. by convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the html standard. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. <kbd> may be nested in various combinations with the <samp> (sample output) element to represent various forms of input or output based on visual cues. content categories flow content, phrasing content, palpable content. p...
<keygen> - HTML: Hypertext Markup Language
f the public key as part of an html form. this mechanism is designed for use with web-based certificate management systems. it is expected that the <keygen> element will be used in an html form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate. content categories flow content, phrasing content, inter
active content, listed, labelable, submittable, resettable form-associated element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. permitted aria roles none dom interface htmlkeygenelement attri...
<li> - HTML: Hypertext Markup Language
the html <li> element is used to represent an item in a list. it must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). in menus and unordered lists, list items are usually displayed using bullet points. in ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories none. permitted content flow content. tag omission the end tag can be omitted if the list item is immediately followed by another <li> element, or if t...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
the html external resource link element (<link>) specifies relationships between the current document and an external resource. this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. to link an external stylesheet, you'd include a <link> element inside your <head> like this: <link href="main.css" rel="stylesheet"> this simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a...
<main> - HTML: Hypertext Markup Language
the html <main> element represents the dominant content of the <body> of a document. the main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. a document mustn't have more than one <main> element that doesn't have the hidden attribute specified. content categories flow content, palpable content. permitted content flow content. tag omission none; both the starting and ending tags are mandatory. permitted parents whe...
<map> - HTML: Hypertext Markup Language
content categories flow content, phrasing content, palpable content. permitted content any transparent element. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
<menu> - HTML: Hypertext Markup Language
t be in the form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands. this value is the default if the attribute is missing. usage notes the <menu> and <ul> elements both represent an unordered list of items. the key difference is that <ul> primarily contains items for display, whilst <menu> is intended for inter
active items, to act on. an html menu can be used to create context menus (typically activated by right-clicking another element) or toolbars. context menus consist of a <menu> element which contains <menuitem> elements for each selectable option in the menu, <menu> elements for submenus within the menu, and <hr> elements for separator lines to break up the menu's content into sections. context menus ...
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
the html <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. common examples of navigation sections are menus, tables of contents, and indexes. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, sectioning content, palpable content. permitted content flow content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role navigation permitted...
<object> - HTML: Hypertext Markup Language
the html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, inter
active content; listed, submittable form-associated element. permitted content zero or more <param> elements, then transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accept...
<ol>: The Ordered List element - HTML: Hypertext Markup Language
content categories flow content, and if the <ol> element's children include at least one <li> element, palpable content. permitted content zero or more <li>, <script> and <template> elements. tag omission none, both the starting and ending tag are mandatory. ...
<optgroup> - HTML: Hypertext Markup Language
content categories none. permitted content zero or more <option> elements. tag omission the start tag is mandatory. the end tag is optional if this element is immediately followed by another <optgroup> element, or if the parent element has no more content. permitted parents a <select> element. ...
<p>: The Paragraph element - HTML: Hypertext Markup Language
as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but html paragraphs can be any structural grouping of related content, such as images or form fields. paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. see “tag omission” below. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, palpable content. permitted content phrasing content. tag omission the start tag is required. the end tag may be omitted if the <p> eleme...
<picture>: The Picture element - HTML: Hypertext Markup Language
sions of an image for different display/device scenarios. the browser will consider each child <source> element and choose the best match among them. if no matches are found—or the browser doesn't support the <picture> element—the url of the <img> element's src attribute is selected. the selected image is then presented in the space occupied by the <img> element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display dev...
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
the html <pre> element represents preformatted text which is to be presented exactly as written in the html file. the text is typically rendered using a non-proportional ("monospace") font. whitespace inside this element is displayed as written. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. implicit aria role no corresponding role permitted...
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
the html <q> element indicates that the enclosed text is a short inline quotation. most modern browsers implement this by surrounding the text in quotation marks. this element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
the html ruby fallback parenthesis (<rp>) element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element. one <rp> element should enclose each of the opening and closing parentheses that wrap the <rt> element that contains the annotation's text. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories none. permitted content text tag omission the end tag can be omitted if the element is immediately followed by an <rt> or another <rp> element, or if there is no more content in the parent element. ...
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
the html ruby text (<rt>) element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for east asian typography. the <rt> element must always be contained within a <ruby> element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. see the article about the <ruby> element for more examples. content categories none. permitted content phrasing content. tag omission the end tag may be omitted if the <rt> element is immediately followed by an <rt> or <rp> element, or if there is no more content in the p...
<s> - HTML: Hypertext Markup Language
the html <s> element renders text with a strikethrough, or a line through it. use the <s> element to represent things that are no longer relevant or no longer accurate. however, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories phrasing content or flow content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit ...
<samp>: The Sample Output element - HTML: Hypertext Markup Language
the html sample element (<samp>) is used to enclose inline text which represents sample (or quoted) output from a computer program. its contents are typically rendered using the browser's default monospaced font (such as courier or lucida console). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no correspondin...
<section>: The Generic Section element - HTML: Hypertext Markup Language
the html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an html document. typically, but not always, sections have a heading. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. as an example, a navigation menu should be wrapped in a <nav> element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a <section>. note: if the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better choice. conte...
<small>: the side comment element - HTML: Hypertext Markup Language
the html <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. by default, it renders text within it one font-size smaller, such as from small to x-small. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content permitted content phrasing content tag omission none, must have both a start tag and an end tag. permitted parents any element that accepts phrasing content, or any element that accepts flow content. implicit aria role no corresponding ...
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
for the <picture>, the <audio> element, or the <video> element. it is an empty element, meaning that it has no content and does not have a closing tag. it is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories none. permitted content none, it is an empty element. tag omission it must have a start tag, but must not have an end tag. permitted parents ...
<span> - HTML: Hypertext Markup Language
h does not inherently represent anything. it can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. it should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitt...
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
the html disclosure summary element (<summary>) element specifies a summary, caption, or legend for a <details> element's disclosure box. clicking the <summary> element toggles the state of the parent <details> element open and closed. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. permitted content phrasing content or one element of heading content tag omission none, both the start tag and the end tag are mandatory. permitted parents the <details> element. implicit aria role button permitted aria roles no role permitted dom interface htmlelemen...
<table>: The Table element - HTML: Hypertext Markup Language
the html <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content permitted content in this order: an optional <caption> element, zero or more <colgroup> elements, an optional <thead> element, either one of the following: zero or more <tbody> elements one or more <tr> elements an optional <tfoot> element tag omissio...
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
content categories sectioning root. permitted content flow content. tag omission the start tag is mandatory. the end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. permitted parents a <tr> element. ...
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
content categories none. permitted content zero or more <tr> elements. tag omission the start tag is mandatory. the end tag may be omitted if there is no more content in the parent <table> element. permitted parents a <table> element. the <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. ...
<thead>: The Table Head element - HTML: Hypertext Markup Language
content categories none. permitted content zero or more <tr> elements. tag omission the start tag is mandatory. the end tag may be omitted if the <thead> element is immediately followed by a <tbody> or <tfoot> element. permitted parents a <table> element. ...
<time> - HTML: Hypertext Markup Language
ific period in time. it may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders. it may represent one of the following: a time on a 24-hour clock. a precise date in the gregorian calendar (with optional time and timezone information). a valid time duration. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory...
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
that it has a non-textual annotation. this is rendered by default as a simple solid underline, but may be altered using css. this element used to be called the "underline" element in older versions of html, and is still sometimes misused in this way. to underline text, you should instead apply a style that includes the css text-decoration property set to underline. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. see the usage notes section for further details on when it's appropriate to use <u> and when it isn't. content categories flow content, phrasing content, palpable content. permitted co...
<var>: The Variable element - HTML: Hypertext Markup Language
the html variable element (<var>) represents the name of a variable in a mathematical expression or a programming context. it's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding ro...
accesskey - HTML: Hypertext Markup Language
the accesskey global attribute provides a hint for generating a keyboard shortcut for the current element. the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. note: in the whatwg spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. however, this does not work in most browsers. ie/edge uses the first one it supports without problems, provided there are no conflicts with other commands. the way to activate t...
class - HTML: Hypertext Markup Language
the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. though the specification doesn't put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element. for example, attribute to describe an attribute rather than italics, although an element of this class...
id - HTML: Hypertext Markup Language
the id global attribute defines an identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. this attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable information (although having your ids somewhat human-readable can be useful for code comprehension, e.g. consider ticket-18659 versus r45tgfe-freds&$@). id's value must not contain whitespace (spaces, tabs etc.). browsers treat non-conforming...
itemtype - HTML: Hypertext Markup Language
google and other major search engines support the schema.org vocabulary for structured data. this vocabulary defines a standard set of type names and property names. ...
lang - HTML: Hypertext Markup Language
anguage that non-editable elements are written in, or the language that the editable elements should be written in by the user. the attribute contains a single “language tag” in the format defined in tags for identifying languages (bcp47). the default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. if the attribute value is the empty string (lang=""), the language is set to unknown; if the language tag is not valid according to bcp47, it is set to invalid. language tag syntax the full bcp47 syntax...
style - HTML: Hypertext Markup Language
the style global attribute contains css styling declarations to be applied to the element. note that it is recommended for styles to be defined in a separate file or files. this attribute and the <style> element have mainly the purpose of allowing for quick styling, for example for testing purposes. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. usage note: this attribute must not be used to convey semantic information. even if all styling is removed, a page should remain semantically correct. typically it shouldn't be used to hide irrelevant information; this should be done using the hidden attribute. specificat...
title - HTML: Hypertext Markup Language
the title global attribute contains text representing advisory information related to the element it belongs to. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback 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. multiline titles the title attribute may contain several lines. each u+000a line feed (lf) character represents a line break. some ca...
Global attributes - HTML: Hypertext Markup Language
d defines the scope of the itemtype associated with it. itemtype is a valid url of a vocabulary (such as schema.org) that describes the item and its properties context. itemtype specifies the url of the vocabulary that will be used to define itemprops (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be
active. lang helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. the attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in tags for identifying languages (bcp47). xml:lang has priority over it. part a space-separated list of the ...
Microdata - HTML: Hypertext Markup Language
fines the scope of the itemtype associated with it. itemtype is a valid url of a vocabulary (such as schema.org) that describes the item and its properties context. itemtype – specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be
active. example html <div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="rat...
Preloading content with rel="preload" - HTML: Hypertext Markup Language
e font will be available for the page render, cutting down on fout (flash of unstyled text). this doesn't have to be limited to images, or even files of the same type — think big! you could perhaps preload and display a simple svg diagram if the user is on a narrow screen where bandwidth and cpu is potentially more limited, or preload a complex chunk of javascript then use it to render an inter
active 3d model if the user's resources are more plentiful. scripting and preloads another nice thing about these preloads is that you can execute them with script. for example, here we create a htmllinkelement instance, then attach it to the dom: var preloadlink = document.createelement("link"); preloadlink.href = "myscript.js"; preloadlink.rel = "preload"; preloadlink.as = "script"; document.head.a...
HTML: Hypertext Markup Language
hnologies besides html are generally used to describe a web page's appearance/presentation (css) or functionality/behavior (javascript). "hypertext" refers to links that connect web pages to one another, either within a single website or between websites. links are a fundamental aspect of the web. by uploading content to the internet and linking it to pages created by other people, you become an
active participant in the world wide web. html uses "markup" to annotate text, images, and other content for display in a web browser. html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many othe...
Evolution of HTTP - HTTP
http/2. like with http/1.x previously, http's extensibility is still being used to add new features. notably, we can cite new extensions of the http protocol appearing in 2016: support of alt-svc allows the dissociation of the identification and the location of a given resource, allowing for a smarter cdn caching mechanism. the introduction of client-hints allows the browser, or client, to pro
actively communicate information about its requirements, or hardware constraints, to the server. the introduction of security-related prefixes in the cookie header, now helps guarantee a secure cookie has not been altered. this evolution of http proves its extensibility and simplicity, liberating creation of many applications and compelling the adoption of the protocol. the environment in which http ...
Compression in HTTP - HTTP
only thing to negotiate is the compression algorithm to use. these algorithm are optimized for text. in the 1990s, compression technology was advancing at a rapid pace and numerous successive algorithms have been added to the set of possible choices. nowadays, only two are relevant: gzip, the most common one, and br the new challenger. to select the algorithm to use, browsers and servers use pro
active content negotiation. the browser sends an accept-encoding header with the algorithm it supports and its order of precedence, the server picks one, uses it to compress the body of the response and uses the content-encoding header to tell the browser the algorithm it has chosen. as content negotiation has been used to choose a representation based on its encoding, the server must send a vary header...
CSP: block-all-mixed-content - HTTP
this also applies to <iframe> documents, ensuring the entire page is mixed content-free. the upgrade-insecure-requests directive is evaluated before block-all-mixed-content. if the former is set, the latter does nothing, so set one directive or the other – not both, unless you want to force https on older browsers that do not force it after a redirect to http. ...
Feature-Policy: screen-wake-lock - HTTP
the http feature-policy header screen-wake-lock directive controls whether the current document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen. note: in earlier specification drafts this directive was called wake-lock. syntax feature-policy: screen-wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...
Feature-Policy: wake-lock - HTTP
the http feature-policy header wake-lock directive controls whether the current document is allowed to use wake lock api to indicate that device should not enter power-saving mode. note: latest drafts of screen wake lock api defines screen-wake-lock directive. syntax feature-policy: wake-lock <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...
Index - HTTP
hat the mime types advertised in the content-type headers should not be changed and be followed. this allows to opt-out of mime type sniffing, or, in other words, it is a way to say that the webmasters knew what they were doing. 117 x-dns-prefetch-control dns, http, header the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers pro
actively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth. 118 x-forwarded-for http, http header, non-standard, reference, request header, header the x-forwarded-for (xff) header is a de-facto standard header for identifying the originating ip address ...
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. this reduces latency when the user clicks a link. header type response header forbidden header name no syntax x-dns-prefetch-control: on x-dns-prefetch-control: off directives on enables dns prefetching. ...
HTTP headers - HTTP
specified in the upgrade header field. it can be used in both client and server headers. if the upgrade header field is specified, then the sender must also send the connection header field with the upgrade option specified. for details on the connection header field please see section 6.1 of the aforementioned rfc. x-dns-prefetch-control controls dns prefetching, a feature by which browsers pro
actively perform domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth. x-firefox-spdy ... x-pingback ... x-requested-with ... x-robots-tag the x-robots-tag http header is used to indicate how a web page is to be indexed within public search engine results. the header is...
406 Not Acceptable - HTTP
the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's pro
active content negotiation headers, and that the server is unwilling to supply a default representation. pro
active content negotiation headers include: accept accept-charset accept-encoding accept-language in practice, this error is very rarely used. instead of responding using this error code, which would be cryptic for the end user and difficult to fix, servers ignore the relevant header and serve an actual page to the user. it is assumed that even if the user won't be completely happy, they will prefer this to an error code. if a server returns such an error status, the body of the...
Closures - JavaScript
tance, suppose we want to add buttons to a page to adjust the text size. one way of doing this is to specify the font-size of the body element (in pixels), and then set the size of the other elements on the page (such as headers) using the relative em unit: body { font-family: helvetica, arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } such inter
active text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units. here's the javascript: function makesizer(size) { return function() { document.body.style.fontsize = size + 'px'; }; } var size12 = makesizer(12); var size14 = makesizer(14); var size16 = makesizer(16); size12, size14, ...
Introduction - JavaScript
ed reference material for javascript. if you are new to javascript, start with the articles in the learning area and the javascript guide. once you have a firm grasp of the fundamentals, you can use the javascript reference to get more details on individual objects and statements. what is javascript? javascript is a cross-platform, object-oriented scripting language used to make webpages inter
active (e.g., having complex animations, clickable buttons, popup menus, etc.). there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers). inside a host environment (for example, a web browser), javascript can be connected to the objects...
Method definitions - JavaScript
starting with ecmascript 2015, a shorter syntax for method definitions on objects initializers is introduced. it is a shorthand for a function assigned to the method's name. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax const obj = { get property() {}, set property(value) {}, property( parameters… ) {}, *generator( parameters… ) {}, async property( parameters… ) {}, async* generator( parameters… ) {}, // with computed keys get [property]() {}, set [property](value) {}, [property]( parameters… ) {}, *[generator]( parameters… ) {}, async [property]( parameters… ) {}, a...
Array.prototype.reduce() - JavaScript
the reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the reducer function takes four arguments: accumulator (acc) current value (cur) current index (idx) source array (src) your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value. syntax arr.reduce(callback( accumulator, currentvalue, [, index[, array]] )[, initialvalue]) parameters callback ...
Array.prototype.filter() - JavaScript
syntax let newarray = arr.filter(callback(element[, index, [array]])[, thisarg]) parameters callback function is a predicate, to test each element of the array. return true to keep the element, false otherwise. it accepts three arguments: element the current element being processed in the array. ...
Array.prototype.flatMap() - JavaScript
the flatmap() method first maps each element using a mapping function, then flattens the result into a new array. it is identical to a map() followed by a flat() of depth 1, but flatmap() is often quite useful, as merging both into one method is slightly more efficient. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax var new_array = arr.flatmap(function callback(currentvalue[, index[, array]]) { // return element for new_array }[, thisarg]) parameters callback function that produces an element of the new array, taking three arguments: currentvalue the current element being processed in the arra...
Array.prototype.forEach() - JavaScript
syntax arr.foreach(callback(currentvalue [, index [, array]])[, thisarg]) parameters callback function to execute on each element. it accepts between one and three arguments: currentvalue the current element being processed in the array. index optional the index currentvalue in the array. array optional the array foreach() was called upon. ...
Array.from() - JavaScript
syntax array.from(arraylike [, mapfn [, thisarg]]) parameters arraylike an array-like or iterable object to convert to an array. mapfn optional map function to call on every element of the array. thisarg optional value to use as this when executing mapfn. return value a new array instance. ...
Array.prototype.join() - JavaScript
the join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. if the array has only one item, then that item will be returned without using the separator. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax arr.join([separator]) parameters separator optional specifies a string to separate each pair of adjacent elements of the array. the separator is converted to a string if necessary. if omitted, the array elements are separated with a comma (","). if separator is an empty string, all elements...
Array.prototype.length - JavaScript
the length property of an object which is an instance of type array sets or returns the number of elements in that array. the value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. description the value of the length property is an integer with a positive sign and a value less than 2 to the 32nd power (232). var namelista = new array(4294967296); //2 to the 32nd power = 4294967296 var namelistc = new array(-100) //negative sign console.log(namelista.length); //rangeerror: invalid array length console.log(namelistc.
Array.prototype.push() - JavaScript
syntax arr.push([element1[, ...[, elementn]]]) parameters elementn the element(s) to add to the end of the array. return value the new length property of the object upon which the method was called. description the push method appends values to an array. push is intentionally generic. ...
Array.prototype.slice() - JavaScript
the slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. the original array will not be modified. the source for this inter
active demo is stored in a github repository. if you'd like to contribute to the inter
active demo project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax arr.slice([start[, end]]) parameters start optional zero-based index at which to start extraction. a negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence. if start is undefined, slice starts from the index 0. if start is greater than the inde...
Array.prototype.sort() - JavaScript
the sort() method sorts the elements of an array in place and returns the sorted array. the default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of utf-16 code units values. the time and space complexity of the sort cannot be guaranteed as it depends on the implementation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax arr.sort([comparefunction]) parameters comparefunction optional specifies a function that defines the sort order. if omitted, the array elements are converted to strings, then sorted according to each character's unicode code po...
ArrayBuffer() constructor - JavaScript
syntax new arraybuffer(length) parameters length the size, in bytes, of the array buffer to create. return value a new arraybuffer object of the specified size. its contents are initialized to 0. exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 ** 53) or negative. ...
ArrayBuffer.prototype.byteLength - JavaScript
description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when the array is constructed and cannot be changed. this property returns 0 if this arraybuffer has been detached. ...
Atomics.add() - JavaScript
the static atomics.add() method adds a given value at a given position in the array and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.add(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to add a value to. value the number to add. return value the old value at the given positi...
Atomics.and() - JavaScript
the static atomics.and() method computes a bitwise and with a given value at a given position in the array, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.and(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to compute the bitwise and. value the number to compute the bitwise a...
Atomics.compareExchange() - JavaScript
the static atomics.compareexchange() method exchanges a given replacement value at a given position in the array, if a given expected value equals the old value. it returns the old value at that position whether it was equal to the expected value or not. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.compareexchange(typedarray, index, expectedvalue, replacementvalue) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bi...
Atomics.exchange() - JavaScript
the static atomics.exchange() method stores a given value at a given position in the array and returns the old value at that position. this atomic operation guarantees that no other write happens between the read of the old value and the write of the new value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.exchange(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to exchange a value. value the number to exchange. retu...
Atomics.load() - JavaScript
syntax atomics.load(typedarray, index) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to load from. return value the value at the given position (typedarray[index]). ...
Atomics.or() - JavaScript
the static atomics.or() method computes a bitwise or with a given value at a given position in the array, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.or(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to compute the bitwise or. value the number to compute the bitwise or wi...
Atomics.store() - JavaScript
syntax atomics.store(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to store a value in. value the number to store. ...
Atomics.sub() - JavaScript
the static atomics.sub() method substracts a given value at a given position in the array and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.sub(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to subtract a value from. value the number to subtract. return value the old value a...
Atomics.xor() - JavaScript
the static atomics.xor() method computes a bitwise xor with a given value at a given position in the array, and returns the old value at that position. this atomic operation guarantees that no other write happens until the modified value is written back. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax atomics.xor(typedarray, index, value) parameters typedarray an integer typed array. one of int8array, uint8array, int16array, uint16array, int32array, uint32array, bigint64array, or biguint64array. index the position in the typedarray to compute the bitwise xor. value the number to compute the bitwise x...
Boolean.prototype.toString() - JavaScript
syntax bool.tostring() return value a string representing the specified boolean object. description the boolean object overrides the tostring method of the object object; it does not inherit object.prototype.tostring(). for boolean objects, the tostring method returns a string representation of the object. ...
Boolean.prototype.valueOf() - JavaScript
syntax bool.valueof() return value the primitive value of the given boolean object description the valueof() method of boolean returns the primitive value of a boolean object or literal boolean as a boolean data type. this method is usually called internally by javascript and not explicitly in code. ...
DataView() constructor - JavaScript
syntax new dataview(buffer [, byteoffset [, bytelength]]) parameters buffer an existing arraybuffer or sharedarraybuffer to use as the storage backing the new dataview object. byteoffset optional the offset, in bytes, to the first byte in the above buffer for the new view to reference. if unspecified, the buffer view starts with the first byte. bytelength optional the number of elements in the byte array. ...
DataView.prototype.getFloat32() - JavaScript
syntax dataview.getfloat32(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 32-bit float is stored in little- or big-endian format. if false or undefined, a big-endian value is read. ...
DataView.prototype.getInt16() - JavaScript
syntax dataview.getint16(byteoffset [, littleendian]) parameters byteoffset the offset, in byte, from the start of the view where to read the data. littleendian optional indicates whether the 16-bit int is stored in little- or big-endian format. if false or undefined, a big-endian value is read. ...
DataView.prototype.getInt32() - JavaScript
syntax dataview.getint32(byteoffset [, littleendian]) parameters byteoffset the offset, in bytes, from the start of the view where to read the data. littleendian optional indicates whether the 32-bit int is stored in little- or big-endian format. if false or undefined, a big-endian value is read. ...
Date() constructor - JavaScript
creates a javascript date instance that represents a single moment in time in a platform-independent format. date objects contain a number that represents milliseconds since 1 january 1970 utc. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax new date() new date(value) new date(datestring) new date(year, monthindex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]) note: the only correct way to instantiate a new date object is by using the new operator. if you simply call the date object directly, such as now = date(), the returned value is a string rather than a date object. parameters there are...
Date.UTC() - JavaScript
the date.utc() method accepts parameters similar to the date constructor, but treats them as utc. it returns the number of milliseconds since january 1, 1970, 00:00:00 utc. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax since ecmascript 2017: date.utc(year[, month[, day[, hour[, minute[, second[, millisecond]]]]]]) ecmascript 2016 and earlier: (month used to be required) date.utc(year, month[, day[, hour[, minute[, second[, millisecond]]]]]) parameters year a full year. month an integer between 0 (january) and 11 (december) representing the month. (up through ecmascript 2016, month was a required pa...
Date.prototype.getDate() - JavaScript
syntax dateobj.getdate() return value an integer number, between 1 and 31, representing the day of the month for the given date according to local time. examples using getdate() the second statement below assigns the value 25 to the variable day, based on the value of the date object xmas95. ...
Date.prototype.getDay() - JavaScript
the getday() method returns the day of the week for the specified date according to local time, where 0 represents sunday. for the day of the month, see date.prototype.getdate(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.getday() return value an integer number, between 0 and 6, corresponding to the day of the week for the given date, according to local time: 0 for sunday, 1 for monday, 2 for tuesday, and so on. examples using getday() the second statement below assigns the value 1 to weekday, based on the value of the date object xmas95. december 25, 1995, is a monday. var xmas95 = new date...
Date.prototype.getHours() - JavaScript
syntax dateobj.gethours() return value an integer number, between 0 and 23, representing the hour for the given date according to local time. examples using gethours() the second statement below assigns the value 23 to the variable hours, based on the value of the date object xmas95. ...
Date.prototype.getSeconds() - JavaScript
syntax dateobj.getseconds() return value an integer number, between 0 and 59, representing the seconds in the given date according to local time. examples using getseconds() the second statement below assigns the value 30 to the variable seconds, based on the value of the date object xmas95. ...
Date.prototype.getTime() - JavaScript
the unit of measurement, whereas unix time is in seconds. gettime() always uses utc for time representation. for example, a client browser in one timezone, gettime() will be the same as a client browser in any other timezone. you can use this method to help assign a date and time to another date object. this method is functionally equivalent to the valueof() method. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.gettime() return value a number representing the milliseconds elapsed between 1 january 1970 00:00:00 utc and the given date. reduced time precision to offer protection against timing a...
Date.parse() - JavaScript
in some cases, contains illegal date values (e.g. 2015-02-31). it is not recommended to use date.parse as until es5, parsing of strings was entirely implementation dependent. there are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different formats are to be accommodated). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax direct call: date.parse(datestring) implicit call: new date(datestring) parameters datestring a string representing a simplification of the iso 8601 calendar date extended format. (other ...
Date.prototype.setHours() - JavaScript
the sethours() method sets the hours for a specified date according to local time, and returns the number of milliseconds since january 1, 1970 00:00:00 utc until the time represented by the updated date instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.sethours(hoursvalue[, minutesvalue[, secondsvalue[, msvalue]]]) versions prior to javascript 1.3 dateobj.sethours(hoursvalue) parameters hoursvalue ideally, an integer between 0 and 23, representing the hour. if a value greater than 23 is provided, the datetime will be incremented by the extra hours. minutesvalue optional. ideally, an i...
Date.prototype.setMinutes() - JavaScript
syntax dateobj.setminutes(minutesvalue[, secondsvalue[, msvalue]]) versions prior to javascript 1.3 dateobj.setminutes(minutesvalue) parameters minutesvalue an integer between 0 and 59, representing the minutes. secondsvalue optional. an integer between 0 and 59, representing the seconds. ...
Date.prototype.setSeconds() - JavaScript
syntax dateobj.setseconds(secondsvalue[, msvalue]) versions prior to javascript 1.3 dateobj.setseconds(secondsvalue) parameters secondsvalue an integer between 0 and 59, representing the seconds. msvalue optional. a number between 0 and 999, representing the milliseconds. ...
Date.prototype.setUTCFullYear() - JavaScript
syntax dateobj.setutcfullyear(yearvalue[, monthvalue[, dayvalue]]) parameters yearvalue an integer specifying the numeric value of the year, for example, 1995. monthvalue optional. an integer between 0 and 11 representing the months january through december. dayvalue optional. an integer between 1 and 31 representing the day of the month. ...
Date.prototype.setUTCHours() - JavaScript
the setutchours() method sets the hour for a specified date according to universal time, and returns the number of milliseconds since january 1, 1970 00:00:00 utc until the time represented by the updated date instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.setutchours(hoursvalue[, minutesvalue[, secondsvalue[, msvalue]]]) parameters hoursvalue an integer between 0 and 23, representing the hour. minutesvalue optional. an integer between 0 and 59, representing the minutes. secondsvalue optional. an integer between 0 and 59, representing the seconds. if you specify the secondsvalue pa...
Date.prototype.setUTCMinutes() - JavaScript
syntax dateobj.setutcminutes(minutesvalue[, secondsvalue[, msvalue]]) parameters minutesvalue an integer between 0 and 59, representing the minutes. secondsvalue optional. an integer between 0 and 59, representing the seconds. if you specify the secondsvalue parameter, you must also specify the minutesvalue. msvalue optional. ...
Date.prototype.setUTCMonth() - JavaScript
syntax dateobj.setutcmonth(monthvalue[, dayvalue]) parameters monthvalue an integer between 0 and 11, representing the months january through december. dayvalue optional. an integer from 1 to 31, representing the day of the month. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
Date.prototype.setUTCSeconds() - JavaScript
syntax dateobj.setutcseconds(secondsvalue[, msvalue]) parameters secondsvalue an integer between 0 and 59, representing the seconds. msvalue optional. a number between 0 and 999, representing the milliseconds. return value the number of milliseconds between 1 january 1970 00:00:00 utc and the updated date. ...
Date.prototype.toDateString() - JavaScript
he todatestring() method returns the date portion of a date object in english in the following format separated by spaces: first three letters of the week day name first three letters of the month name two digit day of the month, padded on the left a zero if necessary four digit year (at least), padded on the left with zeros if necessary e.g. "thu jan 01 1970". the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.todatestring() return value a string representing the date portion of the given date object in human readable form in english. description date instances refer to a specific point in tim...
Date.prototype.toISOString() - JavaScript
the toisostring() method returns a string in simplified extended iso format (iso 8601), which is always 24 or 27 characters long (yyyy-mm-ddthh:mm:ss.sssz or ±yyyyyy-mm-ddthh:mm:ss.sssz, respectively). the timezone is always zero utc offset, as denoted by the suffix "z". the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.toisostring() return value a string representing the given date in the iso 8601 format according to universal time. polyfill this method was standardized in ecma-262 5th edition. engines which have not been updated to support this method can work around the absence of this method us...
Date.prototype.toJSON() - JavaScript
syntax dateobj.tojson() return value a string representation of the given date. description date instances refer to a specific point in time. calling tojson() returns a string (using toisostring()) representing the date object's value. this method is generally intended to, by default, usefully serialize date objects during json serialization. ...
Date.prototype.toLocaleDateString() - JavaScript
of the date portion of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and allow to customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.tolocaledatestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting con...
Date.prototype.toLocaleString() - JavaScript
e sensitive representation of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation-dependent. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.tolocalestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conventi...
Date.prototype.toLocaleTimeString() - JavaScript
entation of the time portion of this date. the new locales and options arguments let applications specify the language whose formatting conventions should be used and customize the behavior of the function. in older implementations, which ignore the locales and options arguments, the locale used and the form of the string returned are entirely implementation dependent. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax dateobj.tolocaletimestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose formatting conv...
Date.prototype.toString() - JavaScript
syntax dateobj.tostring() return value a string representing the given date. description date instances inherit their tostring() method from date.prototype, not object.prototype. date.prototype.tostring() returns a string representation of the date in the format specified in ecma-262 which can be summarised as: week day: 3 letter english week day name, e.g. ...
Date.prototype.toTimeString() - JavaScript
syntax dateobj.totimestring() return value a string representing the time portion of the given date in human readable form in american english. description date instances refer to a specific point in time. calling tostring() will return the date formatted in a human readable form in american english. ...
Function() constructor - JavaScript
the function constructor creates a new function object. calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues to eval. however, unlike eval, the function constructor creates functions which execute in the global scope only. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax new function([arg1 [, arg2 [, ...argn]] ,] functionbody) parameters arg1, arg2, ... argn names to be used by the function as formal argument names. each must be a string that corresponds to a valid javascript identifier, or a list of such stri...
Function.prototype.bind() - JavaScript
the bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax let boundfunc = func.bind(thisarg[, arg1[, arg2[, ...argn]]]) parameters thisarg the value to be passed as the this parameter to the target function func when the bound function is called. the value is ignored if the bound function is constructed using the new operator. when using bind to create a function (supplied as a callback) inside a settimeout, any primit...
Function.length - JavaScript
property attributes of function.length writable no enumerable no configurable yes description length is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters. ...
Function.name - JavaScript
a function object's read-only name property indicates the function's name as specified when it was created, or it may be rather anonymous or ''(an empty string) for functions created anonymously. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of function.name writable no enumerable no configurable yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well. javascript compressors and minifiers warning: be careful when using function.name and source code ...
Function.prototype.toString() - JavaScript
syntax function.tostring() return value a string representing the source code of the function. description the function object overrides the tostring method inherited from object; it does not inherit object.prototype.tostring. for user-defined function objects, the tostring method returns a string containing the source text segment which was used to define the function. ...
Intl.Collator.prototype.resolvedOptions() - JavaScript
the intl.collator.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and collation options computed during initialization of this collator object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax collator.resolvedoptions() return value a new object with properties reflecting the locale and collation options computed during the initialization of the given collator object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were requested in the input bcp 47 la...
Intl.Collator - JavaScript
constructor intl.collator() creates a new collator object. 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. ...
Intl.DateTimeFormat() constructor - JavaScript
syntax new intl.datetimeformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. to use the browser's default locale, omit this argument or pass undefined. unicode extension are supported (for example "en-us-u-ca-buddhist"). ...
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
the intl.datetimeformat.prototype.formatrange() formats a date range in the most concise way based on the locale and options provided when instantiating intl.datetimeformat object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax intl.datetimeformat.prototype.formatrange(startdate, enddate) examples basic formatrange usage this method receives two dates and formats the date range in the most concise way based on the locale and options provided when instantiating intl.datetimeformat. let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); let date3 = new ...
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
the intl.datetimeformat.prototype.formatrangetoparts() method allows locale-specific tokens representing each part of the formatted date range produced by datetimeformat formatters. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax intl.datetimeformat.prototype.formatrangetoparts(startdate, enddate) examples basic formatrangetoparts usage this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the formatted date range. let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, ...
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.datetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and date and time formatting options computed during initialization of this datetimeformat object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax datetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and date and time formatting options computed during the initialization of the given datetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode ...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax intl.datetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. for the general form of the locales argument, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. possible...
Intl.Locale.prototype.toString() - JavaScript
syntax locale.tostring() return value the locale's unicode locale identifier string. description the locale object is a javascript representation of a concept unicode locale identifier. information about a particular locale (language, script, calendar type, etc.) can be encoded in a locale identifier string. ...
Intl.NumberFormat() constructor - JavaScript
syntax new intl.numberformat([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings. for the general form and interpretation of the locales argument, see the intl page. the following unicode extension key is allowed: nu the numbering system to be used. ...
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
the intl.numberformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and number formatting options computed during initialization of this numberformat object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax numberformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given numberformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any unicode extension values were ...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax intl.numberformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. for the general form of the locales argument, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. possible values are...
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.relativetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and relative time formatting options computed during initialization of this relativetimeformat object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax relativetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options computed during the initialization of the given relativetimeformat object. description the resulting object has the following properties: locale the bcp 47 language tag for the locale actually used. if any...
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. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax intl.relativetimeformat.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings. for the general form of the locales argument, see the intl page. options optional. an object that may have the following property: localematcher the locale matching algorithm to use. ...
Intl.RelativeTimeFormat - JavaScript
constructor intl.relativetimeformat.relativetimeformat() creates a new intl.relativetimeformat object. static methods intl.relativetimeformat.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale. ...
JSON.parse() - JavaScript
the json.parse() method parses a json string, constructing the javascript value or object described by the string. an optional reviver function can be provided to perform a transformation on the resulting object before it is returned. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax json.parse(text[, reviver]) parameters text the string to parse as json. see the json object for a description of json syntax. reviver optional if a function, this prescribes how the value originally produced by parsing is transformed, before being returned. return value the object, array, string, number, boolean, or null ...
JSON.stringify() - JavaScript
the json.stringify() method converts a javascript object or value to a json string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax json.stringify(value[, replacer[, space]]) parameters value the value to convert to a json string. replacer optional a function that alters the behavior of the stringification process, or an array of string and number that serve as an allowlist for selecting/filtering the properties of the value object to be included in the ...
Map.prototype[@@toStringTag] - JavaScript
the map[@@tostringtag] property has an initial value of "map". the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of map.prototype[@@tostringtag] writable no enumerable no configurable yes syntax map[symbol.tostringtag] examples using tostringtag object.prototype.tostring.call(new map()) // "[object map]" specifications specification ecmascript (ecma-262)the definition of 'map.prototype[@@tostringtag]' in that specification. ...
Map.prototype.delete() - JavaScript
syntax mymap.delete(key); parameters key the key of the element to remove from the map object. return value true if an element in the map object existed and has been removed, or false if the element does not exist. examples using delete() var mymap = new map(); mymap.set('bar', 'foo'); mymap.delete('bar'); // returns true. successfully removed. ...
Map.prototype.get() - JavaScript
the get() method returns a specified element from a map object. if the value that is associated to the provided key is an object, then you will get a reference to that object and any change made to that object will effectively modify it inside the map object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax mymap.get(key) parameters key the key of the element to return from the map object. return value the element associated with the specified key, or undefined if the key can't be found in the map object. examples using get() let mymap = new map(); mymap.set('bar', 'foo'); mymap.get('bar'); // re...
Math.E - JavaScript
the math.e property represents the base of natural logarithms, e, approximately 2.718. math.e=e≈2.718\mathtt{\mi{math.e}} = e \approx 2.718 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.e writable no enumerable no configurable no description because e is a static property of math, you always use it as math.e, rather than as a property of a math object you created (math is not a constructor). examples using math.e the following function returns e: function getnapier() { return math.e;...
Math.LN10 - JavaScript
the math.ln10 property represents the natural logarithm of 10, approximately 2.302: math.ln10=ln(10)≈2.302\mathtt{\mi{math.ln10}} = \ln(10) \approx 2.302 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.ln10 writable no enumerable no configurable no description because ln10 is a static property of math, you always use it as math.ln10, rather than as a property of a math object you created (math is not a constructor). examples using math.ln10 the following function returns the natural log o...
Math.LN2 - JavaScript
the math.ln2 property represents the natural logarithm of 2, approximately 0.693: math.ln2=ln(2)≈0.693\mathtt{\mi{math.ln2}} = \ln(2) \approx 0.693 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.ln2 writable no enumerable no configurable no description because ln2 is a static property of math, you always use it as math.ln2, rather than as a property of a math object you created (math is not a constructor). examples using math.ln2 the following function returns the natural log of 2: func...
Math.LOG10E - JavaScript
the math.log10e property represents the base 10 logarithm of e, approximately 0.434: math.log10e=log10(e)≈0.434\mathtt{\mi{math.log10e}} = \log_10(e) \approx 0.434 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.log10e writable no enumerable no configurable no description because log10e is a static property of math, you always use it as math.log10e, rather than as a property of a math object you created (math is not a constructor). examples using math.log10e the following function returns...
Math.LOG2E - JavaScript
the math.log2e property represents the base 2 logarithm of e, approximately 1.442: math.log2e=log2(e)≈1.442\mathtt{\mi{math.log2e}} = \log_2(e) \approx 1.442 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.log2e writable no enumerable no configurable no description because log2e is a static property of math, you always use it as math.log2e, rather than as a property of a math object you created (math is not a constructor). examples using math.log2e the following function returns the base ...
Math.PI - JavaScript
the math.pi property represents the ratio of the circumference of a circle to its diameter, approximately 3.14159: math.pi=π≈3.14159\mathtt{\mi{math.pi}} = \pi \approx 3.14159 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.pi writable no enumerable no configurable no description because pi is a static property of math, you always use it as math.pi, rather than as a property of a math object you created (math is not a constructor). examples using math.pi the following function uses math.
Math.SQRT1_2 - JavaScript
the math.sqrt1_2 property represents the square root of 1/2 which is approximately 0.707: math.sqrt1_2=12=12≈0.707\mathtt{\mi{math.sqrt1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.sqrt1_2 writable no enumerable no configurable no description because sqrt1_2 is a static property of math, you always use it as math.sqrt1_2, rather than as a property of a math object you created (math is not a constructor). examples using math.sq...
Math.SQRT2 - JavaScript
the math.sqrt2 property represents the square root of 2, approximately 1.414: math.sqrt2=2≈1.414\mathtt{\mi{math.sqrt2}} = \sqrt{2} \approx 1.414 the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of math.sqrt2 writable no enumerable no configurable no description because sqrt2 is a static property of math, you always use it as math.sqrt2, rather than as a property of a math object you created (math is not a constructor). examples using math.sqrt2 the following function returns the square root of 2:...
Math.acos() - JavaScript
the math.acos() function returns the arccosine (in radians) of a number, that is ∀x∊[-1;1],math.acos(x)=arccos(x)= the unique y∊[0;π]such thatcos(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.acos(x) parameters x a number representing a cosine, where x is between -1 and 1. return value the arccosine (angle in radians) of the given number if it's between -1 and 1; otherwise, nan. description the math.acos() method returns a numeric val...
Math.acosh() - JavaScript
the math.acosh() function returns the hyperbolic arc-cosine of a number, that is ∀x≥1,math.acosh(x)=arcosh(x)= the unique y≥0such thatcosh(y)=x\forall x \geq 1, \mathtt{\operatorname{math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.acosh(x) parameters x a number. return value the hyperbolic arc-cosine of the given number. if the number is less than 1, nan. description because acosh() is a static method of math, you always use it as math.acosh(), rather than as a method of a math...
Math.asin() - JavaScript
the math.asin() function returns the arcsine (in radians) of a number, that is ∀x∊[-1;1],math.asin(x)=arcsin(x)= the unique y∊[-π2;π2]such thatsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.asin(x) parameters x a number. return value the arcsine (in radians) of the given number if it's between -1 and 1; otherwise, nan. description the math.asin() method returns a numeric value between -π2-\frac{\...
Math.asinh() - JavaScript
the math.asinh() function returns the hyperbolic arcsine of a number, that is math.asinh(x)=arsinh(x)= the unique ysuch thatsinh(y)=x\mathtt{\operatorname{math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.asinh(x) parameters x a number. return value the hyperbolic arcsine of the given number. description because asinh() is a static method of math, you always use it as math.asinh(), rather than as a method of a math object you created (math is not a constructor). polyfill math.asinh can be e...
Math.atan() - JavaScript
the math.atan() function returns the arctangent (in radians) of a number, that is math.atan(x)=arctan(x)= the unique y∊[-π2;π2]such thattan(y)=x\mathtt{\operatorname{math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.atan(x) parameters x a number. return value the arctangent (in radians) of the given number. description the math.atan() method returns a numeric value between -π2-\frac{\pi}{2} and π2\frac{\pi}{2} radians. because atan() is a static method of...
Math.atanh() - JavaScript
the math.atanh() function returns the hyperbolic arctangent of a number, that is ∀x∊(-1,1),math.atanh(x)=arctanh(x)= the unique ysuch thattanh(y)=x\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.atanh(x) parameters x a number. return value the hyperbolic arctangent of the given number. description because atanh() is a static method of math, you always use it as math.atanh(), rather than as a method of a math object you created (...
Math.expm1() - JavaScript
syntax math.expm1(x) parameters x a number. return value a number representing ex - 1, where e is euler's number and x is the argument. description because expm1() is a static method of math, you always use it as math.expm1(), rather than as a method of a math object you created (math is not a constructor). ...
Math.floor() - JavaScript
syntax math.floor(x) parameters x a number. return value a number representing the largest integer less than or equal to the specified number. description because floor() is a static method of math, you always use it as math.floor(), rather than as a method of a math object you created (math is not a constructor). ...
Math.fround() - JavaScript
syntax var singlefloat = math.fround(doublefloat); parameters doublefloat a number. if the parameter is of a different type, it will get converted to a number or to nan if it cannot be converted. return value the nearest 32-bit single precision float representation of the given number. ...
Math.hypot() - JavaScript
the math.hypot() function returns the square root of the sum of squares of its arguments, that is: math.hypot(v1,v2,…,vn)=∑i=1nvi2=v12+v22+…+vn2\mathtt{\operatorname{math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2} the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.hypot([value1[, value2[, ...]]]) parameters value1, value2, ... numbers. return value the square root of the sum of squares of the given arguments. if at least one of the arguments cannot be converted to a number, nan is returned. description calculating the hypotenuse of a righ...
Math.imul() - JavaScript
syntax var product = math.imul(a, b); parameters a first number. b second number. return value the result of the c-like 32-bit multiplication of the given arguments. description math.imul() allows for 32-bit integer multiplication with c-like semantics. this feature is useful for projects like emscripten. ...
Math.log() - JavaScript
the math.log() function returns the natural logarithm (base e) of a number, that is ∀x>0,math.log(x)=ln(x)=the uniqueysuch thatey=x\forall x > 0, \mathtt{\operatorname{math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x the javascript math.log() function is equivalent to ln(x) in mathematics. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.log(x) parameters x a number. return value the natural logarithm (base e) of the given number. if the number is negative, nan is returned. description if the value of x is 0, the return value is always -infinity. if the value of...
Math.log10() - JavaScript
the math.log10() function returns the base 10 logarithm of a number, that is ∀x>0,math.log10(x)=log10(x)=the uniqueysuch that10y=x\forall x > 0, \mathtt{\operatorname{math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.log10(x) parameters x a number. return value the base 10 logarithm of the given number. if the number is negative, nan is returned. description if the value of x is less than 0, the return value is always nan. because log10() is a static method of math, you always use it as math.log10(), rather t...
Math.pow() - JavaScript
syntax math.pow(base, exponent) parameters base the base number. exponent the exponent used to raise the base. return value a number representing the given base taken to the power of the given exponent. description the math.pow() function returns the base to the exponent power, that is, baseexponent, the base and the exponent are in decimal numeral system. ...
Math.round() - JavaScript
syntax math.round(x) parameters x a number. return value the value of the given number rounded to the nearest integer. description if the fractional portion of the argument is greater than 0.5, the argument is rounded to the integer with the next higher absolute value. ...
Math.sign() - JavaScript
the math.sign() function returns either a positive or negative +/- 1, indicating the sign of a number passed into the argument. if the number passed into math.sign() is 0, it will return a +/- 0. note that if the number is positive, an explicit (+) will not be returned. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax math.sign(x) parameters x a number. if this argument is not a number, it is implicitly converted to one. return value a number representing the sign of the given argument: if the argument is positive, returns 1. if the argument is negative, returns -1. if the argument is positive zero...
Math.sin() - JavaScript
syntax math.sin(x) parameters x a number (given in radians). return value the sine of the given number. description the math.sin() method returns a numeric value between -1 and 1, which represents the sine of the angle given in radians. because sin() is a static method of math, you always use it as math.sin(), rather than as a method of a math object you created (math is not a constructor). ...
Math.tan() - JavaScript
syntax math.tan(x) parameters x a number representing an angle in radians. return value the tangent of the given number. description the math.tan() method returns a numeric value that represents the tangent of the angle. because tan() is a static method of math, you always use it as math.tan(), rather than as a method of a math object you created (math is not a constructor). ...
Number.EPSILON - JavaScript
the number.epsilon property represents the difference between 1 and the smallest floating point number greater than 1. you do not have to create a number object to access this static property (use number.epsilon). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of number.epsilon writable no enumerable no configurable no description the epsilon property has a value of approximately 2.2204460492503130808472633361816e-16, or 2-52. polyfill if (number.epsilon === undefined) { number.epsilon = math.
Number.MAX_SAFE_INTEGER - JavaScript
the number.max_safe_integer constant represents the maximum safe integer in javascript (253 - 1). for larger integers, consider using bigint. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of number.max_safe_integer writable no enumerable no configurable no description the max_safe_integer constant has a value of 9007199254740991 (9,007,199,254,740,991 or ~9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 a...
Number.MAX_VALUE - JavaScript
property attributes of number.max_value writable no enumerable no configurable no description the max_value property has a value of approximately 1.79e+308, or 21024. values larger than max_value are represented as infinity. ...
Number.MIN_SAFE_INTEGER - JavaScript
the number.min_safe_integer constant represents the minimum safe integer in javascript (-(253 - 1)). to represent integers smaller than this, consider using bigint. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of number.min_safe_integer writable no enumerable no configurable no description the min_safe_integer constant has a value of -9007199254740991 (-9,007,199,254,740,991 or about -9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format num...
Number.MIN_VALUE - JavaScript
property attributes of number.min_value writable no enumerable no configurable no description the min_value property is the number closest to 0, not the most negative number, that javascript can represent. ...
Number.NEGATIVE_INFINITY - JavaScript
property attributes of number.negative_infinity writable no enumerable no configurable no description the value of number.negative_infinity is the same as the negative value of the global object's infinity property. ...
Number.POSITIVE_INFINITY - JavaScript
property attributes of number.positive_infinity writable no enumerable no configurable no description the value of number.positive_infinity is the same as the value of the global object's infinity property. ...
Number.isFinite() - JavaScript
syntax number.isfinite(value) parameters value the value to be tested for finiteness. return value a boolean indicating whether or not the given value is a finite number. description in comparison to the global isfinite() function, this method doesn't forcibly convert the parameter to a number. ...
Number.isInteger() - JavaScript
syntax number.isinteger(value) parameters value the value to be tested for being an integer. return value a boolean indicating whether or not the given value is an integer. description if the target value is an integer, return true, otherwise return false. if the value is nan or infinity, return false. ...
Number.prototype.toFixed() - JavaScript
syntax numobj.tofixed([digits]) parameters digits optional the number of digits to appear after the decimal point; this may be a value between 0 and 20, inclusive, and implementations may optionally support a larger range of values. if this argument is omitted, it is treated as 0. return value a string representing the given number using fixed-point notation. ...
Number.prototype.toString() - JavaScript
syntax numobj.tostring([radix]) parameters radix optional. an integer in the range 2 through 36 specifying the base to use for representing numeric values. return value a string representing the specified number object. exceptions rangeerror if tostring() is given a radix less than 2 or greater than 36, a rangeerror is thrown. ...
Object.entries() - JavaScript
for...in loop. (the only important difference is that a for...in loop enumerates properties in the prototype chain as well). the order of the array returned by object.entries() does not depend on how an object is defined. if there is a need for certain ordering, then the array should be sorted first, like object.entries(obj).sort((a, b) => b[0].localecompare(a[0]));. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax object.entries(obj) parameters obj the object whose own enumerable string-keyed property [key, value] pairs are to be returned. return value an array of the given object's own enumerable str...
Object.freeze() - JavaScript
new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. in addition, freezing an object also prevents its prototype from being changed. freeze() returns the same object that was passed in. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax object.freeze(obj) parameters obj the object to freeze. return value the object that was passed to the function. description nothing can be added to or removed from the properties set of a...
Object.getOwnPropertyDescriptor() - JavaScript
the object.getownpropertydescriptor() method returns an object describing the configuration of a specific property on a given object (that is, one directly present on an object and not in the object's prototype chain). the object returned is mutable but mutating it has no effect on the original property's configuration. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax object.getownpropertydescriptor(obj, prop) parameters obj the object in which to look for the property. prop the name or symbol of the property whose description is to be retrieved. return value a property descriptor of the given proper...
Object.isFrozen() - JavaScript
syntax object.isfrozen(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is frozen. description an object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable. ...
Object.prototype.isPrototypeOf() - JavaScript
isprototypeof() differs from the instanceof operator. in the expression "object instanceof afunction", the object prototype chain is checked against afunction.prototype, not against afunction itself. syntax prototypeobj.isprototypeof(object) parameters object the object whose prototype chain will be searched. ...
Object.isSealed() - JavaScript
syntax object.issealed(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is sealed. description returns true if the object is sealed, otherwise false. an object is sealed if it is not extensible and if all its properties are non-configurable and therefore not removable (but not necessarily non-writable). ...
Object.prototype.toString() - JavaScript
syntax obj.tostring() return value a string representing the object. description every object has a tostring() method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expected. by default, the tostring() method is inherited by every object descended from object. ...
Object.prototype.valueOf() - JavaScript
syntax object.valueof() return value the primitive value of the specified object. a (unary) plus sign can sometimes be used as a shorthand for valueof, e.g. in +new number()). also see using unary plus. description javascript calls the valueof method to convert an object to a primitive value. ...
Object.values() - JavaScript
the object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. (the only difference is that a for...in loop enumerates properties in the prototype chain as well.) the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax object.values(obj) parameters obj the object whose enumerable own property values are to be returned. return value an array containing the given object's own enumerable property values. description object.values() returns an array whose elements are the enumerable property values found on the object. the or...
Promise.all() - JavaScript
ns a single promise that resolves to an array of the results of the input promises. this returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. it rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error. the source for this inter
active demo is stored in a github repository. if you'd like to contribute to the inter
active demo project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax promise.all(iterable); parameters iterable an iterable object such as an array. return value an already resolved promise if the iterable passed is empty. an asynchronously resolved promise if th...
Promise.prototype.catch() - JavaScript
urns a promise and deals with rejected cases only. it behaves the same as calling promise.prototype.then(undefined, onrejected) (in fact, calling obj.catch(onrejected) internally calls obj.then(undefined, onrejected)). this means that you have to provide an onrejected function even if you want to fall back to an undefined result value - for example obj.catch(() => {}). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax p.catch(onrejected); p.catch(function(reason) { // rejection }); parameters onrejected a function called when the promise is rejected. this function has one argument: reason the reje...
Promise.reject() - JavaScript
syntax promise.reject(reason); parameters reason reason why this promise rejected. return value a promise that is rejected with the given reason. description the static promise.reject function returns a promise that is rejected. for debugging purposes and selective error catching, it is useful to make reason an instanceof error. ...
handler.apply() - JavaScript
syntax const p = new proxy(target, { apply: function(target, thisarg, argumentslist) { } }); parameters the following parameters are passed to the apply() method. this is bound to the handler. target the target object. thisarg the this argument for the call. argumentslist the list of arguments for the call. return value the apply() method can return any value. ...
handler.construct() - JavaScript
the handler.construct() method is a trap for the new operator. in order for the new operation to be valid on the resulting proxy object, the target used to initialize the proxy must itself have a [[construct]] internal method (i.e. new target must be valid). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax const p = new proxy(target, { construct: function(target, argumentslist, newtarget) { } }); parameters the following parameters are passed to the construct() method. this is bound to the handler. target the target object. argumentslist the list of arguments for the constructor. newtarget the co...
Reflect.preventExtensions() - JavaScript
the static reflect.preventextensions() method prevents new properties from ever being added to an object (i.e., prevents future extensions to the object). it is similar to object.preventextensions(), but with some differences. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax reflect.preventextensions(target) parameters target the target object on which to prevent extensions. return value a boolean indicating whether or not the target was successfully set to prevent extensions. exceptions a typeerror, if target is not an object. description the reflect.preventextensions() method allows you to preven...
Reflect.set() - JavaScript
syntax reflect.set(target, propertykey, value[, receiver]) parameters target the target object on which to set the property. propertykey the name of the property to set. value the value to set. receiver optional the value of this provided for the call to target if a setter is encountered. return value a boolean indicating whether or not setting the property was successful. ...
Reflect.setPrototypeOf() - JavaScript
the static reflect.setprototypeof() method is the same method as object.setprototypeof(), except for its return type. it sets the prototype (i.e., the internal [[prototype]] property) of a specified object to another object or to null, and returns true if the operation was successful, or false otherwise. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax reflect.setprototypeof(target, prototype) parameters target the target object of which to set the prototype. prototype the object's new prototype (an object or null). return value a boolean indicating whether or not the prototype was successfully set. ...
RegExp.prototype[@@match]() - JavaScript
syntax regexp[symbol.match](str) parameters str a string that is a target of the match. return value an array containing the entire match result and any parentheses-captured matched results, or null if there were no matches. description this method is called internally in string.prototype.match(). ...
RegExp.prototype[@@replace]() - JavaScript
the [@@replace]() method replaces some or all matches of a this pattern in a string by a replacement, and returns the result of the replacement as a new string. the replacement can be a string or a function to be called for each match. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax regexp[symbol.replace](str, newsubstr|function) parameters str a string that is a target of the replacement. newsubstr (replacement) the string that replaces the substring. a number of special replacement patterns are supported; see the specifying a string as a parameter section in string.prototype.replace() page. function ...
RegExp.prototype[@@search]() - JavaScript
syntax regexp[symbol.search](str) parameters str a string that is a target of the search. return value integer if successful, [@@search]() returns the index of the first match of the regular expression inside the string. otherwise, it returns -1. description this method is called internally in string.prototype.search(). ...
RegExp() constructor - JavaScript
the regexp constructor creates a regular expression object for matching text with a pattern. for an introduction to regular expressions, read the regular expressions chapter in the javascript guide. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax literal, constructor, and factory notations are possible: /pattern/flags new regexp(pattern[, flags]) regexp(pattern[, flags]) parameters pattern the text of the regular expression. as of es5, this can also be another regexp object or literal (for the two regexp constructor notations only). patterns may include special characters to match a wider range of val...
RegExp.prototype.exec() - JavaScript
(with capture groups), as opposed to getting just the matching strings with string.prototype.match(). a newer function has been proposed to simplify matching multiple parts of a string (with capture groups): string.prototype.matchall(). if you are executing a match simply to find true or false, use regexp.prototype.test() method or string.prototype.search() instead. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax regexobj.exec(str) parameters str the string against which to match the regular expression. return value if the match succeeds, the exec() method returns an array (with extra properties inde...
RegExp.prototype.flags - JavaScript
property attributes of regexp.prototype.flags writable no enumerable no configurable yes description flags in the flags property are sorted alphabetically (from left to right, e.g. "gimsuy"). ...
RegExp.prototype.global - JavaScript
the global property indicates whether or not the "g" flag is used with the regular expression. global is a read-only property of an individual regular expression instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.global writable no enumerable no configurable yes description the value of global is a boolean and true if the "g" flag was used; otherwise, false. the "g" flag indicates that the regular expression should be tested against all possible matches in a string. a regular...
RegExp.prototype.ignoreCase - JavaScript
the ignorecase property indicates whether or not the "i" flag is used with the regular expression. ignorecase is a read-only property of an individual regular expression instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.ignorecase writable no enumerable no configurable yes description the value of ignorecase is a boolean and true if the "i" flag was used; otherwise, false. the "i" flag indicates that case should be ignored while attempting a match in a string. you cannot ch...
RegExp.prototype.multiline - JavaScript
the multiline property indicates whether or not the "m" flag is used with the regular expression. multiline is a read-only property of an individual regular expression instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.multiline writable no enumerable no configurable yes description the value of multiline is a boolean and is true if the "m" flag was used; otherwise, false. the "m" flag indicates that a multiline input string should be treated as multiple lines. for example, i...
RegExp.prototype.source - JavaScript
the source property returns a string containing the source text of the regexp object, and it doesn't contain the two forward slashes on both sides and any flags. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.source writable no enumerable no configurable yes examples using source var regex = /foobar/ig; console.log(regex.source); // "foobar", doesn't contain /.../ and "ig". empty regular expressions and escaping starting with ecmascript 5, the source property no longer returns...
RegExp.prototype.sticky - JavaScript
the sticky property reflects whether or not the search is sticky (searches in strings only from the index indicated by the lastindex property of this regular expression). sticky is a read-only property of an individual regular expression object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.sticky writable no enumerable no configurable yes description the value of sticky is a boolean and true if the "y" flag was used; otherwise, false. the "y" flag indicates that it matches only f...
RegExp.prototype.toString() - JavaScript
syntax regexobj.tostring(); return value a string representing the given object. description the regexp object overrides the tostring() method of the object object; it does not inherit object.prototype.tostring(). for regexp objects, the tostring() method returns a string representation of the regular expression. ...
RegExp.prototype.unicode - JavaScript
the unicode property indicates whether or not the "u" flag is used with a regular expression. unicode is a read-only property of an individual regular expression instance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of regexp.prototype.unicode writable no enumerable no configurable yes description the value of unicode is a boolean and true if the "u" flag was used; otherwise false. the "u" flag enables various unicode-related features. with the "u" flag, any unicode code point escapes will be inter...
Set.prototype.delete() - JavaScript
syntax myset.delete(value); parameters value the value to remove from myset. return value returns true if value was successfully removed from myset; otherwise false. examples using the delete() method const myset = new set(); myset.add('foo'); myset.delete('bar'); // returns false. no "bar" element found to be deleted. myset.delete('foo'); // returns true. successfully removed. ...
Set.prototype.entries() - JavaScript
the entries() method returns a new iterator object that contains an array of [value, value] for each element in the set object, in insertion order. for set objects there is no key like in map objects. however, to keep the api similar to the map object, each entry has the same value for its key and value here, so that an array [value, value] is returned. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax myset.entries() return value a new iterator object that contains an array of [value, value] for each element in the given set, in insertion order. examples using entries() var myset = new set(); myset.add('fo...
Set.prototype.values() - JavaScript
the values() method returns a new iterator object that contains the values for each element in the set object in insertion order. the keys() method is an alias for this method (for similarity with map objects); it behaves exactly the same and returns values of set elements. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax myset.values(); return value a new iterator object containing the values for each element in the given set, in insertion order. examples using values() var myset = new set(); myset.add('foo'); myset.add('bar'); myset.add('baz'); var setiter = myset.values(); console.log(setiter.next()...
SharedArrayBuffer() constructor - JavaScript
major browsers on 5 january, 2018 in response to spectre. chrome re-enabled it in v67 on platforms where its site-isolation feature is enabled to protect against spectre-style vulnerabilities. the sharedarraybuffer() constructor is used to create a sharedarraybuffer object representing a generic, fixed-length raw binary data buffer, similar to the arraybuffer object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax new sharedarraybuffer([length]) parameters length the size, in bytes, of the array buffer to create. return value a new sharedarraybuffer object of the specified size. its contents are init...
SharedArrayBuffer.prototype.slice() - JavaScript
the sharedarraybuffer.prototype.slice() method returns a new sharedarraybuffer whose contents are a copy of this sharedarraybuffer's bytes from begin, inclusive, up to end, exclusive. if either begin or end is negative, it refers to an index from the end of the array, as opposed to from the beginning. this method has the same algorithm as array.prototype.slice(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax sab.slice() sab.slice(begin) sab.slice(begin, end) parameters begin optional zero-based index at which to begin extraction. a negative index can be used, indicating an offset from the end of the se...
String.prototype.codePointAt() - JavaScript
syntax str.codepointat(pos) parameters pos position of an element in str to return the code point value from. return value a number representing the code point value of the character at the given pos. if there is no element at pos, returns undefined. description if there is no element at the specified position, undefined is returned. ...
String.prototype.concat() - JavaScript
syntax str.concat(str2 [, ...strn]) parameters str2 [, ...strn] strings to concatenate to str. return value a new string containing the combined text of the strings provided. description the concat() function concatenates the string arguments to the calling string and returns a new string. ...
String.fromCodePoint() - JavaScript
syntax string.fromcodepoint(num1[, ...[, numn]]) parameters num1, ..., numn a sequence of code points. return value a string created by using the specified sequence of code points. exceptions a rangeerror is thrown if an invalid unicode code point is given (e.g. "rangeerror: nan is not a valid code point"). ...
String.prototype.match() - JavaScript
syntax str.match(regexp) parameters regexp a regular expression object. if regexp is a non-regexp object, it is implicitly converted to a regexp by using new regexp(regexp). if you don't give any parameter and use the match() method directly, you will get an array with an empty string: [""]. ...
String.prototype.normalize() - JavaScript
syntax str.normalize([form]) parameters form optional one of "nfc", "nfd", "nfkc", or "nfkd", specifying the unicode normalization form. if omitted or undefined, "nfc" is used. these values have the following meanings: "nfc" canonical decomposition, followed by canonical composition. "nfd" canonical decomposition. ...
String.prototype.padStart() - JavaScript
the padstart() method pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length. the padding is applied from the start of the current string. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax str.padstart(targetlength [, padstring]) parameters targetlength the length of the resulting string once the current str has been padded. if the value is less than str.length, then str is returned as-is. padstring optional the string to pad the current str with. if padstring is too long to stay within the targetlength, it will be truncated from the end...
String.prototype.replace() - JavaScript
the replace() method returns a new string with some or all matches of a pattern replaced by a replacement. the pattern can be a string or a regexp, and the replacement can be a string or a function to be called for each match. if pattern is a string, only the first occurrence will be replaced. the original string is left unchanged. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax const newstr = str.replace(regexp|substr, newsubstr|function) parameters regexp (pattern) a regexp object or literal. the match or matches are replaced with newsubstr or the value returned by the specified function. substr a st...
String.prototype.replaceAll() - JavaScript
20 the replaceall() method is supported by firefox but not by chrome. it will become available in chrome 85. the replaceall() method returns a new string with all matches of a pattern replaced by a replacement. the pattern can be a string or a regexp, and the replacement can be a string or a function to be called for each match. the original string is left unchanged. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax const newstr = str.replaceall(regexp|substr, newsubstr|function) when using a `regexp` you must have to set the global ("g") flag; otherwise, it will throw a typeerror: "replaceall must be called...
String.prototype.search() - JavaScript
syntax str.search(regexp) parameters regexp a regular expression object. if a non-regexp object regexp is passed, it is implicitly converted to a regexp with new regexp(regexp). return value the index of the first match between the regular expression and the given string, or -1 if no match was found. ...
String.prototype.split() - JavaScript
the split() method divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array. the division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax str.split([separator[, limit]]) parameters separator optional the pattern describing where each split should occur. the separator can be a simple string or it can be a regular expression. the simplest case is when separator is just a single character; this is used to split a delimited string. fo...
String.prototype.toLowerCase() - JavaScript
syntax str.tolowercase() return value a new string representing the calling string converted to lower case. description the tolowercase() method returns the value of the string converted to lower case. tolowercase() does not affect the value of the string str itself. ...
String.prototype.trimEnd() - JavaScript
syntax str.trimend(); str.trimright(); return value a new string representing the calling string stripped of whitespace from its (right) end. description the trimend() / trimright() methods return the string stripped of whitespace from its right end. trimend() or trimright() do not affect the value of the string itself. ...
Symbol() constructor - JavaScript
the symbol() constructor returns a value of type symbol, but is incomplete as a constructor because it does not support the syntax "new symbol()" and it is not intended to be subclassed. it may be used as the value of an extends clause of a class definition but a super call to it will cause an exception. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax symbol([description]) parameters description optional a string. a description of the symbol which can be used for debugging but not to access the symbol itself. examples creating symbols to create a new primitive symbol, you write symbol() with an option...
Symbol.prototype.description - JavaScript
description symbol objects can be created with an optional description which can be used for debugging but not to access the symbol itself. the symbol.prototype.description property can be used to read that description. it is different to symbol.prototype.tostring() as it does not contain the enclosing "symbol()" string. see the examples. ...
Symbol.hasInstance - JavaScript
the symbol.hasinstance well-known symbol is used to determine if a constructor object recognizes an object as its instance. the instanceof operator's behavior can be customized by this symbol. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of symbol.hasinstance writable no enumerable no configurable no examples custom instanceof behavior you could implement your custom instanceof behavior like this, for example: class myarray { static [symbol.hasinstance](instance) { return array.isarray(insta...
Symbol.iterator - JavaScript
description whenever an object needs to be iterated (such as at the beginning of a for..of loop), its @@iterator method is called with no arguments, and the returned iterator is used to obtain the values to be iterated. some built-in types have a default iteration behavior, while other types (such as object) do not. ...
Symbol.replace - JavaScript
the symbol.replace well-known symbol specifies the method that replaces matched substrings of a string. this function is called by the string.prototype.replace() method. for more information, see regexp.prototype[@@replace]() and string.prototype.replace(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of symbol.replace writable no enumerable no configurable no examples using symbol.replace class customreplacer { constructor(value) { this.value = value; } [symbol.replace](string) { re...
Symbol.search - JavaScript
the symbol.search well-known symbol specifies the method that returns the index within a string that matches the regular expression. this function is called by the string.prototype.search() method. for more information, see regexp.prototype[@@search]() and string.prototype.search(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of symbol.search writable no enumerable no configurable no examples custom string search class caseinsensitivesearch { constructor(value) { this.value = value.tolowerc...
Symbol.split - JavaScript
the symbol.split well-known symbol specifies the method that splits a string at the indices that match a regular expression. this function is called by the string.prototype.split() method. for more information, see regexp.prototype[@@split]() and string.prototype.split(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of symbol.split writable no enumerable no configurable no examples custom reverse split class reversesplit { [symbol.split](string) { const array = string.split(' '); return ...
Symbol.prototype.toString() - JavaScript
syntax symbol().tostring() return value a string representing the specified symbol object. description the symbol object overrides the tostring method of the object object; it does not inherit object.prototype.tostring(). for symbol objects, the tostring method returns a string representation of the object. ...
Symbol.toStringTag - JavaScript
the symbol.tostringtag well-known symbol is a string valued property that is used in the creation of the default string description of an object. it is accessed internally by the object.prototype.tostring() method. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. property attributes of symbol.tostringtag writable no enumerable no configurable no examples default tags object.prototype.tostring.call('foo'); // "[object string]" object.prototype.tostring.call([1, 2]); // "[object array]" object.prototype.tostring.call...
Symbol.unscopables - JavaScript
the symbol.unscopables well-known symbol is used to specify an object value of whose own and inherited property names are excluded from the with environment bindings of the associated object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. description the @@unscopables symbol (symbol.unscopables) can be defined on any object to exclude property names from being exposed as lexical variables in with with environment bindings. note that if using strict mode, with statements are not available and will likely also not need this symbol. setting a property to true in an unscopables object will make it unscopable and theref...
TypedArray.BYTES_PER_ELEMENT - JavaScript
property attributes of typedarray.bytes_per_element writable no enumerable no configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. ...
TypedArray.prototype.byteLength - JavaScript
description the bytelength property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when a typedarray is constructed and cannot be changed. if the typedarray is not specifying an byteoffset or a length, the length of the referenced arraybuffer will be returned. ...
TypedArray.prototype.copyWithin() - JavaScript
hod copies the sequence of array elements within the array to the position starting at target. the copy is taken from the index positions of the second and third arguments start and end. the end argument is optional and defaults to the length of the array. this method has the same algorithm as array.prototype.copywithin. typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.copywithin(target, start[, end = this.length]) parameters target target start index position where to copy the elements to. start source start index position where to start copying...
TypedArray.prototype.every() - JavaScript
the every() method tests whether all elements in the typed array pass the test implemented by the provided function. this method has the same algorithm as array.prototype.every(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.every(callback[, thisarg]) parameters callback function to test for each element, taking three arguments: currentvalue the current element being processed in the typed array. index the index of the current element being processed in the typed array. array the typed array every was called upon. thisarg o...
TypedArray.prototype.fill() - JavaScript
the fill() method fills all the elements of a typed array from a start index to an end index with a static value. this method has the same algorithm as array.prototype.fill(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.fill(value[, start = 0[, end = this.length]]) parameters value value to fill the typed array with. start optional. start index. defaults to 0. end optional. end index (not included). defaults to this.length. return value the modified array. description the elements interval to fill is [start, end). the fill method ta...
TypedArray.prototype.filter() - JavaScript
the filter() method creates a new typed array with all elements that pass the test implemented by the provided function. this method has the same algorithm as array.prototype.filter(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.filter(callback[, thisarg]) parameters callback function to test each element of the typed array. invoked with arguments (element, index, typedarray). return true to keep the element, false otherwise. thisarg optional value to use as this when executing callback. return value a new typed array with the elements t...
TypedArray.prototype.find() - JavaScript
the find() method returns a value in the typed array, if an element satisfies the provided testing function. otherwise undefined is returned. typedarray is one of the typed array types here. see also the findindex() method, which returns the index of a found element in the typed array instead of its value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.find(callback[, thisarg]) parameters callback function to execute on each value in the typed array, taking three arguments: element the current element being processed in the typed array. index the index of the current element being p...
TypedArray.prototype.findIndex() - JavaScript
the findindex() method returns an index in the typed array, if an element in the typed array satisfies the provided testing function. otherwise -1 is returned. see also the find() method, which returns the value of a found element in the typed array instead of its index. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.findindex(callback[, thisarg]) parameters callback function to execute on each value in the typed array, taking three arguments: element the current element being processed in the typed array. index the index of the current element being processed in the typed array. ...
TypedArray.from() - JavaScript
the typedarray.from() method creates a new typed array from an array-like or iterable object. this method is nearly the same as array.from(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.from(source[, mapfn[, thisarg]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters source an array-like or iterable object to convert to a typed array. mapfn optional map function to call on every element of the typed array. thisarg optional value to use as ...
TypedArray.prototype.includes() - JavaScript
the includes() method determines whether a typed array includes a certain element, returning true or false as appropriate. this method has the same algorithm as array.prototype.includes(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.includes(searchelement[, fromindex]); parameters searchelement the element to search for. fromindex optional. the position in this array at which to begin searching for searchelement; defaults to 0. return value a boolean. examples using includes var uint8 = new uint8array([1,2,3]); uint8.includes(2); ...
TypedArray.prototype.indexOf() - JavaScript
the indexof() method returns the first index at which a given element can be found in the typed array, or -1 if it is not present. this method has the same algorithm as array.prototype.indexof(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.indexof(searchelement[, fromindex = 0]) parameters searchelement element to locate in the typed array. fromindex the index to start the search at. if the index is greater than or equal to the typed array's length, -1 is returned, which means the typed array will not be searched. if the provided index valu...
TypedArray.prototype.lastIndexOf() - JavaScript
the lastindexof() method returns the last index at which a given element can be found in the typed array, or -1 if it is not present. the typed array is searched backwards, starting at fromindex. this method has the same algorithm as array.prototype.lastindexof(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.lastindexof(searchelement[, fromindex = typedarray.length]) parameters searchelement element to locate in the typed array. fromindex optional. the index at which to start searching backwards. defaults to the typed array's length, i.e. th...
TypedArray.prototype.length - JavaScript
description the length property is an accessor property whose set accessor function is undefined, meaning that you can only read this property. the value is established when a typedarray is constructed and cannot be changed. if the typedarray is not specifying an byteoffset or a length, the length of the referenced arraybuffer will be returned. ...
TypedArray.prototype.map() - JavaScript
the map() method creates a new typed array with the results of calling a provided function on every element in this typed array. this method has the same algorithm as array.prototype.map(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.map(mapfn[, thisarg]) parameters mapfn a callback function that produces an element of the new typed array, taking three arguments: currentvalue the current element being processed in the typed array. index optional the index of the current element being processed in the typed array. array optional...
TypedArray.name - JavaScript
property attributes of typedarray.name writable no enumerable no configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. ...
TypedArray.of() - JavaScript
the typedarray.of() method creates a new typed array from a variable number of arguments. this method is nearly the same as array.of(). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.of(element0[, element1[, ...[, elementn]]]) where typedarray is one of: int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array parameters elementn elements of which to create the typed array. return value a new typedarray instance. description some subtle distinctions between array.of() and typedarray.of(): if the this...
TypedArray.prototype.reduce() - JavaScript
the reduce() method applies a function against an accumulator and each value of the typed array (from left-to-right) has to reduce it to a single value. this method has the same algorithm as array.prototype.reduce(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.reduce(callback[, initialvalue]) parameters callback function to execute on each value in the typed array, taking four arguments: previousvalue the value previously returned in the last invocation of the callback, or initialvalue, if supplied (see below). currentvalue the curr...
TypedArray.prototype.reverse() - JavaScript
the reverse() method reverses a typed array in place. the first typed array element becomes the last and the last becomes the first. this method has the same algorithm as array.prototype.reverse(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.reverse(); return value the reversed array. examples using reverse var uint8 = new uint8array([1, 2, 3]); uint8.reverse(); console.log(uint8); // uint8array [3, 2, 1] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.reverse' in that specif...
TypedArray.prototype.set() - JavaScript
syntax typedarray.set(array[, offset]) typedarray.set(typedarray[, offset]) parameters array the array from which to copy values. all values from the source array are copied into the target array, unless the length of the source array plus the offset exceeds the length of the target array, in which case an exception is thrown. ...
TypedArray.prototype.some() - JavaScript
the some() method tests whether some element in the typed array passes the test implemented by the provided function. this method has the same algorithm as array.prototype.some(). typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.some(callback[, thisarg]) parameters callback function to test for each element, taking three arguments: currentvalue the current element being processed in the typed array. index the index of the current element being processed in the typed array. array the typed array some was called upon. thisarg opt...
TypedArray.prototype.sort() - JavaScript
the sort() method sorts the elements of a typed array numerically in place and returns the typed array. this method has the same algorithm as array.prototype.sort(), except that sorts the values numerically instead of as strings. typedarray is one of the typed array types here. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.sort([comparefunction]) parameters comparefunction optional specifies a function that defines the sort order. return value the sorted typed array. examples using sort for more examples, see also the array.prototype.sort() method. let numbers = new uint8array([40, 1, ...
TypedArray.prototype.subarray() - JavaScript
the subarray() method returns a new typedarray on the same arraybuffer store and with the same element types as for this typedarray object. the begin offset is inclusive and the end offset is exclusive. typedarray is one of the typed array types. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax typedarray.subarray([begin [,end]]) parameters begin optional element to begin at. the offset is inclusive. the whole array will be included in the new view if this value is not specified. end optional element to end at. the offset is exclusive. if not specified, all elements from the one specified by begin to th...
TypedArray - JavaScript
lobal property named typedarray, nor is there a directly visible typedarray constructor. instead, there are a number of different global properties, whose values are typed array constructors for specific element types, listed below. on the following pages you will find common properties and methods that can be used with any typed array containing elements of any type. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. description ecmascript 2015 defines a typedarray constructor that serves as the [[prototype]] of all typedarray constructors. this constructor is not directly exposed: there is no global %typedarray% o...
WeakMap.prototype.delete() - JavaScript
syntax wm.delete(key); parameters key the key of the element to remove from the weakmap object. return value true if an element in the weakmap object has been removed successfully. false if the key is not found in the weakmap or if the key is not an object. examples using the delete method var wm = new weakmap(); wm.set(window, 'foo'); wm.delete(window); // returns true. ...
WeakMap.prototype.get() - JavaScript
syntax wm.get(key); parameters key required. the key of the element to return from the weakmap object. return value the element associated with the specified key in the weakmap object. if the key can't be found, undefined is returned. examples using the get method var wm = new weakmap(); wm.set(window, 'foo'); wm.get(window); // returns "foo". wm.get('baz'); // returns undefined. ...
WeakSet.prototype.delete() - JavaScript
syntax ws.delete(value); parameters value required. the object remove from the weakset object. return value true if an element in the weakmap object has been removed successfully. false if the key is not found in the weakmap or if the key is not an object. examples using the delete method var ws = new weakset(); var obj = {}; ws.add(window); ws.delete(obj); // returns false. ...
encodeURI() - JavaScript
the encodeuri() function encodes a uri by replacing each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax encodeuri(uri) parameters uri a complete uri. return value a new string representing the provided string encoded as a uri. description the encodeuri() function does not encode characters that have special meaning (reserved characters) for a uri. the following example shows all the par...
encodeURIComponent() - JavaScript
the encodeuricomponent() function encodes a uri by replacing each instance of certain characters by one, two, three, or four escape sequences representing the utf-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax encodeuricomponent(str); parameters str string. a component of a uri. return value a new string representing the provided string encoded as a uri component. description encodeuricomponent() escapes all characters except: not escaped: a-z a-z 0-9 - _ . ! ~ * ' ( ) enc...
eval() - JavaScript
warning: executing javascript from a string is an enormous security risk. it is far too easy for a bad actor to run arbitrary code when you use eval(). see never use eval()!, below. the eval() function evaluates javascript code represented as a string. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax eval(string) parameters string a string representing a javascript expression, statement, or sequence of statements. the expression can include variables and properties of existing objects. return value the completion value of evaluating the given code. if the completion value is empty, undefined is retur...
globalThis - JavaScript
property attributes of globalthis writable yes enumerable no configurable yes description historically, accessing the global object has required different syntax in different javascript environments. ...
undefined - JavaScript
the global undefined property represents the primitive value undefined. it is one of javascript's primitive types. property attributes of undefined writable no enumerable no configurable no the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax undefined description undefined is a property of the global object. that is, it is a variable in global scope. the initial value of undefined is the primitive value undefined. in modern browsers (javascript 1.8.5 / firefox 4+), undefined is a non-configurable, non-writable prope...
Addition (+) - JavaScript
the addition operator (+) produces the sum of numeric operands or string concatenation. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x + y examples numeric addition // number + number -> addition 1 + 2 // 3 // boolean + number -> addition true + 1 // 2 // boolean + boolean -> addition false + false // 0 string concatenation // string + string -> concatenation 'foo' + 'bar' // "foobar" // number + string -> concatenation 5 + 'foo' // "5foo" // string + boolean -> concatenation 'foo' + false // "foofalse" specifications specification ecmascript (ecma-262)the definiti...
Addition assignment (+=) - JavaScript
the addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable. the types of the two operands determine the behavior of the addition assignment operator. addition or concatenation is possible. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x += y meaning: x = x + y examples using addition assignment // assuming the following variables // foo = 'foo' // bar = 5 // baz = true // number + number -> addition bar += 2 // 7 // boolean + number -> addition baz += 1 // 2 // boolean + boolean -> addition baz += false // 1 // number...
Assignment (=) - JavaScript
the simple assignment operator (=) is used to assign a value to a variable. the assignment operation evaluates to the assigned value. chaining the assignment operator is possible in order to assign a single value to multiple variables the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x = y examples simple assignment and chaining // assuming the following variables // x = 5 // y = 10 // z = 25 x = y // x is 10 x = y = z // x, y and z are all 25 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Bitwise AND assignment (&=) - JavaScript
the bitwise and assignment operator (&=) uses the binary representation of both operands, does a bitwise and operation on them and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x &= y meaning: x = x & y examples using bitwise and assignment let a = 5; // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 a &= 2; // 0 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Bitwise OR assignment (|=) - JavaScript
the bitwise or assignment operator (|=) uses the binary representation of both operands, does a bitwise or operation on them and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x |= y meaning: x = x | y examples using bitwise or assignment let a = 5; a |= 2; // 7 // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 // ----------------------------------- // 7: 00000000000000000000000000000111 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Bitwise XOR assignment (^=) - JavaScript
the bitwise xor assignment operator (^=) uses the binary representation of both operands, does a bitwise xor operation on them and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x ^= y meaning: x = x ^ y examples using bitwise xor assignment let a = 5; // 00000000000000000000000000000101 a ^= 3; // 00000000000000000000000000000011 console.log(a); // 00000000000000000000000000000110 // 6 let b = 5; // 00000000000000000000000000000101 b ^= 0; // 00000000000000000000000000000000 console.log(b); // 00000000000000000000000000000101 /...
Comma operator (,) - JavaScript
omma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. this lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. this is commonly used to provide multiple parameters to a for loop. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax expr1, expr2, expr3... parameters expr1, expr2, expr3... one or more expressions, the last of which is returned as the value of the compound expression. usage notes you can use the comma ope...
Conditional (ternary) operator - JavaScript
the conditional (ternary) operator is the only javascript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. this operator is frequently used as a shortcut for the if statement. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax condition ? expriftrue : expriffalse parameters condition an expression whose value is used as a condition. expriftrue an expression which is evaluated if the condition evaluates to a truthy value (one which...
Decrement (--) - JavaScript
syntax operator: x-- or --x description if used postfix, with operator after operand (for example, x--), the decrement operator decrements and returns the value before decrementing. if used prefix, with operator before operand (for example, --x), the decrement operator decrements and returns the value after decrementing. ...
Destructuring assignment - JavaScript
the destructuring assignment syntax is a javascript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20...
Division (/) - JavaScript
the division operator (/) produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x / y examples basic division 1 / 2 // 0.5 math.floor(3 / 2) // 1 1.0 / 2.0 // 0.5 division by zero 2.0 / 0 // infinity 2.0 / 0.0 // infinity, because 0.0 === 0 2.0 / -0.0 // -infinity specifications specification ecmascript (ecma-262)the definition of 'division operator' in that specification. ...
Division assignment (/=) - JavaScript
the division assignment operator (/=) divides a variable by the value of the right operand and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x /= y meaning: x = x / y examples using division assignment // assuming the following variable // bar = 5 bar /= 2 // 2.5 bar /= 'foo' // nan bar /= 0 // infinity specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Equality (==) - JavaScript
the equality operator (==) checks whether its two operands are equal, returning a boolean result. unlike the strict equality operator, it attempts to convert and compare operands that are of different types. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax x == y description the equality operators (== and !=) use the abstract equality comparison algorithm to compare two operands. this can be roughly summarised as follows: if the operands are both objects, return true only if both operands reference the same object. if one operand is null and the other is undefined, return true. if the operands are of di...
Exponentiation assignment (**=) - JavaScript
the exponentiation assignment operator (**=) raises the value of a variable to the power of the right operand. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x **= y meaning: x = x ** y examples using exponentiation assignment // assuming the following variable // bar = 5 bar **= 2 // 25 bar **= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Grouping operator ( ) - JavaScript
syntax ( ) description the grouping operator consists of a pair of parentheses around an expression or sub-expression to override the normal operator precedence so that expressions with lower precedence can be evaluated before an expression with higher priority. as it sounds, it groups what's inside of the parentheses. ...
Increment (++) - JavaScript
syntax operator: x++ or ++x description if used postfix, with operator after operand (for example, x++), the increment operator increments and returns the value before incrementing. if used prefix, with operator before operand (for example, ++x), the increment operator increments and returns the value after incrementing. ...
Left shift assignment (<<=) - JavaScript
the left shift assignment operator (<<=) moves the specified amount of bits to the left and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x <<= y meaning: x = x << y examples using left shift assignment let a = 5; // 00000000000000000000000000000101 bar <<= 2; // 20 // 00000000000000000000000000010100 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Logical AND (&&) - JavaScript
perator (logical conjunction) for a set of operands is true if and only if all of its operands are true. it is typically used with boolean (logical) values. when it is, it returns a boolean value. however, the && operator actually returns the value of one of the specified operands, so if this operator is used with non-boolean values, it will return a non-boolean value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax expr1 && expr2 description if expr1 can be converted to true, returns expr2; else, returns expr1. if a value can be converted to true, the value is so-called truthy. if a value can be converted ...
Logical AND assignment (&&=) - JavaScript
the logical and assignment (x &&= y) operator only assigns if x is truthy. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax expr1 &&= expr2 description short-circuit evaluation the logical and operator is evaluated left to right, it is tested for possible short-circuit evaluation using the following rule: (some falsy expression) && expr is short-circuit evaluated to the falsy expression; short circuit means that the expr part above is not evaluated, hence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place). logical and assignment short-circuit...
Logical NOT (!) - JavaScript
the logical not (!) operator (logical complement, negation) takes truth to falsity and vice versa. it is typically used with boolean (logical) values. when used with non-boolean values, it returns false if its single operand can be converted to true; otherwise, returns true. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax !expr description returns false if its single operand can be converted to true; otherwise, returns true. if a value can be converted to true, the value is so-called truthy. if a value can be converted to false, the value is so-called falsy. examples of expressions that can be converted t...
Logical OR (||) - JavaScript
(logical disjunction) for a set of operands is true if and only if one or more of its operands is true. it is typically used with boolean (logical) values. when it is, it returns a boolean value. however, the || operator actually returns the value of one of the specified operands, so if this operator is used with non-boolean values, it will return a non-boolean value. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax expr1 || expr2 description if expr1 can be converted to true, returns expr1; else, returns expr2. if a value can be converted to true, the value is so-called truthy. if a value can be converted ...
Logical OR assignment (||=) - JavaScript
syntax expr1 ||= expr2 description short-circuit evaluation the logical or operator works like this: x || y; // returns x when x is truthy // returns y when x is not truthy the logical or operator short-circuits: the second operand is only evaluated if the first operand doesn’t already determine the result. ...
Logical nullish assignment (??=) - JavaScript
the logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax expr1 ??= expr2 description short-circuit evaluation the nullish coalescing operator is evaluated left to right, it is tested for possible short-circuit evaluation using the following rule: (some expression that is neither null nor undefined) ?? expr is short-circuit evaluated to the left-hand side expression if the left-hand side proves to be neither null nor undefined. short circuit means that the expr part above is not evaluated, hence any side effects of ...
Multiplication (*) - JavaScript
the multiplication operator (*) produces the product of the operands. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x * y examples multiplication using numbers 2 * 2 // 4 -2 * 2 // -4 multiplication with infinity infinity * 0 // nan infinity * infinity // infinity multiplication with non-numbers 'foo' * 2 // nan specifications specification ecmascript (ecma-262)the definition of 'multiplication operator' in that specification. ...
Multiplication assignment (*=) - JavaScript
the multiplication assignment operator (*=) multiplies a variable by the value of the right operand and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x *= y meaning: x = x * y examples using multiplication assignment // assuming the following variable // bar = 5 bar *= 2 // 10 bar *= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Nullish coalescing operator (??) - JavaScript
urns its left-hand side operand. contrary to the logical or (||) operator, the left operand is returned if it is a falsy value which is not null or undefined. in other words, if you use || to provide some default value to another variable foo, you may encounter unexpected behaviors if you consider some falsy values as usable (eg. '' or 0). see below for more examples. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. see pr #1482 regarding the addition of this example. syntax leftexpr ?? rightexpr examples using the nullish coalescing operator in this example, we will provide default values but keep values other t...
Object initializer - JavaScript
objects can be initialized using new object(), object.create(), or using the literal notation (initializer notation). an object initializer is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax let o = {} let o = {a: 'foo', b: 42, c: {}} let a = 'foo', b = 42, c = {} let o = {a: a, b: b, c: c} let o = { property: function (parameters) {}, get property() {}, set property(value) {} }; new notations in ecmascript 2015 please see the compatibility table for support for these not...
Optional chaining (?.) - JavaScript
ned. when used with function calls, it returns undefined if the given function does not exist. this results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. it can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax obj?.prop obj?.[expr] arr?.[index] func?.(args) description the optional chaining operator provides a way to simplify accessing values through connected objects when it's possible that a referenc...
Property accessors - JavaScript
syntax object.property object['property'] description one can think of an object as an associative array (a.k.a. map, dictionary, hash, lookup table). the keys in this array are the names of the object's properties. it's typical when speaking of an object's properties to make a distinction between properties and methods. ...
Remainder (%) - JavaScript
the remainder operator (%) returns the remainder left over when one operand is divided by a second operand. it always takes the sign of the dividend. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: var1 % var2 examples remainder with positive dividend 12 % 5 // 2 1 % -2 // 1 1 % 2 // 1 2 % 3 // 2 5.5 % 2 // 1.5 remainder with negative dividend -12 % 5 // -2 -1 % 2 // -1 -4 % 2 // -0 remainder with nan nan % 2 // nan specifications specification ecmascript (ecma-262)the definition of 'remainder operator' in that specification. ...
Remainder assignment (%=) - JavaScript
the remainder assignment operator (%=) divides a variable by the value of the right operand and assigns the remainder to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x %= y meaning: x = x % y examples using remainder assignment // assuming the following variable // bar = 5 bar %= 2 // 1 bar %= 'foo' // nan bar %= 0 // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Right shift (>>) - JavaScript
the right shift operator (>>) shifts the first operand the specified number of bits to the right. excess bits shifted off to the right are discarded. copies of the leftmost bit are shifted in from the left. since the new leftmost bit has the same value as the previous leftmost bit, the sign bit (the leftmost bit) does not change. hence the name "sign-propagating". the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax a >> b description this operator shifts the first operand the specified number of bits to the right. excess bits shifted off to the right are discarded. copies of the leftmost bit are shifted in from...
Right shift assignment (>>=) - JavaScript
the right shift assignment operator (>>=) moves the specified amount of bits to the right and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x >>= y meaning: x = x >> y examples using right shift assignment let a = 5; // (00000000000000000000000000000101) a >>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) b >>= 2; // -2 (-00000000000000000000000000000010) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Spread syntax (...) - JavaScript
spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax for function calls: myfunction(...iterableobj); for array literals or strings: [...iterableobj, '4', 'five', 6]; for object literals (new in ecmascript 2018): let objclone = { ...obj }; rest syntax (parameters) rest syntax looks exactly like ...
Strict equality (===) - JavaScript
the strict equality operator (===) checks whether its two operands are equal, returning a boolean result. unlike the equality operator, the strict equality operator always considers operands of different types to be different. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax x === y description the strict equality operators (=== and !==) use the strict equality comparison algorithm to compare two operands. if the operands are of different types, return false. if both operands are objects, return true only if they refer to the same object. if both operands are null or both operands are undefined, return t...
Strict inequality (!==) - JavaScript
the strict inequality operator (!==) checks whether its two operands are not equal, returning a boolean result. unlike the inequality operator, the strict inequality operator always considers operands of different types to be different. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax x !== y description the strict inequality operator checks whether its operands are not equal. it is the negation of the strict equality operator so the following two lines will always give the same result: x !== y !(x === y) for details of the comparison algorithm, see the page for the strict equality operator. like the stri...
Subtraction (-) - JavaScript
the subtraction operator (-) subtracts the two operands, producing their difference. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x - y examples subtraction with numbers 5 - 3 // 2 3 - 5 // -2 subtraction with non-numbers 'foo' - 3 // nan specifications specification ecmascript (ecma-262)the definition of 'subtraction operator' in that specification. ...
Subtraction assignment (-=) - JavaScript
the subtraction assignment operator (-=) subtracts the value of the right operand from a variable and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x -= y meaning: x = x - y examples using subtraction assignment // assuming the following variable // bar = 5 bar -= 2 // 3 bar -= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification. ...
Unsigned right shift (>>>) - JavaScript
gned right shift operator (>>>) (zero-fill right shift) shifts the first operand the specified number of bits to the right. excess bits shifted off to the right are discarded. zero bits are shifted in from the left. the sign bit becomes 0, so the result is always non-negative. unlike the other bitwise operators, zero-fill right shift returns an unsigned 32-bit integer. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax a >>> b description this operator shifts the first operand the specified number of bits to the right. excess bits shifted off to the right are discarded. zero bits are shifted in from the left. t...
Unsigned right shift assignment (>>>=) - JavaScript
the unsigned right shift assignment operator (>>>=) moves the specified amount of bits to the right and assigns the result to the variable. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax operator: x >>>= y meaning: x = x >>> y examples using unsigned right shift assignment let a = 5; // (00000000000000000000000000000101) a >>>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) b >>>= 2; // 1073741822 (00111111111111111111111111111110) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that...
class expression - JavaScript
the class expression is one way to define a class in ecmascript 2015. similar to function expressions, class expressions can be named or unnamed. if named, the name of the class is local to the class body only. javascript classes use prototype-based inheritance. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax const myclass = class [classname] [extends otherclassname] { // class body }; description a class expression has a similar syntax to a class declaration (statement). as with class statements, the body of a class expression is executed in strict mode. there are several differences between class ex...
delete operator - JavaScript
the javascript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax delete expression where expression should evaluate to a property reference, e.g.: delete object.property delete object['property'] parameters object the name of an object, or an expression evaluating to an object. property the property to delete. return value true for all cases except when the property is an own non-configurable property, in which case, false is returned in non-strict mode. ...
function* expression - JavaScript
syntax function* [name]([param1[, param2[, ..., paramn]]]) { statements } parameters name optional the function name. can be omitted, in which case the function is anonymous. the name is only local to the function body. paramn optional the name of an argument to be passed to the function. a function can have up to 255 arguments. ...
new.target - JavaScript
the new.target pseudo-property lets you detect whether a function or constructor was called using the new operator. in constructors and functions invoked using the new operator, new.target returns a reference to the constructor or function. in normal function calls, new.target is undefined. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax new.target description the new.target syntax consists of the keyword new, a dot, and the identifier target. normally, the left-hand side of the dot is the object on which property access is performed, but here, new is not an object. the new.target pseudo-property is availab...
this - JavaScript
d (runtime binding). it can't be set by assignment during execution, and it may be different each time the function is called. es5 introduced the bind() method to set the value of a function's this regardless of how it's called, and es2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context). the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax this value a property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value. description global co...
typeof - JavaScript
syntax the typeof operator is followed by its operand: typeof operand typeof(operand) parameters operand an expression representing the object or primitive whose type is to be returned. description the following table summarizes the possible return values of typeof. for more information about types and primitives, see also the javascript data structure page. ...
void operator - JavaScript
syntax void expression description this operator allows evaluating expressions that produce a value into places where an expression that evaluates to undefined is desired. the void operator is often used merely to obtain the undefined primitive value, usually using "void(0)" (which is equivalent to "void 0"). in these cases, the global variable undefined can be used. ...
yield* - JavaScript
syntax yield* expression; expression the expression which returns an iterable object. description the yield* expression iterates over the operand and yields each value returned by it. the value of yield* expression itself is the value returned by that iterator when it's closed (i.e., when done is true). ...
yield - JavaScript
syntax [rv] = yield [expression] expression optional defines the value to return from the generator function via the iterator protocol. if omitted, undefined is returned instead. rv optional retrieves the optional value passed to the generator's next() method to resume its execution. ...
empty - JavaScript
syntax ; description the empty statement is a semicolon (;) indicating that no statement will be executed, even if javascript syntax requires one. the opposite behavior, where you want multiple statements, but javascript only allows a single one, is possible using a block statement, which combines several statements into a single one. ...
async function - JavaScript
function declared with the async keyword. async functions are instances of the asyncfunction constructor, and the await keyword is permitted within them. the async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. async functions may also be defined as expressions. the source for this inter
active demo is stored in a github repository. if you'd like to contribute to the inter
active demo project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax async function name([param[, param[, ...param]]]) { statements } parameters name the function’s name. param the name of an argument to be passed to the function. statements the statements co...
block - JavaScript
a block statement (or compound statement in other languages) is used to group zero or more statements. the block is delimited by a pair of braces ("curly brackets") and may optionally be labelled: the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax block statement { statementlist } labelled block statement labelidentifier: { statementlist } statementlist statements grouped within the block statement. labelidentifier an optional label for visual identification or as a target for break. description the block statement is often called compound statement in other languages. it allows you to use multi...
class - JavaScript
you can also define a class using a class expression. but unlike a class expression, a class declaration doesn't allow an existing class to be declared again and will throw a syntaxerror if attempted. syntax class name [extends othername] { // class body } description the class body of a class declaration is executed in strict mode. ...
do...while - JavaScript
the do...while statement creates a loop that executes a specified statement until the test condition evaluates to false. the condition is evaluated after executing the statement, resulting in the specified statement executing at least once. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax do statement while (condition); statement a statement that is executed at least once and is re-executed each time the condition evaluates to true. to execute multiple statements within the loop, use a block statement ({ ... }) to group those statements. condition an expression evaluated after each pass through the...
for...of - JavaScript
the for...of statement creates a loop iterating over iterable objects, including: built-in string, array, array-like objects (e.g., arguments or nodelist), typedarray, map, set, and user-defined iterables. it invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax for (variable of iterable) { statement } variable on each iteration a value of a different property is assigned to variable. variable may be declared with const, let, or var. iterable object whose iterable properties are iterated. ...
for - JavaScript
the for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax for ([initialization]; [condition]; [final-expression]) statement initialization an expression (including assignment expressions) or variable declaration evaluated once before the loop begins. typically used to initialize a counter variable. this expression may optionally declare new variables with var or let keywords. variables declared with var ar...
let - JavaScript
syntax let var1 [= value1] [, var2 [= value2]] [, ..., varn [= valuen]; parameters var1, var2, …, varn the names of the variable or variables to declare. each must be a legal javascript identifier. value1, value2, …, valuen optional for each variable declared, you may optionally specify its initial value to any legal javascript expression. ...
return - JavaScript
syntax return [[expression]]; expression the expression whose value is to be returned. if omitted, undefined is returned instead. description when a return statement is used in a function body, the execution of the function is stopped. if specified, a given value is returned to the function caller. ...
switch - JavaScript
the switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax switch (expression) { case value1: //statements executed when the //result of expression matches value1 [break;] case value2: //statements executed when the //result of expression matches value2 [break;] ... case valuen: //statements executed when the //result of expression matches valuen [break;] [default: /...
throw - JavaScript
the throw statement throws a user-defined exception. execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. if no catch block exists among caller functions, the program will terminate. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. syntax throw expression; expression the expression to throw. description use the throw statement to throw an exception. when you throw an exception, expression specifies the value of the exception. each of the following throws an exception: throw 'error2'; // generates an e...
Autoplay guide for media and Web Audio APIs - Web media technologies
various forms of autoplay blocking. in this guide, we'll cover autoplay functionality in the various media and web audio apis, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully. autoplay blocking is not applied to <video> elements when the source media does not have an audio track, or if the audio track is muted. media with an
active audio track are considered to be audible, and autoplay blocking applies to them. inaudible media are not affected by autoplay blocking. autoplay and autoplay blocking the term autoplay refers to any feature that causes audio to begin to play without the user specifically requesting that playback begin. this includes both the use of html attributes to autoplay media as well as the user of javasc...
Media container formats (file types) - Web media technologies
ibute. then add child <source> elements within the <video> element, one for each version of the video you offer. this can be used to offer various versions of a video that can be selected depending on bandwidth availability, but in our case, we'll use it to offer format options. in the example shown here, a video is offered to the browser in two formats: webm and mp4. the source for this inter
active example is stored in a github repository. if you'd like to contribute to the inter
active examples project, please clone https://github.com/mdn/inter
active-examples and send us a pull request. the video is offered first in webm format (with the type attribute set to video/webm). if the user agent can't play that, it moves on to the next option, whose type is specified as video/mp4. if neither of...
Web video codec guide - Web media technologies
only. [2] chrome does not support mp4v-es; however, chrome os does. mpeg-1 part 2 video mpeg-1 part 2 video was unveiled at the beginning of the 1990s. unlike the later mpeg video standards, mpeg-1 was created solely by mpeg, without the itu's involvement. because any mpeg-2 decoder can also play mpeg-1 video, it's compatible with a wide variety of software and hardware devices. there are no
active patents remaining in relation to mpeg-1 video, so it may be used free of any licensing concerns. however, few web browsers support mpeg-1 video without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. this makes mpeg-1 a poor choice for use in web sites and web applications. supported bit rates up to 1.5 mbps s...
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
h and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads. without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout. this wasn't an attr
active thing for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence adding the attributes being a good idea. let’s move forward a few years to the era of responsive design. to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: im...
Populating the page: how browsers work - Web Performance
to the layout steps and restarts from there. interactivity once the main thread is done painting the page, you would think we would be "all set." that isn't necessarily the case. if the load includes javascript, that was correctly deferred, and only executed after the onload event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions. time to inter
active (tti) is the measurement of how long it took from that first request which led to the dns lookup and ssl connection to when the page is inter
active -- inter
active being the point in time after the first contentful paint when the page responds to user interactions within 50ms. if the main thread is occupied parsing, compiling, and executing javascript, it is not available and therefore not able to...
Privacy, permissions, and information security
kept out of the hands of unauthorized persons or organizations, regardless of how it's obtained. privacy exceptions may be granted to specific sites or applications, but it may also be granted conditionally, such as by permitting only a select group of people to access it, or only allowing the information to be accessed and used for a limited period of time. security security is about the
active protection of data or a system against being accessed, downloaded, or operated by people or organizations that don't have permission to do so. good security practices aim to prevent unauthorized access to systems or data, regardless of what the target is. personal and private information <what kind of information is private or personal?> privacy risks <what are ways personal information ca...
Introduction to progressive web apps - Progressive web apps (PWAs)
e re-engaged by updates and new content, even when they aren't looking at the app or using their devices. modern web apps can now do this too, using new technologies such as service workers for controlling pages, the web push api for sending updates straight from server to app via a service worker, and the notifications api for generating system notifications to help engage users when they're not
actively using their web browser. responsiveness responsive web apps use technologies like media queries and viewport to make sure that their uis will fit any form factor: desktop, mobile, tablet, or whatever comes next. safety the web platform provides a secure delivery mechanism that prevents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take a...
preserveAspectRatio - SVG: Scalable Vector Graphics
> <!-- none --> <rect x="0" y="30" width="160" height="60"> <title>none</title> </rect> <svg viewbox="0 0 100 100" width="160" height="60" preserveaspectratio="none" x="0" y="30"> <use href="#smiley" /> </svg> </svg> path { fill: yellow; stroke: black; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:
active { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match th...
target - SVG: Scalable Vector Graphics
tml definition of browsing contexts. use _self to replace the current svg document. _self the current svg image is replaced by the linked content in the same browsing context as the current svg image. _parent the immediate parent browsing context of the svg image is replaced by the linked content, if it exists and can be securely accessed from this document. _top the content of the full
active window or tab is replaced by the linked content, if it exists and can be securely accessed from this document _blank a new un-named window or tab is requested for the display of the linked content, if this document can securely do so. if the user agent does not support multiple windows/tabs, the result is the same as _top. <xml-name> specifies the name of the browsing context (tab, inline fra...
<circle> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<ellipse> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<foreignObject> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<g> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<image> - SVG: Scalable Vector Graphics
the <image> svg element includes images inside svg documents. it can display raster image files or other svg files. the only image formats svg software must support are jpeg, png, and other svg files. animated gif behavior is undefined. svg files displayed with <image> are treated as an image: external resources aren't loaded, :visited styles aren't applied, and they cannot be inter
active. to include dynamic svg elements, try <use> with an external url. to include svg files and run scripts inside them, try <object> inside of <foreignobject>. note: the html spec defines <image> as a synonym for <img> while parsing html. this specific element and its behavior only apply inside svg documents or inline svg. usage context categoriesgraphics element, graphics referencing elementpermitted conte...
<line> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<marker> - SVG: Scalable Vector Graphics
e presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<path> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<polygon> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<polyline> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<rect> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<svg> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<symbol> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<text> - SVG: Scalable Vector Graphics
notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<textPath> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<tspan> - SVG: Scalable Vector Graphics
notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
<use> - SVG: Scalable Vector Graphics
s presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-
activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-mul...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 921456) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 778654) svgelement.tabindex implemented (bug 778654) document.
activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown ...
Scripting - SVG: Scalable Vector Graphics
ets accidently selected while dragging. or if you want to use the backspace key in your code, you want to override the browser's default behavior when the backspace key is pressed, which is to go back to the previous page. the evt.preventdefault() method lets you do this. using eventlisteners with objects the methods addeventlistener() and removeeventlistener() are very useful when writing inter
active svg. you can pass an object that implements the handleevent interface as the second parameter to these methods. function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height...
Secure contexts - Web security
and more: invade a user's privacy. get low-level access to a user's computer. get access to data such as user credentials. when is a context considered secure? a context is considered secure when it meets certain minimum standards of authentication and confidentiality defined in the secure contexts specification. a particular document is considered to be in a secure context when it is the
active document of a top-level browsing context (basically, a containing window or tab) that is a secure context. for example, even for a document delivered over tls within an <iframe>, its context is not considered secure if it has an ancestor that was not also delivered over tls. however, it’s important to note that if a non-secure context causes a new window to be created (with or without specify...
Transport Layer Security - Web security
rely on client authentication using certificates. some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested. for the privacy of client certificates, the encryption of the tls 1.3 handshake ensures that client certificates are encrypted; however this might require some software changes. re
active client authentication using certificates is supported by tls 1.3 but not widely implemented. alternative mechanisms are in the process of being developed, which will also support http/2. retiring old tls versions to help with working towards a more modern, more secure web, tls 1.0 and 1.1 support will be removed from all major browsers in q1 2020. you'll need to make sure your web server suppor...