Search completed in 1.49 seconds.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
browsers therefore introduced two
modes to treat new standards compliant sites differently from old legacy sites.
... there are now three
modes used by the layout engines in web browsers: quirks
mode, almost standards
mode, and full standards
mode.
... in quirks
mode, layout emulates nonstandard behavior in navigator 4 and internet explorer 5.
...And 18 more matches
Strict mode - JavaScript
sometimes you'll see the default, non-strict
mode referred to as "sloppy
mode".
... javascript's strict
mode, introduced in ecmascript 5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy
mode".
... strict
mode isn't just a subset: it intentionally has different semantics from normal code.
...And 73 more matches
Mozilla Quirks Mode Behavior
the following is a rough list of the differences that exist between mozilla's standards
mode and quirks
mode behavior.
... miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks
mode: orphaned li has an inside bullet (bug 1049).
... in quirks
mode css class and id names are case insensitive.
...And 38 more matches
Supporting private browsing mode - Archive of obsolete content
firefox 3.5 introduced private browsing
mode, in which potentially private information is not recorded.
...when private browsing
mode is enabled, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing
mode is turned off, and the regular databases are re-activated.
...extensions that may record potentially private information may wish to hook into the private browsing service so that they can avoid saving personal information when private browsing
mode is enabled.
...And 30 more matches
WebGL model view projection - Web APIs
it explains the three core matrices that are typically used when composing a 3d scene: the
model, view and projection matrices.
... the
model, view, and projection matrices individual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation.
...these composed matrices ultimately move the original
model data around into a special coordinate space called clip space.
...And 28 more matches
<blend-mode> - CSS: Cascading Style Sheets
the <blend-
mode> css data type describes how colors should appear when elements overlap.
... it is used in the background-blend-
mode and mix-blend-
mode properties.
... syntax the <blend-
mode> data type is defined using a keyword value chosen from the list below.
...And 27 more matches
The box model - Learn web development
in this lesson, we will take a proper look at the css box
model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box
model, what makes up the box
model and how to switch to the alternate
model.
... in the example, you can change display: inline to display: block or display: inline-flex to display: flex to toggle between these display
modes.
...And 24 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in these guides, i have already touched on an important feature of grid layout: the support for different writing
modes that is built into the specification.
... for this guide, we will look at this feature of grid and other
modern layout methods, learning a little about writing
modes and logical vs.
...i have added dir="rtl" to the html element, which switches the writing
mode from the default for an english language document of ltr.
...And 24 more matches
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css 2.1 specification, which details how normal flow behaves, assumes a horizontal writing
mode.
... layout properties should work in the same way in vertical writing
modes.
... in this guide, we look at how flow layout behaves when used with different document writing
modes.
...And 19 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a
model to control the data.
... objective: to learn about handling forms in vue, and by association, events,
models, and methods.
... binding data to inputs with v-
model next up, we need a way to get the value from the form's <input> so we can add the new to-do item to our todoitems data list.
...And 18 more matches
FIPS Mode - an explanation
nss has a "fips
mode" that can be enabled when nss is compiled in a specific way.
... (note: mozilla does not distribute a "fips
mode"-ready nss with firefox.) this page attempts to provide an informal explanation of what it is, who would use it, and why.
... what is "fips
mode"?
...And 14 more matches
Transitioning to strict mode - JavaScript
ecmascript 5 introduced strict
mode which is now implemented in all major browsers (including ie10).
... while making web browsers interpret code as strict is easy (just add 'use strict'; at the top of your source code), transitioning an existing code base to strict
mode requires a bit more work.
... gradual transition strict
mode has been designed so that the transition to it can be made gradually.
...And 11 more matches
writing-mode - SVG: Scalable Vector Graphics
the writing-
mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom.
... the writing-
mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <textpath> sub-elements.
... (note that the inline-progression-direction can change within a <text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-
mode can be used as a css property.
...And 9 more matches
Responsive Design Mode - Firefox Developer Tools
responsive design
mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.
... toggling responsive design
mode there are three ways to toggle responsive design
mode: from the firefox menu: select responsive design
mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... from the developer tools toolbox: press the responsive design
mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos).
...And 8 more matches
XRSessionMode - Web APIs
the webxr device api's xrsession
mode enumerated type defines the string values used to identify the possible kinds of session
mode that can be used.
...the session's environmentblend
mode indicates the method to be used to blend the content together.
... important: the immersive-ar
mode is defined by the webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation.
...And 8 more matches
Gecko's "Almost Standards" Mode
as of mozilla 1.0.1 and 1.1 beta, there is a new rendering
mode referred to as "almost standards"
mode.
... this is added to the long-standing "quirks" and "standards"
modes.
... "almost standards" rendering
mode is exactly the same as "standards"
mode in all details save one, where it works like "quirks"
mode: the height calculations for line boxes and some of the inline elements in them.
...And 7 more matches
IDBTransaction.mode - Web APIs
the
mode read-only property of the idbtransaction interface returns the current
mode for accessing the data in the object stores in the scope of the transaction (i.e.
... is the
mode to be read-only, or do you want to write to the object stores?) the default value is readonly.
... syntax var mycurrent
mode = idbtransaction.
mode; value an idbtransaction
mode object defining the
mode for isolating access to data in the current object stores: value explanation readonly allows data to be read but not changed.
...And 7 more matches
TextTrack.mode - Web APIs
the texttrack interface's
mode property is a string specifying and controlling the text track's
mode: disabled, hidden, or showing.
... you can read this value to determine the current
mode, and you can change this value to switch
modes.
... syntax var
mode = texttrack.
mode; texttrack.
mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current
mode.
...And 7 more matches
ime-mode - CSS: Cascading Style Sheets
the ime-
mode css property controls the state of the input method editor (ime) for text fields.
... /* keyword values */ ime-
mode: auto; ime-
mode: normal; ime-
mode: active; ime-
mode: inactive; ime-
mode: disabled; /* global values */ ime-
mode: inherit; ime-
mode: initial; ime-
mode: unset; the ime-
mode property is only partially and inconsistently implemented in browsers.
... it was introduced by microsoft with internet explorer 5 as a proprietary extension: -ms-ime-
mode attribute | ime
mode property.
...And 7 more matches
XRPermissionDescriptor.mode - Web APIs
the
mode property of the xrpermissiondescriptor dictionary is a string taken from the xrsession
mode enumerated type, specifying which web xr session
mode (inline, immersive-vr, or immersive-ar) the described permissions will be used for.
... syntax xrpermissiondescriptor = {
mode: xrsession
mode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.
mode = xrsession
mode; xr
mode = xrpermissiondescriptor.
mode; value a domstring whose value is one of the strings found in the xrsession
mode enumerated type: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
... the session's environmentblend
mode indicates the method to be used to blend the content together.
...And 6 more matches
mix-blend-mode - CSS: Cascading Style Sheets
the mix-blend-
mode css property sets how an element's content should blend with the content of the element's parent and the element's background.
... 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: luminosity; /* global values */ mix-blend-
mode: initial; mix-blend-
mode: inherit; mix-blend-
mode: unset; values <blend-
mode> the blendi...
...ng
mode that should be applied.
...And 6 more matches
HTMLModElement - Web APIs
the html
modelement interface provides special properties (beyond the regular methods and properties available through the htmlelement interface they also have available to them by inheritance) for manipulating modification elements, that is <del> and <ins>.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
modelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
modelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits prop...
... html
modelement.cite is a domstring reflecting the cite html attribute, containing a uri of a resource explaining the change.
...And 5 more matches
Request.mode - Web APIs
the
mode read-only property of the request interface contains the
mode of the request (e.g., cors, no-cors, same-origin, or navigate.) this is used to determine if cross-origin requests lead to valid responses, and which properties of the response are readable.
... syntax var my
mode = request.
mode; value a request
mode value.
... the associated
mode, available values of which are: same-origin — if a request is made to another origin with this
mode set, the result is simply an error.
...And 5 more matches
XRSession.environmentBlendMode - Web APIs
the xrsession interface's read-only environmentblend
mode property identifies if—and to what degree—the computer-generated imagery is overlaid atop the real world.
... the value is a domstring which contains one of the values defined by the xrenvironmentblend
mode enumerated type.
... important: environmentblend
mode is part of the webxr augmented reality module, which has not yet reached a stable state.
...And 5 more matches
Visual formatting model - CSS: Cascading Style Sheets
in css the visual formatting
model describes how user agents take the document tree, and process and display it for visual media.
... in the visual formatting
model, each element in the document tree generates zero or more boxes according to the box
model.
... much of the information about the visual formatting
model is defined in css2, however, various level 3 specifications have added to this information.
...And 5 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
summary: when in quirks
mode, gecko-based browsers will appear to ignore inheritance of font styles into tables from parent elements.
... find out why this happens and how to fix it in documents that have to remain in quirks
mode.
...this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="text/css"> body, table, td {font-size: 11px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks"
mode.
...And 4 more matches
SourceBuffer.mode - Web APIs
the
mode property of the sourcebuffer interface controls whether media segments can be appended to the sourcebuffer in any order, or in a strict sequence.
... the
mode value is initially set when the sourcebuffer is created using mediasource.addsourcebuffer().
... if you try to set the
mode property value to segments when the initial value is sequence, an exception will be thrown.
...And 4 more matches
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.
... syntax /* keyword values */ writing-
mode: horizontal-tb; writing-
mode: vertical-rl; writing-
mode: vertical-lr; /* global values */ writing-
mode: inherit; writing-
mode: initial; writing-
mode: unset; the writing-
mode property is specified as one of the values listed below.
... formal definition initial valuehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr examples using multiple writing
modes this example demonstrates all of the writing
modes, showing each with text in various languages.
...And 4 more matches
nsIXFormsModelElement
extensions/xforms/nsixforms
modelelement.idlscriptable defines scriptable methods for manipulating instance data and updating computed and displayed values.
... rebuild() signals the xforms processor to rebuild any internal data structures used to track computational dependencies within the given xforms
model.
...recalculate() signals the xforms processor to perform a full recalculation of the given xforms
model.
...And 3 more matches
CSS Typed Object Model API - Web APIs
the css typed object
model api simplifies css property manipulation by exposing css values as typed javascript objects rather than strings.
...css typed object
model api provides interfaces to interact with underlying values, by representing them with specialized js objects that can be manipulated and understood more easily and more reliably than string parsing and concatenation.
... interfaces cssstylevalue the cssstylevalue interface of the the css typed object
model api is the base class of all css values accessible through the typed om api.
...And 3 more matches
MediaTrackConstraints.facingMode - Web APIs
the mediatrackconstraints dictionary's facing
mode property is a constraindomstring describing the requested or mandatory constraints placed upon the value of the facing
mode constrainable property.
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facing
mode as returned by a call to mediadevices.getsupportedconstraints().
... syntax var constraintsobject = { facing
mode: constraint }; constraintsobject.facing
mode = constraint; value an object based on constraindomstring specifying one or more acceptable, ideal, and/or exact (mandatory) facing
modes are acceptable for a video track.
...And 3 more matches
MediaTrackSettings.facingMode - Web APIs
the mediatracksettings dictionary's facing
mode property is a domstring indicating the direction in which the camera producing the video track represented by the mediastreamtrack is currently facing.
... this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.facing
mode property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints().
... if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facing
mode as returned by a call to mediadevices.getsupportedconstraints().
...And 3 more matches
PannerNode.distanceModel - Web APIs
the distance
model property of the pannernode interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... the possible values are: linear: a linear distance
model calculating the gain induced by the distance according to: 1 - rollofffactor * (distance - refdistance) / (maxdistance - refdistance) inverse: an inverse distance
model calculating the gain induced by the distance according to: refdistance / (refdistance + rollofffactor * (math.max(distance, refdistance) - refdistance)) exponential: an exponential distance
model calculating the gain induced by the distance according to: pow((math.max(distance, refdistance) / refdistance, -rollofffactor).
... inverse is the default value of distance
model.
...And 3 more matches
XREnvironmentBlendMode - Web APIs
the webxr api's enumerated type xrenvironmentblend
mode defines strings used to identify if and how to blend the rendered virtual content with the real world.
... its values are used by the xrsession interface's environmentblend
mode property.
... additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending
mode is designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled.
...And 3 more matches
background-blend-mode - CSS: Cascading Style Sheets
the background-blend-
mode css property sets how an element's background images should blend with each other and with the element's background color.
... blending
modes should be defined in the same order as the background-image property.
... if the blending
modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.
...And 3 more matches
Concurrency model and the event loop - JavaScript
javascript has a concurrency
model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
... this
model is quite different from
models in other languages like c and java.
... runtime concepts the following sections explain a theoretical
model.
...And 3 more matches
edgeMode - SVG: Scalable Vector Graphics
the edge
mode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edge
mode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
... fegaussianblur for <fegaussianblur>, edge
mode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
...And 3 more matches
sizemode - Archive of obsolete content
« xul reference home size
mode type: one of the values below the state of the window.
... note: when a window is minimized, the size
mode attribute is not updated.
... this is done so that if a window is closed while minimized, its persisted size
mode attribute wouldn't be minimized.
...And 2 more matches
Test your skills: The Box Model - Learn web development
the aim of this task is to help you check your understanding of the css box
model.
... the box
model one with the two boxes below, one is using the standard box
model, the other the alternate box
model.
... the box
model two in this task, add to the box: a 5px, black, dotted border.
...And 2 more matches
Investigating leaks using DMD heap scan mode
firefox’s dmd heap scan
mode tracks the set of all live blocks of malloc-allocated memory and their allocation stacks, and allows you to log these blocks, and the values stored in them, to a file.
...dmd heap scan
mode is intended to be used to investigate leaks of cycle collected (cced) objects.
... dmd heap scan
mode is a "tool of last resort" that should only be used when all other avenues have been tried and failed, except possibly ref count logging.
...And 2 more matches
nsIXFormsNSModelElement
nsixformsns
modelelement is implemented by all xforms <
model/> elements.
... it defines mozilla extensions to the nsixforms
modelelement interface.
... extensions/xforms/nsixformsns
modelelement.idlscriptable please add a summary to this article.
...And 2 more matches
CSS Object Model (CSSOM) - Web APIs
the css object
model is a set of apis allowing the manipulation of css from javascript.
... css typed object
model cssimagevalue csskeywordvalue cssmathinvert cssmathmax cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssmatrixcomponent cssnumericarray cssnumericvalue cssperspective csspositionvalue cssrotate cssscale cssskew cssskewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssuni...
... css object
model (cssom) view module working draft defined the screen and mediaquerylist interfaces and the mediaquerylistevent event and mediaquerylistlistener event listener.
...And 2 more matches
Document.compatMode - Web APIs
the document.compat
mode property indicates whether the document is rendered in quirks
mode or standards
mode.
... syntax const
mode = document.compat
mode value an enumerated value that can be: "backcompat" if the document is in quirks
mode.
... "css1compat" if the document is in no-quirks (also known as "standards")
mode or limited-quirks (also known as "almost standards")
mode.
...And 2 more matches
Locks.mode - Web APIs
the
mode read-only property of the lock interface returns the access
mode passed to lockmanager.request() when the lock was requested.
... the
mode is either "exclusive" (the default) or "shared".
... syntax var
mode = lock.
mode value one of "exclusive" or "shared".
...And 2 more matches
display-mode - CSS: Cascading Style Sheets
the display-
mode css media feature can be used to test the display
mode of an application.
... syntax the display-
mode feature is specified as a keyword value chosen from the list below.
... display
mode description fallback display
mode fullscreen all of the available display area is used and no user agent chrome is shown.
...And 2 more matches
CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box
model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting
model.
... size of a box height width max-height max-width min-height min-width properties controlling the margins of a box margin margin-bottom margin-left margin-right margin-top margin-trim properties controlling the paddings of a box padding padding-bottom padding-left padding-right padding-top other properties visibility guides introduction to the css box
model explains one of the fundamental concept of css: the box
model.
... this
model defines how css lays out elements, including their content, padding, border, and margin areas.
...And 2 more matches
animation-fill-mode - CSS: Cascading Style Sheets
the animation-fill-
mode css property sets how a css animation applies styles to its target before and after its execution.
... syntax /* single animation */ animation-fill-
mode: none; animation-fill-
mode: forwards; animation-fill-
mode: backwards; animation-fill-
mode: both; /* multiple animations */ animation-fill-
mode: none, backwards; animation-fill-
mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing.
... formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <single-animation-fill-
mode>#where <single-animation-fill-
mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-
mode in the following example.
...And 2 more matches
calcMode - SVG: Scalable Vector Graphics
the calc
mode attribute specifies the interpolation
mode for the animation.
... the default
mode is linear, however if the attribute does not support linear interpolation (e.g.
... for strings), the calc
mode attribute is ignored and discrete interpolation is used.
...And 2 more matches
mode - SVG: Scalable Vector Graphics
the
mode attribute defines the blending
mode on the <feblend> filter primitive.
... only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill"
mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill"
mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" ...
...style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-
mode> default value normal animatable yes for a description of the values, see <blend-
mode>.
...And 2 more matches
The Box Model - Archive of obsolete content
« previousnext » in order to master xul, you'll need to have a fairly good understanding of its box
model.
... the xul box
model is a significant improvement over the html layout
model, which is mostly vertical.
...we recommend you play around with it for a while to get an idea of how the basic parts of the box
model work.
...and look into the box
model, css style rules and computed style views.
xbDesignMode.js - Archive of obsolete content
* * the original code is netscape cross browser design
mode code.
... * * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesign
mode a javascript wrapper for browsers that support design
mode */ function xbdesign
mode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() =...
...= "iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.meditordocument = this.miframeelement.contentdocument; this.meditordocument.design
mode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.design
mode = "on"; // ie needs to reget the document element after design
mode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xbdesign
mode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xbde...
...sign
mode.prototype.setcsscreation = function (ausecss){ if (this.meditordocument) this.meditordocument.execcommand("usecss", false, ausecss); else throw "no meditordocument found"; } ...
Block cipher mode of operation - MDN Web Docs Glossary: Definitions of Web-related terms
a block cipher
mode of operation, usually just called a "
mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block size.
...block ciphers are always used with a
mode, which specifies how to securely encrypt messages that are longer than the block size.
... for example, aes is a cipher, while ctr, cbc, and gcm are all
modes.
... using an inappropriate
mode, or using a
mode incorrectly, can completely undermine the security provided by the underlying cipher.
Modem - MDN Web Docs Glossary: Definitions of Web-related terms
a
modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks.
... different kinds are used for different networks: dsl
modems for telephone wires, wifi
modems for short-range wireless radio signals, 3g
modems for cellular data towers, and so on.
...
modems are different from routers, but many companies sell
modems combined with routers.
... learn more general knowledge
modem on wikipedia ...
Test your skills: Writing Modes and Logical Properties - Learn web development
the aim of this task is to help you check your understanding of writing
modes and logical properties.
... task one the box in the example is displayed with a horizontal writing
mode.
... can you add a line of css to change it so it uses a vertical writing
mode with right to left text?
...your post should include: a descriptive title such as "assessment wanted for writing
modes skill test 1".
Page inspector 3-pane mode - Firefox Developer Tools
this article explains how to use the page inspector's 3-pane
mode.
... feature summary from firefox 62 onwards, the page inspector has a new
mode available — 3-pane
mode.
... with the 3-pane
mode enabled, you can observe live changes in css features as you edit the rules applied to the page.
... enabling the 3-pane inspector pre-firefox 62 in earlier versions of firefox (since firefox 59/60), you can enable 3 pane
mode in release/beta by going to about:config and flipping the following prefs to true: devtools.inspector.split-rule-enabled — this switches 3-pane
mode on and off.
AudioNode.channelCountMode - Web APIs
the channelcount
mode property of the audionode interface represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
... the possible values of channelcount
mode and their meanings are: value description the following audionode children default to this value max the number of channels is equal to the maximum number of channels of all connections.
... syntax var oscillator = audioctx.createoscillator(); oscillator.channelcount
mode = 'explicit'; value a enumerated value representing a channelcount
mode.
... example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelcount
mode = 'explicit'; specifications specification status comment web audio apithe definition of 'channelcount
mode' in that specification.
Using the CSS Typed Object Model - Web APIs
the css typed object
model api exposes css values as typed javascript objects to allow their performant manipulation.
... converting css object
model value strings into meaningfully-typed javascript representations and back (via htmlelement.style) can incur a significant performance overhead.
... the css typed om makes css manipulation more logical and performant by providing object features (rather than cssom string manipulation), providing access to types, methods, and an object
model for css values.
...for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or one of each: let position = new csspositionvalue( new csskeywordvalue("center"), new cssunitvalue(10, "px")); cssstylevalue the cssstylevalue interface of the the css typed object
model api is the base class of all css values accessible through the typed om api, including cssimagevalue, csskeywordvalue, cssnumericvalue, csspositionvalue, csstransformvalue, and cssunparsedvalue.
msStereo3DRenderMode - Web APIs
msstereo3drender
mode is a read/write property which gets or sets whether the system display is set to stereo display (if stereo-capable).
... syntax htmlvideoelement.msstereo3drender
mode(mono, stereo); value the following values set the stereo display to mono or stereo.
... mono (0): specifies that stereo
mode is disabled.
... stereo (1): specifies stereo
mode is enabled.
PannerNode.panningModel - Web APIs
the panning
model property of the pannernode interface is an enumerated value determining which spatialisation algorithm to use to position the audio in 3d space.
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; value a enum — see panning
modeltype.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
... specifications specification status comment web audio apithe definition of 'panning
model' in that specification.
PhotoCapabilities.fillLightMode - Web APIs
the filllight
mode read-only property of the photocapabilities interface returns all available fill light options of the source device.
... syntax const light
modes = photocapabilities.filllight
mode value an array of available fill light
modes.
... specifications specification status comment mediastream image capturethe definition of 'filllight
mode' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilllight
mode experimentalchrome full support 59edge full support ≤79firefox ?
ShadowRoot.mode - Web APIs
the
mode property of the shadowroot specifies its
mode — either open or closed.
... when the
mode of a shadow root is "closed", the shadow root’s implementation internals are inaccessible and unchangeable from javascript—in the same way the implementation internals of, for example, the <video> element are inaccessible and unchangeable from javascript.
... syntax var
mode = shadowroot.
mode value a value defined in the shadowroot
mode enum — either open or closed.
... shadow.
mode = 'closed'; } specifications specification status comment domthe definition of 'shadowroot.
mode' in that specification.
XRInputSource.targetRayMode - Web APIs
the read-only xrinputsource property targetray
mode indicates the method by which the target ray for the input source should be generated and how it should be presented to the user.
... syntax let ray
mode = xrinputsource.targetray
mode; value a domstring taken from the xrtargetray
mode enumerated type, indicating which method to use when generating and presenting the target ray to the user.
... for each such input, this example looks for inputs whose targetray
mode is tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click.
... function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetray
mode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
XRTargetRayMode - Web APIs
the webxr device api enumerated type xrtargetray
mode describes the method by an input controller's targeting ray is being produced.
... for each such input, this example looks for inputs whose targetray
mode is tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click.
... function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); if (targetraypose) { if (source.targetray
mode == "tracked-pointer") { myrendertargetrayasbeam(targetraypose); } } /* ...
... specifications specification status comment webxr device apithe definition of 'xrtargetray
mode' in that specification.
mask-mode - CSS: Cascading Style Sheets
the mask-
mode css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
... /* keyword values */ mask-
mode: alpha; mask-
mode: luminance; mask-
mode: match-source; /* multiple values */ mask-
mode: alpha, match-source; /* global values */ mask-
mode: inherit; mask-
mode: initial; mask-
mode: unset; syntax the mask-
mode property is specified as one or more of the keyword values listed below, separated by commas.
... formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-
mode>#where <masking-
mode> = alpha | luminance | match-source examples using alpha mask
mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-
mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="mask
mode"> <option value="alpha">al...
...pha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var mask
mode = document.getelementbyid("mask
mode"); mask
mode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.mask
mode = evt.target.value; }); result specifications specification status comment css masking module level 1the definition of 'mask-
mode' in that specification.
New Security Model for Web Services - Archive of obsolete content
using a soap header for verification soap messages have a distinct processing
model allowing a header to be added that the recipient is required to understand and accept, which identifies the untrusted source of a script making a request.
... adjustments as this new
model is applied to soap, and potentially document.load or xml-request, it may be desirable to eliminate the same source security bypass, because it is not clear that this is always secure.
... please send me some feedback on this proposal see also mozilla web services security
model - documentation of what is currently implemented ...
Box Model Details - Archive of obsolete content
« previousnext » we've seen a lot of features of the box
model.
...example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box
model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible.
...the box
model may be difficult to understand without trying various various things out for yourself.
CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the css object
model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship.
... the cssom is very similar to the document object
model (dom).
... cssom api the css object
model is also a set of apis allowing the manipulation of css from javascript.
Sloppy mode - MDN Web Docs Glossary: Definitions of Web-related terms
ecmascript 5 and later let scripts opt in to a new strict
mode, which alters the semantics of javascript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.
... the normal, non-strict
mode of javascript is sometimes referred to as sloppy
mode.
... learn more general knowledge "strict
mode" in chapter 7 ("javascript syntax") in the book speaking javascript.
Strict mode - MDN Web Docs Glossary: Definitions of Web-related terms
javascript's strict
mode is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy
mode".
... strict
mode isn't just a subset: it intentionally has different semantics from normal code.
... strict
mode for an entire script is invoked by including the statement "use strict"; before any other statements.
Document.designMode - Web APIs
document.design
mode controls whether the entire document is editable.
... syntax var
mode = document.design
mode; document.design
mode = value; value a string indicating whether design
mode is (or should be) set to on or off.
... example make an <iframe>'s document editable: iframenode.contentdocument.design
mode = "on"; specifications specification status comment html living standardthe definition of 'design
mode' in that specification.
Document Object Model (DOM) - Web APIs
the document object
model (dom) connects web pages to scripts or programming languages by representing the structure of a document—such as the html representing a web page—in memory.
... usually, that means javascript, although
modeling html, svg, or xml documents as objects are not part of the core javascript language, as such.
...mtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textencoder timeranges treewalker url window worker xmldocument obsolete dom interfaces the document object
model has been highly simplified.
MSSiteModeEvent - Web APIs
mssite
modeevent provides event properties that are specific to pinned site events.
... dom information inheritance hierarchy event mssite
modeevent methods method description initevent initializes a new generic event that the createevent method created.
... example interface mssite
modeevent extends event { buttonid: number; actionurl: string; } declare var mssite
modeevent: { prototype: mssite
modeevent; new(): mssite
modeevent; } see also microsoft api extensions ...
MediaTrackSupportedConstraints.facingMode - Web APIs
the mediatracksupportedconstraints dictionary's facing
mode property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the facing
mode constraint.
... syntax facing
modeconstraintsupported = supportedconstraintsdictionary.facing
mode; value this property is present in the dictionary (and its value is always true) if the user agent supports the facing
mode constraint.
... example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().facing
mode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'facing
mode' in that specification.
mssitemodejumplistitemremoved - Web APIs
the mssite
modejumplistitemremoved event occurs when mssite
modeshowjumplist is called and an item has been removed from a jump list by the user.
... syntax event property object.oncandidatewindowhide = handler; addeventlistener method object.addeventlistener("mssite
modejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssite
modeshowjumplist was called.
... this event is not triggered if mssite
modeclearjumplist has been called.
Layout mode - CSS: Cascading Style Sheets
a css layout
mode, sometimes simply called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes.
... note: not all css properties apply to all layout
modes.
... most of them apply to one or two of them and have no effect if they are set on an element participating in another layout
mode.
mask-border-mode - CSS: Cascading Style Sheets
the mask-border-
mode css property specifies the blending
mode used in a mask border.
... syntax /* keyword values */ mask-border-
mode: luminance; mask-border-
mode: alpha; /* global values */ mask-border-
mode: inherit; mask-border-
mode: initial; mask-border-
mode: unset; values luminance the luminance values of the mask border image are used as the mask values.
...when browsers support it, it will specify the type of blending
mode used for the mask border — luminance or alpha: mask-border-
mode: luminance; mask-border-
mode: alpha; specifications specification status comment css masking module level 1the definition of 'mask-border-
mode' in that specification.
Details of the object model - JavaScript
javascript follows a similar
model, but does not have a class definition separate from the constructor.
...the class syntax does not introduce a new object-oriented inheritance
model to javascript.
... inheritance
model inherit properties by following the class chain.
Document Object Model - Archive of obsolete content
« previousnext » the document object
model (dom) can be used with xul elements to get information about them or modify them.
... dom introduction the document object
model (dom) is used to store the tree of xul nodes.
FIPS mode of operation
fc_createobject fc_copyobject fc_destroyobject fc_getobjectsize fc_getattributevalue fc_setattributevalue fc_findobjectsinit fc_findobjects fc_findobjectsfinal encryption functions these functions support triple des and aes in ecb and cbc
modes.
... fc_encryptinit fc_encrypt fc_encryptupdate fc_encryptfinal decryption functions these functions support triple des and aes in ecb and cbc
modes.
Examine and edit the box model - Firefox Developer Tools
viewing the box
model with the select element button pressed, if you hover over an element in the page, the box
model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element: the box
model view when an element's selected, you can get a detailed look at the box
model in the box
model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box
model in the box
model view, the corresponding part of the page is highlighted: editing the box
model you can also edit the values in the box...
...
model view, and see the results immediately in the page: ...
msStereo3DPackingMode - Web APIs
msstereo3dpacking
mode is a read/write property which gets or sets the frame-packing
mode for stereo 3-d video content.
... syntax htmlvideoelement.msstereo3dpacking
mode(topbottom, sidebyside, none); value the following values return, or set, the stereo 3-d content packing as "topbottom", "sidebyside", or "none" for regular 2-d video.
LockedFile.mode - Web APIs
summary the
mode property provides the read/write status of the lockedfile file.
... syntax var
mode = instanceoflockedfile.
mode value a string, one of readonly or readwrite.
WheelEvent.deltaMode - Web APIs
the wheelevent.delta
mode read-only property returns an unsigned long representing the unit of the delta values scroll amount.
... syntax var unit = event.delta
mode; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "delta
mode": 0}); console.log(syntheticevent.delta
mode); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'wheelevent.delta
mode' in that specification.
CSS Writing Modes - CSS: Cascading Style Sheets
css writing
modes is a css module that defines various international writing
modes, such as left-to-right (e.g.
... reference properties direction glyph-orientation-horizontal text-combine-upright text-orientation unicode-bidi writing-
mode specifications specification status comment css writing
modes module level 3 proposed recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
inputmode - HTML: Hypertext Markup Language
the input
mode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
... specifications specification status comment html living standardthe definition of 'input
mode' in that specification.
Sec-Fetch-Mode - HTTP
the sec-fetch-
mode fetch metadata header indicates the request's
mode.
... header type fetch metadata request header forbidden header name yes, since it has prefix sec- cors-safelisted request header syntax sec-fetch-
mode: cors sec-fetch-
mode: navigate sec-fetch-
mode: nested-navigate sec-fetch-
mode: no-cors sec-fetch-
mode: same-origin sec-fetch-
mode: websocket values cors navigate nested-navigate no-cors same-origin websocket examples todo specifications specification title fetch metadata request headers the sec-fetch-
mode http request header ...
Mozilla Web Services Security Model
in the root directory of the server: <webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"> <delegate/> <allow type="none"/> </webscriptaccess> and in the services directory: <webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"> <allow type="soapv"/> <allow type="soap"/> </webscriptaccess> good examples (needed.) references new security
model for web services, the original proposal for the web-scripts-access.xml file format web services roadmap, documenting when web services features, including the security
model, were first supported additional reading documentation of crossdomain.xml, a similar format used by macromedia flash player ...
Index - Web APIs
158 audionode.channelcount
mode api, audionode, property, reference, web audio api, channelcount
mode the possible values of channelcount
mode and their meanings are: 159 audionode.channelinterpretation api, audionode, property, reference, web audio api, channelinterpretation when the number of channels doesn't match between an input and an output, up- or down-mixing happens according the following ...
... 393 css object
model (cssom) api, cssom, overview, reference the css object
model is a set of apis allowing the manipulation of css from javascript.
... 396 using dynamic styling information api, beginner, cssom, guide, needsbeginnerupdate the css object
model (cssom), part of the dom, exposes specific interfaces allowing manipulation of a wide amount of information regarding css.
...And 160 more matches
Key Values - Web APIs
gdk_key_
mode_switch (0xff7e) gdk_key_iso_level3_shift (0xfe03) gdk_key_iso_level3_latch (0xfe04) gdk_key_iso_level3_lock (0xfe05) gdk_key_iso_level5_shift (0xfe11) gdk_key_iso_level5_latch (0xfe12) gdk_key_iso_level5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_
mode_switch (0x0100117e) "capslock" the caps lock key.
... kvk_function (0x3f) keycode_function (119) "fnlock" the fnlock or f-lock (function lock) key.toggles the function key
mode described by "fn" on and off.
...toggles the numeric keypad between number entry some other
mode (often directional arrows).
...And 47 more matches
Index - Archive of obsolete content
289 the box
model no summary!
... 359 file object file, javascript, non-standard, spidermonkey non-standard server-side object 360 open opens the file, specifying file
mode and type.
...these layout
modes are referred to as 'standards' and 'navquirks'
modes.
...And 45 more matches
Handling different text directions - Learn web development
in recent years however, css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing
modes.
... as you progress in your study and begin to work with layout, an understanding of writing
modes will be very helpful to you, therefore we will introduce them now.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the importance of writing
modes to
modern css.
...And 36 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object
model (aom), contains accessibility-related information for most html elements.
...this is defined by the layout
mode; it is usually the alignment subject’s containing block, and assumes the writing
mode of the box establishing the containing block.
...underneath the preceding element in a horizontal writing
mode, and above the following element (commonly known as a block-level element).
...And 32 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
in this article, i will describe mozilla's quirks
mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers.
...they include: html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object
model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though w...
...
modern browsers will use the title attribute to display tooltips, and mozilla only supports showing tooltips for that attribute and not the alt attribute.
...And 30 more matches
Fullscreen API - Web APIs
the fullscreen api adds methods to present a specific element (and its descendants) in full-screen
mode, and to exit full-screen
mode once it is no longer needed.
... this makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen
mode is shut off.
... methods the fullscreen api adds methods to the document and element interfaces to allow turning off and on full-screen
mode.
...And 29 more matches
Implementing feature detection - Learn web development
modernizr is the industry standard for feature detection tests, and we'll look at that later on.
... when you save everything and try out your example, you should see the flexbox layout applied to the page if the browser supports
modern flexbox, and the float layout if not.
...the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably back to ie8 or 9, although older versions of ie will have additional problems, such as not supporting document.queryselector, and having a messed up box
model).
...And 25 more matches
Streams - Plugins
the plug-in instance selects a transmission
mode for streams produced by the browser.
... normal
mode: the browser uses the npp_write method to "push" stream data to the instance incrementally as it is available.
... random-access
mode: the plug-in calls the npn_requestread method to "pull" stream data.
...And 24 more matches
DMD
it has four
modes.
... "dark matter"
mode.
... in this
mode, dmd tracks the contents of the heap, including which heap blocks have been reported by memory reporters.
...And 23 more matches
Mozilla Web Developer FAQ
what are the quirks
mode and the standards
mode?
... gecko has two and a half layout
modes: quirks, almost standards and standards.
... in the standards
mode gecko aims to treat documents authored in compliance with the applicable web format specifications.
...And 21 more matches
Index - Learn web development
in this article, we'll just set you up with a bare minimum — a text editor and some
modern web browsers.
...next up, we'll look at manipulating documents with the document object
model (dom).
... 61 manipulating documents api, article, beginner, codingscripting, dom, document, document object
model, javascript, learn, navigator, webapi, window we have reached the end of our study of document and dom manipulation.
...And 19 more matches
IME handling guide
if ime is enabled but users use direct input
mode (e.g., for inputting latin characters), we call it "ime is closed".
... mselection::mwriting
mode writing
mode at selection start.
... how do mozilla::textcomposition and mozilla::imestatemanager work in e10s
mode?
...And 18 more matches
nsIScriptableIO
s: var scriptableio = components.classes["@mozilla.org/io/scriptable-io;1"] .getservice(); scriptableio.getfile("profile", "cookies.txt"); method overview nsifile getfile(in astring alocation, in astring afilename); nsifile getfilewithpath(in astring afilepath); nsisupports newinputstream(in nsivariant abase, in astring a
mode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize); nsisupports newoutputstream(in nsivariant abase, in astring a
mode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize, [optional] in unsigned long apermissions); nsiuri newuri(in nsivariant auri); ...
... nsisupports newinputstream( in nsivariant abase, in astring a
mode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize ); parameters abase the base object from which to read.
... a
mode a space-delineated string of
mode terms controlling the manner in which the stream is accessed.
...And 18 more matches
Index
alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database
mode.
... 11 fips
mode - an explanation nss nss has a "fips
mode" that can be enabled when nss is compiled in a specific way.
... (note: mozilla does not distribute a "fips
mode"-ready nss with firefox.) this page attempts to provide an informal explanation of what it is, who would use it, and why.
...And 17 more matches
Guide to the Fullscreen API - Web APIs
this article demonstrates how to use the fullscreen api to place a given element into full-screen
mode, as well as how to detect when the browser enters or exits full-screen
mode.
... activating full-screen
mode given an element that you'd like to present in full-screen
mode (such as a <video>, for example), you can present it in full-screen
mode by simply calling its requestfullscreen() method.
... let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen
mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
...And 17 more matches
Rich-Text Editing in Mozilla - Developer guides
mozilla 1.3 introduces an implementation of microsoft® internet explorer's design
mode feature.
... the rich-text editing support in mozilla 1.3 supports the design
mode feature which turns html documents into rich-text editors.
... setting up rich-text editing rich-text editing is initialized by setting the design
mode property of a document to "on", such as the document inside an iframe.
...And 17 more matches
Gecko Compatibility Handbook - Archive of obsolete content
internet explorer implements the box
model (padding, margins, borders) incorrectly.
...(more about css) content differs in gecko browsers and internet explorer incorrect layout
mode specified by doctype.
... if pages should be displayed by legacy browsers such as netscape navigator 4 or internet explorer 4 and 5, be sure to specify quirks
mode layout via the doctype.
...And 16 more matches
OS.File for the main thread
textencoder().encode(txttoappend); valopen.write(txtencoded).then(valwrite => { console.log('valwrite:', valwrite); valopen.close().then(valclose => { console.log('valclose:', valclose); console.log('successfully appended'); }); }); }); global object os.file method overview promise<file> open(in string path, [optional] in object
mode, [optional] in object options); promise<object> openunique(in string path, [optional] in object options); promise<void> copy(in string sourcepath, in string destpath, [optional] in object options); promise<bool> exists(in string path); promise<string> getcurrentdirectory(); promise<void> makedir(in string path, [optional] in object options); p...
... promise<file> open( in string path, [optional] in object
mode, [optional] in object options ) arguments path the full native name of the file to open.
...
modeoptional the opening
mode for the file, as an object that may contain a subset of the following fields: read if true, the file will be opened for reading.
...And 16 more matches
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-
mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" dat...
... 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-
mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-l...
...0px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-
mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-
mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-top...
...And 15 more matches
Layout System Overview - Archive of obsolete content
these layout
modes are referred to as 'standards' and 'navquirks'
modes.
... (doctype and
modes are explained in more detail in article mozilla's doctype sniffing.
...this is referred to as the galley
mode presentation, and is what one expects from a typical browser.
...And 14 more matches
Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting
modern javascript features working in older browsers, and more.
... things have improved significantly since then;
modern browsers do a good job of supporting "classic javascript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether).
... when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features,
modern web apis...) in their code, and find that such features don't work in older browsers.
...And 14 more matches
source-editor.jsm
); boolean hasfocus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number getlinecount(); number getlineend(number alineindex, boolean aincludedelimiter); number getlinestart(number alineindex); string get
mode(); string gettext([optional] number astart, [optional] number aend); string getselectedtext(); void set
mode(string a
mode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); ...
... editor
mode constants these constants are used to set the syntax highlighting
mode for the editor by calling its set
mode() method, or in the configuration object when first initializing the editor using its init() method.
... constant value description sourceeditor.
modes.css "css" cascading style sheet.
...And 14 more matches
Connection management in HTTP/1.x - HTTP
in http/1.x, there are several
models: short-lived connections, persistent connections, and http pipelining.
...in its infancy, http used a single
model to handle such connections.
... this simple
model held an innate limitation on performance: opening each tcp connection is a resource-consuming operation.
...And 14 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
this document describes how mozilla uses the doctype declaration to determine strict
mode vs.
... quirks
mode.
... the code that makes this determination is currently in determineparse
mode() in nsparser.cpp.
...And 13 more matches
CustomizableUI.jsm
this is handled by customize
mode.jsm, which interacts with customizableui through a listener mechanism.
... onwidgetdrag(awidgetid, aarea) fired both when and after customize
mode drag handling system tries to determine the width and height of widget awidgetid when dragged to a different area.
... oncustomizestart(awindow) fired when opening customize
mode in awindow.
...And 13 more matches
ARIA Test Cases - Accessibility
markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc
mode, pass in v-pc-
mode also if the button's text is not provided via labelledby or label.
... at should indicate that it is a toggle button (not a regular button) markup used: role="button" aria-pressed="false" (or true) notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass in non-v-pc-
mode, button's state is announced when pressed, or when toggling it to pressed.
... fail in v pc
mode.
...And 13 more matches
Web video codec guide - Web media technologies
level; theoretical maximum reaches 800 mbps at level 6.3[2] supported frame rates varies by level; for example, level 2.0 has a maximum of 30 fps while level 6.3 can reach 120 fps compression lossy dct-based algorithm supported frame sizes 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these supported color
modes profile color depths chroma subsampling main 8 or 10 4:0:0 (greyscale) or 4:2:0 high 8 or 10 4:0:0 (greyscale), 4:2:0, or 4:4:4 professional 8, 10, or 12 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 hdr support...
... supported bit rates varies by level supported frame rates varies by level; up to 300 fps is possible compression lossy dct-based algorithm, though it's possible to create lossless macroblocks within the image supported frame sizes up to 8,192 x 4,320 pixels supported color
modes some of the more common or interesting profiles: profile color depths chroma subsampling constrained baseline (cbp) 8 4:2:0 baseline (bp) 8 4:2:0 extended (xp) 8 4:2:0 main (mp) 8 4:2:0 hig...
... supported bit rates unrestricted, but typically below 64 kbps supported frame rates any compression lossy dct-based algorithm supported frame sizes up to 1408 x 1152 pixels[2] supported color
modes ycbcr; each picture format (sub-qcif, qcif, cif, 4cif, or 16cif) defines the frame size in pixels as well as how many rows each of luminance and chrominance samples are used for each frame hdr support no variable frame rate (vfr) support no browser compatibility feature chrome edge firefox internet expl...
...And 13 more matches
display - CSS: Cascading Style Sheets
some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box
model specification.
... flex the element behaves like a block element and lays out its content according to the flexbox
model.
... grid the element behaves like a block element and lays out its content according to the grid
model.
...And 12 more matches
Image file type and format guide - Web media technologies
mime type image/apng file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome 59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,147,483,647×2,147,483,647 pixels supported color
modes color
mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
...ecification; however, microsoft provides general documentation of the format at docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari maximum dimensions either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version supported color
modes color
mode bits per component (d) description greyscale 1 each bit represents a single pixel, which can be either black or white.
...typically,
modern content should use png for lossless and indexed still images, and should consider using apng for lossless animation sequences.
...And 12 more matches
io/file - Archive of obsolete content
open(path,
mode) returns a stream providing access to the contents of a file.
...
mode : string an optional string, each character of which describes a characteristic of the returned stream.
... if the string contains "r", the file is opened in read-only
mode.
...And 11 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
have a look to the more current article writing forward-compatible websites to find
modern informations.
... we are still faced with the question of how to develop standards based content while supporting the differing implementations of
modern browsers while at the same time supporting (to a lesser degree) older and less capable browsers.
...this is a technique where these browsers can be switched from "quirks"
mode (which emulates buggy implementations in earlier generation browsers) to standards
mode (which more strictly adhers to the standards).
...And 11 more matches
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
mvc (
model-view-controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic.
...some other design patterns are based on mvc, such as mvvm (
model-view-view
model), mvp (
model-view-presenter), and mvw (
model-view-whatever).
... the three parts of the mvc software-design pattern can be described as follows:
model: manages data and business logic.
...And 11 more matches
Advanced styling effects - Learn web development
this article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend
modes, and filters.
... prerequisites: html basics (study introduction to html) and an idea of how css works (study css first steps.) objective: to get an idea about how to use some of the advanced styling effects available in
modern browsers.
... blend
modes css blend
modes allow us to add blend
modes to elements that specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it.
...And 11 more matches
Server-side web frameworks - Learn web development
for example, the django web framework provides an orm, and refers to the object used to define the structure of a record as the
model.
... the
model specifies the field types to be stored, which may provide field-level validation on what information can be stored (e.g.
...the
model doesn't state any information about the underlying database as that is a configuration setting that may be changed separately of our code.
...And 11 more matches
Componentizing our Svelte app - Learn web development
one the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development
mode.
...we'll have to include an editing
mode in the todo component.
... when entering editing
mode we'll show an <input> field to allow us to edit the current todo name, with two buttons to confirm or cancel our changes.
...And 11 more matches
L10n Checks
the easiest way is to just run: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ sudo python setup.py install or, if you're on windows: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ python setup.py install running it mercurial source (source)
mode l10n checks gathers the directories to compare from an ini file, usually found in $app/locales/l10n.ini.
...if you want to test the localization for de, run: check-l10n-completeness browser/locales/l10n.ini ../l10n/ de add-ons (xpi)
mode l10n checks gathers the locales to compare from the chrome.manifest file inside the xpi file.
...if you want to test the localization for de, run: check-l10n-completeness -i xpi my-extension.xpi de to check all locales in an extension: check-l10n-completeness -i xpi my-extension.xpi language packs (xpis)
mode l10n checks can compare two locales found in different xpi files.
...And 11 more matches
Nonblocking IO In NSPR
the blocking io
model encourages the use of multiple threads as a programming
model.
...in the nonblocking io
model, a file descriptor may be marked as nonblocking.
...(note: <tt>pr_poll()</tt> also works with blocking file descriptors, although it is less useful in the blocking io
model.) when <tt>pr_poll()</tt> reports that a file descriptor is ready for some io operation, the central thread invokes that io function on the file descriptor.
...And 11 more matches
Tracing JIT
if it finds such a fragment, it transitions to executing
mode.
... otherwise it transitions to recording
mode.
... recording when the trace monitor enters recording
mode, it constructs a new trace recorder, of type tracerecorder.
...And 11 more matches
Using IndexedDB - Web APIs
also, indexeddb storage in browsers' privacy
modes only lasts in-memory until the incognito session is closed (private browsing
mode for firefox and incognito
mode for chrome, but in firefox this is not implemented yet as of april 2020 so you can't use indexeddb in firefox private browsing at all).
...transactions have three available
modes: readonly, readwrite, and versionchange.
... to change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange
mode.
...And 11 more matches
Index - Archive of obsolete content
198
mode no summary!
... 301 progressmeter.
mode xul attributes, xul reference no summary!
... 337 size
mode xul attributes, xul reference this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g.
...And 10 more matches
CSS property compatibility table for form controls - Learn web development
property n t note css box
model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... property n t note css box
model width yes yes height partial[1] yes this property is not applied on webkit based browsers on mac osx or ios.
... property n t note css box
model width yes yes height partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field.
...And 10 more matches
Fonts for Mozilla's MathML engine
installation instructions windows install the latin
modern math and stix fonts as follows: download latin
modern-math-1959.zip.
... open the zip archive, move inside the latin
modern-math-1959 directory and then inside the otf directory.
... you will find a latin
modern-math font file.
...And 10 more matches
XRSystem: requestSession() - Web APIs
syntax var sessionpromise = xr.requestsession(session
mode, sessioninit) parameters session
mode a domstring whose value is one of those included in the xrsession
mode enum.
... the supported
modes are: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
... the session's environmentblend
mode indicates the method to be used to blend the content together.
...And 10 more matches
Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross platform component object
model, similar to microsoft com.
...xpcom is mozilla’s cross platform component object
model, similar to microsoft’s com technology.
...the book is presented as a tutorial about creating xpcom components, but it covers all major aspects, concepts, and terminology of the xpcom component
model along the way.
...And 9 more matches
nsIFilePicker
to create an instance, use: var filepicker = components.classes["@mozilla.org/filepicker;1"] .createinstance(components.interfaces.nsifilepicker); method overview void appendfilter(in astring title, in astring filter); void appendfilters(in long filtermask); void init(in nsidomwindow parent, in astring title, in short
mode); void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's p...
...this attribute has no effect if private browsing
mode is in effect.
... note: only works with
modeopenmultiple
mode.
...And 9 more matches
Mail composition back end
the
mode of delivery can also be specified for the "send later", "drafts" and "templates" operations.
... (it's a minor difference.) prbool dont_deliver_p, - if "dont_deliver_p" is false, then we actually deliver the message to the smtp and/or nntp server nsmsgdeliver
mode mode, -
mode is the delivery
mode.
... this can be set for the various
modes of delivery.
...And 9 more matches
The JavaScript input interpreter - Firefox Developer Tools
it has two
modes: single-line entry and multi-line entry.
... single-line
mode for single-line entry, you can type javascript expressions in the field at the bottom of the console log, at the >> prompt.
... to enter expressions in single-line
mode, type at the prompt and press enter.
...And 9 more matches
Document - Web APIs
document.compat
mode read only indicates whether the document is rendered in quirks or strict
mode.
... document.design
mode gets/sets the ability to edit the whole document.
... document.fullscreenelementread only the element that's currently in full screen
mode for this document.
...And 9 more matches
Element.requestFullscreen() - Web APIs
the element.requestfullscreen() method issues an asynchronous request to make the element be displayed in full-screen
mode.
... it's not guaranteed that the element will be put into full screen
mode.
... if permission to enter full screen
mode is granted, the returned promise will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen
mode.
...And 9 more matches
Inputs and input sources - Web APIs
targeting ray
mode the targeting ray
mode is a string found in the targetray
mode property.
... when the targeting ray
mode is gaze, the ray's origin is at the viewer and simply aims in the direction the user is facing.
... more flexible is the tracked-pointer
mode, in which the ray's origin is at a handheld controller or hand tracking system's origin and extends outward in the direction in which the controller is pointing.
...And 9 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
these properties apply only to flex layout until css box alignment level 3 is finished and defines their effect for other layout
modes.
... writing
modes in the basic concepts of flexbox article, i explained that flexbox is writing
mode aware.
... writing
modes are fully detailed in the css writing
modes specification, which details how css supports the various different writing
modes that exist internationally.
...And 9 more matches
Block and inline layout in normal flow - CSS: Cascading Style Sheets
the rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2 note that the css 2.1 specification describes documents as being in a horizontal, top to bottom writing
mode.
...the behavior on block and inline elements is the same when working in a vertical writing
mode, and we will explore this in a future guide on flow layout and writing
modes.
... elements participating in a block formatting context block elements in a horizontal writing
mode such as english, layout vertically, one below the other.
...And 9 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-
mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-l...
...0px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-
mode='hsl'] .input[data-topic="value"] { display: none; } .ui-color-picker[data-
mode='hsl'] .input[data-topic="lightness"] { display: block; } .ui-color-picker .input[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker .input[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .input[data-topic="alpha"] > input { float: right; } .ui-color-picker .input[data-top...
...ackground-image: url("images/alpha.png"); float: left; position: relative; } .ui-color-picker .preview:before { height: 100%; width: 50%; left: 50%; top: 0; content: ""; background: #fff; position: absolute; z-index: 1; } .ui-color-picker .preview-color { width: 100%; height: 100%; background-color: rgba(255, 0, 0, 0.5); position: absolute; z-index: 1; } .ui-color-picker .switch_
mode { width: 10px; height: 20px; position: relative; border-radius: 5px 0 0 5px; border: 1px solid #ddd; background-color: #eee; left: -12px; top: -1px; z-index: 1; transition: all 0.5s; } .ui-color-picker .switch_
mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz...
...And 9 more matches
SVG documentation index - SVG: Scalable Vector Graphics
1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg
modern browsers support using svg within css styles to apply graphical effects to html content.
... 37 calc
mode needscompattable, needsexample, svg, svg attribute the calc
mode attribute specifies the interpolation
mode for the animation.
... 57 diffuseconstant filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting
model.
...And 9 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
however, these techniques may be relevant when the developer cannot assume that users have a
modern browser, such as for html-based e-mail messages.
...all it takes is a
modern browser and the right doctype, and kaboom!
... now let's see what that same simple table looks like in a
modern browser when the page has a strict doctype.
...And 8 more matches
Proxy UI - Archive of obsolete content
camino configured in os (networking preferences) (recently added - some support for reading os and account settings.)ui elements preferences panel overview the ui is based on selecting a proxy
mode, then filling out any additional needed information in "related" ui.
...the preference changes selecting the proxy "
mode" all product's proxy preference panels share a basic design: a radio button that selects the proxy
mode, then "related proxy
mode" ui when needed.
... for the purposes of this document, "proxy
mode" means both: whatever was selected in the ui (as opposed to the value of the network.proxy.type.
...And 8 more matches
HTML forms in legacy browsers - Learn web development
when you build something for a
modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation.
...while resolved in all
modern browsers, it is still recommended to always set the type attribute on <button> elements.
... the
modernizr library there are many cases where a good "polyfill" can help a lot by providing a missing api.
...And 8 more matches
Routing in Ember - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
...add the following below the existing getters: get completed() { return this.todos.filter(todo => todo.iscompleted); }
models now we need to add
models to our route javascript files to allow us to easily return specific data sets to display in those
models.
...
model is a data loading lifecycle hook.
...And 8 more matches
Gecko info for Windows accessibility vendors
it supports html, xhtml, cascading style sheets (css) and the document object
model (dom).
... dom: document object
model this is the w3c's specification for how web content is exposed to javascript and other languages.
...contains more desktop-style widgets than html and follows a box layout
model, rather than being text-flow based.
...And 8 more matches
Element: fullscreenchange event - Web APIs
the fullscreenchange event is fired immediately after an element switches into or out of full-screen
mode.
... bubbles yes cancelable no interface event event handler property onfullscreenchange this event is sent to the element which is transitioning into or out of full-screen
mode.
... if the user clicks on the "toggle fullscreen
mode" button, the click handler will toggle full-screen
mode for the div.
...And 8 more matches
SubtleCrypto.encrypt() - Web APIs
the difference between them is the
mode.
... the web crypto api supports three different aes
modes: ctr (counter
mode) cbc (cipher block chaining) gcm (galois/counter
mode) it's strongly recommended to use authenticated encryption, which includes checks that the ciphertext has not been modified by an attacker.
...while it's possible to add authentication to ctr and cbc
modes, they do not provide it by default and when implementing it manually one can easily make minor, but serious mistakes.
...And 8 more matches
Fundamentals of WebXR - Web APIs
this is an important fact to keep in mind; while webxr manages the timing, scheduling, and the various points of view relevant when drawing the scene, it does not actually know how to load and manage
models, render and texture them, and so forth.
... field of view the term field of view (fov) is one which applies to any visual technology, from old film cameras to
modern digital video cameras, including the cameras in computers and mobile devices.
... webxr session
modes webxr offers support for both augmented reality (ar) and virtual reality (vr) sessions, using the same api.
...And 8 more matches
max-block-size - CSS: Cascading Style Sheets
the max-block-size css property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-
mode.
...see the example in writing-
mode, which shows the different writing
modes in action.
... how writing-
mode affects directionality the values of writing-
mode affect the mapping of max-block-size to max-width or max-height as follows: values of writing-
mode max-block-size is equivalent to horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-
mode values sid...
...And 8 more matches
Introduction - JavaScript
core javascript can be extended for a variety of purposes by supplementing it with additional objects; for example: client-side javascript extends the core language by supplying objects to control a browser and its document object
model (dom).
...javascript has a prototype-based object
model instead of the more common class-based object
model.
... the prototype-based
model provides dynamic inheritance; that is, what is inherited can vary for individual objects.
...And 8 more matches
Tuning Pageload - Archive of obsolete content
the data flows in gecko as follows: network -> necko -> parser -> content sink -> content
model -> rendering
model -> layout -> painting.
... if the parser gets a large chunk of data, it will try to parse it all, building the corresponding content
model.
... content.switch.threshold determines how often we switch content sink
modes.
...And 7 more matches
Introduction to client-side frameworks - Learn web development
now, javascript is an essential part of the web, used on 95% of all websites, and the web is an essential part of
modern life.
...these
modern, complex, interactive websites are often referred to as web applications.
... the advent of
modern javascript frameworks has made it much easier to build highly dynamic, interactive applications.
...And 7 more matches
Handling common HTML and CSS problems - Learn web development
first things first: fixing general problems we said in the first article of this series that a good strategy to begin with is to test in a couple of
modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cross browser issues.
...the main areas we'll look at are lack of support for
modern features, and layout issues.
... older browsers not supporting
modern features this is a common problem, especially when you need to support old browsers (such as old ie versions) or you are using features that are implemented using css prefixes.
...And 7 more matches
FileUtils.jsm
o a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileoutputstream openfileoutputstream(nsifile file, int
modeflags); nsifileoutputstream openatomicfileoutputstream(nsifile file, int
modeflags); nsifileoutputstream opensafefileoutputstream(nsifile file, int
modeflags); void closeatomicfileoutputstream(nsifileoutputstream stream); void closesafefileoutputstream(nsifileoutputstream stream); constants constant value description
mode_rdonly ...
... 0x01 corresponds to the pr_rdonly parameter to pr_open
mode_wronly 0x02 corresponds to the pr_wronly parameter to pr_open
mode_create 0x08 corresponds to the pr_create_file parameter to pr_open
mode_append 0x10 corresponds to the pr_append parameter to pr_open
mode_truncate 0x20 corresponds to the pr_truncate parameter to pr_open perms_file 0644 default permissions when creating files.
... nsifileoutputstream openfileoutputstream( nsifile file, int
modeflags ); parameters file the file to write to.
...And 7 more matches
nsIDOMWindowUtils
g aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmousescrollevent(in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in long amodifiers); obsolete since gecko 17.0 void sendwheelevent(in float ax, in float ay, in double adeltax, in double adeltay, in double adeltaz, in unsigned long adelta
mode, in long amodifiers, in long alineorpagedeltax, in long alineorpagedeltay, in unsigned long aoptions); void sendnativekeyevent(in long anativekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in n...
... imageanimation
mode unsigned short returns the image animation
mode of the window.
... the attribute's value must be one of the animation
mode values from imgicontainer.
...And 7 more matches
nsIWindowsRegKey
method overview void close(); void create(in unsigned long rootkey, in astring relpath, in unsigned long
mode); nsiwindowsregkey createchild(in astring relpath, in unsigned long
mode); astring getchildname(in unsigned long index); astring getvaluename(in unsigned long index); unsigned long getvaluetype(in astring name); boolean haschanged(); boolean haschild(in astring name); boolean hasvalue(in astring name); boolean iswatching(); ...
... void open(in unsigned long rootkey, in astring relpath, in unsigned long
mode); nsiwindowsregkey openchild(in astring relpath, in unsigned long
mode); acstring readbinaryvalue(in astring name); unsigned long long readint64value(in astring name); unsigned long readintvalue(in astring name); astring readstringvalue(in astring name); void removechild(in astring relpath); void removevalue(in astring name); void startwatching(in boolean recurse); void stopwatching(); void writebinaryvalue(in astring name, in acstring data); void writeint64value(in astring name, in unsigned long long data); void writeintvalue(in astring name, in unsigned long data); void writestringvalue(in as...
... constant value description root_key_classes_root 0x80000000 root_key_current_user 0x80000001 root_key_local_machine 0x80000002 access constants values for the
mode parameter passed to the open() and create() methods.
...And 7 more matches
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.
... note that authors are discouraged from using fill
modes to persist the effect of an animation indefinitely.
... see the alternatives to fill
modes section below for approaches that are simpler and more performant.
...And 7 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
note: this example always displays what it renders on the screen, even if using immersive-vr
mode.
... this lets you compare any differences in rendering between the two
modes, and lets you see output from immersive
mode even if you don't have a headset.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix div");
modelmatrixout = document.queryselector("#
model-view-matrix div"); cameramatrixout = document.queryselector("#camera-matrix div"); mousematrixout = document.queryselector("#mouse-matrix div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the button that ...
...And 7 more matches
ARIA: document role - Accessibility
generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading
mode: the document role tells assistive technologies with reading or browse
modes to use the document
mode to read the content contained within this element.
... 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.
...And 7 more matches
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
if i now change the writing
mode of this component to vertical-rl using the writing-
mode property, the alignment continues to work in the same way.
... if instead of the width property we use the logical property inline-size, the component now works the same way no matter which writing
mode it is displayed using.
...change writing-
mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout.
...And 7 more matches
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
in the table below i have given these mapped values assuming that the writing-
mode in use is horizontal-tb — with a left to right direction.
... if you were using a horizontal-tb writing
mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing
mode it would be the same as using margin-top.
... you can also try changing the writing-
mode from horizontal-tb to vertical-rl.
...And 7 more matches
delete operator - JavaScript
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.
... exceptions throws typeerror in strict
mode if the property is an own non-configurable property.
...in strict
mode this will raise a typeerror.
...And 7 more matches
this - JavaScript
it also has some differences between strict
mode and non-strict
mode.
... syntax this value a property of an execution context (global, function or eval) that, in non–strict
mode, is always a reference to an object and in strict
mode can be any value.
... description global context in the global execution context (outside of any function), this refers to the global object whether in strict
mode or not.
...And 7 more matches
var - JavaScript
duplicate variable declarations using var will not trigger an error, even in strict
mode, and the variable will not lose its value, unless another assignment is performed.
... 'use strict'; function foo() { var x = 1; function bar() { var y = 2; console.log(x); // 1 (function `bar` closes over `x`) console.log(y); // 2 (`y` is in scope) } bar(); console.log(x); // 1 (`x` is in scope) console.log(y); // referenceerror in strict
mode, `y` is scoped to `bar` } foo(); variables declared using var are created before any code is executed in a process known as hoisting.
... 'use strict'; var x = 1; globalthis.hasownproperty('x'); // true delete globalthis.x; // typeerror in strict
mode.
...And 7 more matches
Critical rendering path - Web Performance
optimizing the critical render path improves render performance.the critical rendering path includes the document object
model (dom), css object
model (cssom), render tree and layout.
... the document object
model is created as the html is parsed.
...the html includes or makes requests for styles, which in turn builds the css object
model.
...And 7 more matches
Mobile first - Progressive web apps (PWAs)
you can write your own feature detects (mark pilgrim's all-in-one almost-alphabetical guide to detecting everything is a good start), but really it is much better to use a dedicated existing solution, such as
modernizr.
...
modernizr is a good choice as it not only includes a feature detect for just about everything (css, html5, some other bits besides), it is also fairly reliable, and you can create your own custom version with only the feature detects you need in it, using the
modernizr download builder.
... the full uncompressed
modernizr library is 42kb, but the version we are using in this demo is only 8kb.
...And 7 more matches
CSS3 - Archive of obsolete content
css basic user interface module level 3 recommendation since june 21st, 2018 adds: the ability to tweak the box
model using the css box-sizing property.
... the ability to control the usage of an ime editor, using the css ime-
mode property.
... at risk: due to insufficient browser support, standardization of the ime-
mode property may be postponed to the next iteration of this module.
...And 6 more matches
NPP_NewStream - Archive of obsolete content
the plugin should set this value to request a
mode for the stream.
...like np_asfileonly except that data is delivered to the plug-in as it is saved to the file (as in
mode np_normal).
... the parameter stype defines the
mode of the stream.
...And 6 more matches
CSS FAQ - Learn web development
browsers use the doctype declaration to choose whether to show the document using a
mode that is more compatible with web standards or with old browser bugs.
... using a correct and
modern doctype declaration at the start of your html will improve browser standards compliance.
...
modern browsers have two main rendering
modes: quirks
mode: also called backwards-compatibility
mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers.
...And 6 more matches
Graceful asynchronous programming with Promises - Learn web development
explaining basic promise syntax: a real example promises are important to understand because most
modern web apis use them for functions that perform potentially lengthy tasks.
... to use
modern web technologies you'll need to use promises.
...previously you'd have to include the same code in both the .then() and .catch() callbacks, for example: mypromise .then(response => { dosomething(response); runfinalcode(); }) .catch(e => { returnerror(e); runfinalcode(); }); in more recent
modern browsers, the .finally() method is available, which can be chained onto the end of your regular promise chain allowing you to cut down on code repetition and do things more elegantly.
...And 6 more matches
Introduction to events - Learn web development
the example output is as follows: it's not just web pages another thing worth mentioning at this point is that events are not unique to javascript — most programming languages have some kind of event
model, and the way the
model works often differs from javascript's way.
... in fact, the event
model in javascript for web pages differs from the event
model for javascript as it is used in other environments.
...the node.js event
model relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once.
...And 6 more matches
Fetching data from the server - Learn web development
previous overview: client-side web apis next another very common task in
modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page.
... the trouble with this
model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again.
... the ajax
model involves using a web api as a proxy to more intelligently request data rather than just having the browser reload the entire page.
...And 6 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
s git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development
mode.
...first of all, we want a todo component's edit <input> to receive focus when we enter editing
mode by pressing its edit button.
... open the file components/todo.svelte and add a nameel variable declaration, just below your editing and name declarations: let nameel // reference to the name input dom node now update your onedit() function like so: function onedit() { editing = true // enter editing
mode nameel.focus() // set focus to name input } and finally, bind nameel to the <input> field, by updating it like so: <input bind:value={name} bind:this={nameel} type="text" id="todo-{todo.id}" autocomplete="off" class="todo-text" /> however, when you try the updated app you'll get an error along the lines of "typeerror: nameel is undefined" in the console whe...
...And 6 more matches
Mozilla's Section 508 Compliance
unknown - needs research (h) when animation is displayed, the information shall be displayable in at least one non-animated presentation
mode at the option of the user.
... functional performance criteria requirement windows linux/unix mac os requirement windows linux/unix mac os a) at least one
mode of operation and information retrieval that does not require user vision shall be provided, or support for assistive technology used by people who are blind or visually impaired shall be provided.
...gnopernicus support in beta no screen reader support on mac os x b) at least one
mode of operation and information retrieval that does not require visual acuity greater than 20/70 shall be provided in audio and enlarged print output working together or independently, or support for assistive technology used by people who are visually impaired shall be provided.
...And 6 more matches
Bytecode Descriptions
format: jof_atom, jof_prop, jof_propset, jof_checksloppy, jof_ic strictsetprop operands: (uint32_t nameindex) stack: obj, val ⇒ val like jsop::setprop, but for strict
mode code.
...format: jof_elem, jof_propset, jof_checksloppy, jof_ic strictsetelem stack: obj, key, val ⇒ val like jsop::setelem, but for strict
mode code.
...format: jof_atom, jof_prop, jof_checksloppy strictdelprop operands: (uint32_t nameindex) stack: obj ⇒ succeeded like jsop::delprop, but for strict
mode code.
...And 6 more matches
Drawing and Event Handling - Plugins
the content provider who writes the web page determines its display
mode: whether the plug-in is embedded, or displayed in its own separate page.
... for information about the way html determines plug-in display
mode, see using html to display plug-ins.
... the printinfo parameter determines the print
mode.
...And 6 more matches
Plug-in Basics - Plugins
the next section, understanding the runtime
model, describes these stages in more detail.
... understanding the runtime
model plug-ins are dynamic code modules that are associated with one or more mime types.
...a web page can display a windowed or windowless plug-in in any html display
mode; however, the plug-in must be visible for its window type to be meaningful.
...And 6 more matches
Introduction to the DOM - Web APIs
the document object
model (dom) is the data representation of the objects that comprise the structure and content of a document on the web.
... the document object
model (dom) is a programming interface for html and xml documents.
...the document object
model (dom) represents that same document so it can be manipulated.
...And 6 more matches
IDBTransaction - Web APIs
you use idbdatabase to start transactions, idbtransaction to set the
mode of the transaction (e.g.
...you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush
mode (see idbdatabase.transaction.
... idbtransaction.
mode read only the
mode for isolating access to data in the object stores that are in the scope of the transaction.
...And 6 more matches
Screen.lockOrientation() - Web APIs
note: this method only works for installed web apps or for web pages in full-screen
mode.
... the following strings represent the possible orientation requirements you may specify: portrait-primary it represents the orientation of the screen when it is in its primary portrait
mode.
... a screen is considered in its primary portrait
mode if the device is held in its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held turned by 90° clockwise.
...And 6 more matches
WebGL constants - Web APIs
blending
modes constants passed to webglrenderingcontext.blendfunc() or webglrenderingcontext.blendfuncseparate() to specify the blending
mode (for both, rbg and alpha, or separately).
... cull_face_
mode 0x0b45 passed to getparameter to get the current value of cullface.
...nt 0x8cd6 framebuffer_incomplete_missing_attachment 0x8cd7 framebuffer_incomplete_dimensions 0x8cd9 framebuffer_unsupported 0x8cdd framebuffer_binding 0x8ca6 renderbuffer_binding 0x8ca7 max_renderbuffer_size 0x84e8 invalid_framebuffer_operation 0x0506 pixel storage
modes constants passed to webglrenderingcontext.pixelstorei().
...And 6 more matches
Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make,
model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.
model = 'mustang'; mycar.year = 1969; the above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}): var mycar = { make: 'ford',
model: 'mustang', year: 1969 }; ...
...so, for example, you could access the properties of the mycar object as follows: mycar['make'] = 'ford'; mycar['
model'] = 'mustang'; mycar['year'] = 1969; an object property name can be any valid javascript string, or anything that can be converted to a string, including the empty string.
... you can also access properties by using a string value that is stored in a variable: var propertyname = 'make'; mycar[propertyname] = 'ford'; propertyname = '
model'; mycar[propertyname] = 'mustang'; you can use the bracket notation with for...in to iterate over all the enumerable properties of an object.
...And 6 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
f("mail.accountmanager.accounts", "account1,account2"); lockpref("mail.accountmanager.defaultaccount", "account2"); lockpref("mail.accountmanager.localfoldersserver", "server1"); lockpref("mail.identity.id1.directoryserver", "ldap_2.servers.ldapint"); lockpref("mail.identity.id1.draft_folder", "imap://" + env_user + "@imap-int.int-evry.fr/drafts"); lockpref("mail.identity.id1.drafts_folder_picker_
mode", "0"); lockpref("mail.identity.id1.fcc_folder", "imap://" + env_user + "@imap-int.int-evry.fr/sent"); lockpref("mail.identity.id1.fcc_folder_picker_
mode", "0"); lockpref("mail.identity.id1.organization", "int evry france"); lockpref("mail.identity.id1.overrideglobal_pref", true); lockpref("mail.identity.id1.reply_to", ""); //imap lockpref("mail.server.server2.hostname", "imap-int.int-evry.fr");...
...connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.type", "imap"); lockpref("mail.server.server2.username", env_user); //smtp lockpref("mail.identity.id1.smtpserver", "smtp1"); lockpref("mail.identity.id1.stationery_folder", "imap://" + env_user + "@imap-int.int-evry.fr/templates"); lockpref("mail.identity.id1.tmpl_folder_picker_
mode", "0"); lockpref("mail.identity.id1.valid", true); //smtp general lockpref("mail.smtp.defaultserver", "smtp1"); lockpref("mail.smtpserver.smtp1.auth_method", 0); lockpref("mail.smtpserver.smtp1.hostname", "smtp-int.int-evry.fr"); lockpref("mail.smtpserver.smtp1.port", 25); lockpref("mail.smtpserver.smtp1.try_ssl", 0); lockpref("mail.smtpserver.smtp1.username", ""); lockpref("mail.smtpservers", "...
... my tests were on windows vista, and i noticed at least one difference, it is that paths changed; now the profile is in (for my procacci user sample): c:\users\procacci\appdata\roaming\thunderbird\profiles\v6we4uku.default start in debug
mode in comand line interface: debug with displayerror() here's the result, i used the displayerror() method ( not the best way :-( see bug 206294 ) to show environment and ldap variables in order to check that it worked fine.
...And 5 more matches
Autodial for Windows NT - Archive of obsolete content
if the user has a
modem and no lan card, this service will work reliably for them.
...however, if the user has both a
modem and a lan card, the service will be less reliable for them.
... the only way the service will work in this case is if the internet address has been accessed some previous time via the
modem.
...And 5 more matches
A XUL Bestiary - Archive of obsolete content
object
models: dom and aom the document object
model is the representation of a document as a series of scriptable objects.
...there are, unfortunately, different document object
models corresponding to different types of documents and also to different proprietary notions about what in a document should be exposed programmatically.
... with the dramatic improvements in the object
model and the power of the w3c dom level 2, the concept of the dom is displacing that of the more abstract dhtml.
...And 5 more matches
findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, find
mode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... find
mode type: integer read only.
... the find
mode in use.
...And 5 more matches
Open and Save Dialogs - Archive of obsolete content
you can use the file picker in one of three
modes: open - the user is asked to select a file for opening.
... the file picker interface nsifilepicker is responsible for displaying a dialog in one of the three
modes.
... var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.
modeopen); first, a new file picker object is created and stored in the variable 'fp'.
...And 5 more matches
Building up a basic demo with the PlayCanvas engine - Game development
built for
modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
...you should start off by: making sure you are using a
modern browser with good webgl support, such as the latest firefox or chrome.
... app.setcanvasfill
mode(pc.fill
mode_fill_window); app.setcanvasresolution(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects.
...And 5 more matches
Beginner's guide to media queries - Learn web development
orientation one well-supported media feature is orientation, which allows us to test for portrait or landscape
mode.
... a standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait
mode.
... testing for orientation can help you to create a layout which is optimised for devices in portrait
mode.
...And 5 more matches
Supporting older browsers - Learn web development
this article explains how to use
modern web techniques without locking out users of older technology.
...supporting everyone means serving a version of your content that is designed defensively, so that it will look great on
modern browsers, but will still be usable at a basic level for users of older browsers.
...if you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on
modern browsers.
...And 5 more matches
Ember resources and troubleshooting - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
... using the design patterns provided by the framework, a route using fetch() would look something like this: import route from '@ember/routing/route'; export default class myroute extends route { async
model() { let response = await fetch('some/url/to/json/data'); let json = await response.json(); return { data: json }; } } see more information on specifying the route's
model here.
... a route only has 3 lifecycle hooks, all of which are optional: before
model — gate access to the route.
...And 5 more matches
PR_dtoa
syntax #include <prdtoa.h> prstatus pr_dtoa( prfloat64 d, printn
mode, printn ndigits, printn *decpt, printn *sign, char **rve, char *buf, prsize bufsz); parameters the function has these parameters: d the floating point number to be converted to a string.
...
mode the type of conversion to employ.
... description this function converts the specified floating point number to a string, using the method specified by
mode.
...And 5 more matches
nss tech note2
using the pkcs #11 module logger nss technical note: 2
modes of operation extracting output from log files the logger displays all activity between nss and a specified pkcs #11 module.
...
modes of operation the logger has several
modes of operation: 1.
...to enable this
mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: rv = 0x0 2.
...And 5 more matches
nsIPrivateBrowsingService
when firefox is in private browsing
mode, firefox shouldn't save any potentially private information.
...in addition, temporary, databases are created to be used for cookies and local storage; these databases are thrown away when private browsing
mode is turned off, and the regular databases are re-activated.
...extensions that record potentially private information should use this interface to detect whether private browsing
mode is enabled, and if it is, avoid saving that information.
...And 5 more matches
Index - Firefox Developer Tools
2 3d view html, tools, web development, web development:tools when you click on the 3d view button, the page goes into 3d view
mode; in this
mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 6 dom inspector dom, dom:tools, dom_inspector, extensions, extensions:tools, themes, themes:tools, tools, web development, web development:tools, xul, xul:tools the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object
model of documents - usually web pages or xul windows.
... 11 application application, debugging, devtools, firefox, guide, manifests, service workers the application panel provides tools for inspecting and debugging
modern web apps (also known as progressive web apps).
...And 5 more matches
Element - Web APIs
event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element enters or exits full-screen
mode.
... element.onfullscreenerror an event handler for the fullscreenerror event, which is sent when an error occurs while attempting to change into full-screen
mode.
... fullscreen events fullscreenchange sent to an element when it transitions into or out of full-screen
mode.
...And 5 more matches
SVGFEBlendElement - Web APIs
="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_
mode_unknown 0 the type is not one of predefined types.
... svg_feblend_
mode_normal 1 corresponds to the value normal.
... svg_feblend_
mode_multiply 2 corresponds to the value multiply.
...And 5 more matches
WebXR permissions and security - Web APIs
among other things, you need to confirm access to device features such as the microphone and/or camera, get permission to use immersive vr
mode (if applicable), and so forth.
...these mostly revolve around the fully-immersive immersive-vr session
mode, but there are things to be aware of when setting up an ar session, as well.
... immersive presentation of vr first, any requests to activate the immersive-vr
mode are rejected if the domain issuing the request does not have permission to enable an immersive session.
...And 5 more matches
Web accessibility for seizures and physical reactions - Accessibility
prefers-reduced-motion support for prefers-reduced-motion in
modern browsers is growing.
... @media (prefers-color-scheme: dark) { /* adust styles for dark
mode */ } window.matchmedia() there is a powerful tool available to developers via window.matchmedia().
...the vast majority of
modern technology refreshes at a rate that does not cause problems with photosensitivity.
...And 5 more matches
-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast
mode, and with what color variation.
... high contrast
mode is a specialized display
mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... active indicates that the subsequent styling rules will be applied when the system is placed in high contrast
mode with any color variation.
...And 5 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout
model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
...this can be contrasted with the two-dimensional
model of css grid layout, which controls columns and rows together.
... start and end lines another vital area of understanding is how flexbox makes no assumption about the writing
mode of the document.
...And 5 more matches
animation - CSS: Cascading Style Sheets
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.
... /* @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: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div cla...
... constituent properties this property is a shorthand for the following css properties: animation-delay animation-direction animation-duration animation-fill-
mode animation-iteration-count animation-name animation-play-state animation-timing-function syntax the animation property is specified as one or more single animations, separated by commas.
...And 5 more matches
Event reference
events can represent everything from basic user interactions to automated notifications of things happening in the rendering
model.
... view events event name fired when fullscreenchange an element was toggled to or from fullscreen
mode.
... fullscreenerror it was impossible to switch to fullscreen
mode for technical reasons or because the permission was denied.
...And 5 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents
modern web browsers can handle.
...the pattern is also used by
modern web browsers which define many events emitted in response to user input or browser activity.
...
modern web browsers follow the event pattern using a standardized approach.
...And 5 more matches
Notes on HTML Reflow - Archive of obsolete content
the html formatting objects are called frames : a frame corresponds to the geometric information for (roughly) a single element in the content
model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content
model.
...more than one frame may be needed to represent a single element from the content
model; for example, text that wraps is broken into several frames, one per wrapped line.
...html uses a flow based layout
model, meaning that most of the time it is possible to compute the geometry in a single pass.
...And 4 more matches
Documentation for BiDi Mozilla - Archive of obsolete content
the order of the frames in the content
model is not affected, so frames that are adjacent in the content
model can be far apart visually.
... text in visual
mode must also be reversed before display on a bidi platform.
... other bidi functionality clipboard: based on bidi options in preferences, the text
mode of the clipboard may be "logical", "visual" or "as source".
...And 4 more matches
NPN_SetValue - Archive of obsolete content
variable values the function can set: nppvpluginwindowbool: sets windowed/windowless
mode for plugin display; true=windowed, false=windowless nppvplugintransparentbool: sets transparent
mode for display of a plugin; true=transparent, false=opaque nppvjavaclass nppvpluginwindowsize nppvplugintimerinterval nppvpluginscriptableinstance nppvpluginscriptableiid nppvjavascriptpushcallerbool: specifies whether you are pushing or popping the jscontext off the stack nppvplugink...
...eeplibraryinmemory: tells browser that the plugin dll should live longer than usual nppvpluginneedsxembed nppvpluginscriptablenpobject nppvformvalue nppvplugindrawing
model value the value of the specified variable to be set.
... description a good place to set plugin operation
mode such as windowless
mode is npp_new, so the browser knows right away what
mode the plugin is designed to operate in.
...And 4 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen
mode properly on win7 with aero glass support firefox doesn't always go to full screen
mode from a normal window properly.
... @media all and (-moz-windows-compositor) { /* make transition to fullscreen
mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
... app button not styled on linux, but is styled on windows on linux the firefox app button that is displayed when tabs are on top and menu bar is disabled is not styled properly compared to windows and is not changing colors when in private browsing
mode.
...And 4 more matches
RDF in Mozilla FAQ - Archive of obsolete content
second, and more importantly, the rdf
model is used along with xul templates as an abstract "api" for displaying information.
... one alternative to using rdf and xul templates is to use the w3c dom apis to build up and manipulate a xul (or html) content
model.
...rather than writing three pieces of js (or c++) code to construct the dom trees each for <menubutton>, <menu>, and <tree> content
models, you write three compact sets of rules for each content
model.
...And 4 more matches
What is JavaScript? - Learn web development
for example: the dom (document object
model) api allows you to manipulate html and css, creating, removing and changing html, dynamically applying new styles to your page, etc.
... note: many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a
modern browser like firefox, chrome, edge or opera to run your code in.
... a very common use of javascript is to dynamically modify html and css to update a user interface, via the document object
model api (as mentioned above).
...And 4 more matches
TypeScript support in Svelte - Learn web development
git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development
mode.
... then you'll have to tell npm to download dependencies and start the project in development
mode, like we usually do: npm install npm run dev adding typescript support to an existing svelte project to add typescript support to an existing svelte project you can follow these instructions.
... npm install # download new dependencies npm run dev # start the app in development
mode these instructions apply to any svelte project you'd like to convert to typescript.
...And 4 more matches
Strategies for carrying out testing - Learn web development
you can make this as simple or as complex as you like — for example a common approach is to have multiple grades of support level, something like: a grade: common/
modern browsers — known to be capable.
... c grade: opera, other niche
modern browsers.
...for example, if you want to do some quick and dirty testing of your width/height media queries for responsive design, you could use firefox's responsive design
mode.
...And 4 more matches
NSS tools : modutil
-chkfips verify whether the module is in the given fips
mode.
... true means to verify that the module is in fips
mode, while false means to verify that the module is not in fips
mode.
... enable flags: none default mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes slot: nss internal cryptographic services slot mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes manufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss generic crypto services token manufacturer: mozilla foundation token
model: nss 3 token serial number: 0000000000000000 token version: 4.0 token firmware version: 0.0 access: write protected login type: public (no login required) user pin: not initialized slot: nss user private key and certificate services slot mechanism flags: none manufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss c...
...And 4 more matches
NSS tools : modutil
-chkfips verify whether the module is in the given fips
mode.
... true means to verify that the module is in fips
mode, while false means to verify that the module is not in fips
mode.
...default mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes slot: nss internal cryptographic services slot mechanism flags: rsa:rc2:rc4:des:dh:sha1:md5:md2:ssl:tls:aes manufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status: enabled token name: nss generic crypto services token manufacturer: mozilla foundation token
model: nss 3 token serial number: 0000000000000000 token version: 4.0 token firmware version: 0.0 access: write protected login type: public (no login required) user pin: not initialized slot: nss user private key and certificate services slot mechanism flags: none manufacturer: mozilla foundation type: software version number: 3.11 firmware version: 0.0 status:...
...And 4 more matches
JS_GetGCParameter
typedef enum jsgcparamkey { jsgc_max_bytes, jsgc_max_malloc_bytes, jsgc_max_nursery_bytes, jsgc_bytes, jsgc_number, jsgc_
mode, jsgc_unused_chunks, jsgc_total_chunks, jsgc_slice_time_budget, jsgc_mark_stack_limit, jsgc_high_frequency_time_limit, jsgc_high_frequency_low_limit, jsgc_high_frequency_high_limit, jsgc_high_frequency_heap_growth_max, jsgc_high_frequency_heap_growth_min, jsgc_low_frequency_heap_growth, jsgc_dynamic_heap_growth, jsgc_dynamic_mark_slice, jsgc_all...
... jsgc_
mode / "
mode" select gc
mode: jsgc_
mode_global (0) the gc runs all objects are visited in a singleslice.
... jsgc_
mode_zone (1) the gc runs only the objects that belong to somezones are visited in a singleslice.
...And 4 more matches
nsINavHistoryQueryOptions
redirects
mode unsigned short specifies how to handle redirects; see redirects
mode constants for details.
... the default value is redirects_
mode_all.
... sortingannotation autf8string the annotation to use in sort_by_annotation_* sorting
modes.
...And 4 more matches
IDBDatabase.transaction() - Web APIs
syntax idbdatabase.transaction(storenames); idbdatabase.transaction(storenames,
mode); parameters "durability" -- the durability constrints for the transction.
...
mode optional the types of access that can be performed in the transaction.
... transactions are opened in one of three
modes: readonly, readwrite and readwriteflush (non-standard, firefox-only.) versionchange
mode can't be specified here.
...And 4 more matches
LockManager.request() - Web APIs
the
mode property of the options parameter may be either "exclusive" or "shared".
...valid values are:
mode optional: either "exclusive" or "shared".
...});
mode example the following example shows how to use the
mode option for readers and writers.
...And 4 more matches
MouseEvent - Web APIs
nt to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent' in that specification.
... candidate recommendation from document object
model (dom) level 3 events specification, added movementx and movementy properties.
... css object
model (cssom) view modulethe definition of 'mouseevent' in that specification.
...And 4 more matches
Request.cache - Web APIs
the cache read-only property of the request interface contains the cache
mode of the request.
... syntax var currentcache
mode = request.cache; value a requestcache value.
... the "only-if-cached"
mode can only be used if the request's
mode is "same-origin".
...And 4 more matches
SVGFEGaussianBlurElement - Web APIs
40" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edge
mode_unknown 0 the type is not one of predefined types.
... svg_edge
mode_duplicate 1 corresponds to the duplicate value.
... svg_edge
mode_wrap 2 corresponds to the wrap value.
...And 4 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
examples this example demonstrates code logic you might find in a game that starts up using webgl to display menus and other ui, and uses webgl to render gameplay, but has a button on its main menu that offers an option to start the game in webxr
mode.
... html the html for the buttons looks lke this: <button class="green button" type="button">start game</button> <button class="blue button use-webxr" type="button">start game (vr
mode)</button> the first button starts the game, continuing to present the game onscreen as usual.
... the second button will be used to start the game in immersive-vr
mode.
...And 4 more matches
Web audio spatialization basics - Web APIs
let's take a look at each of them: to start we can set the panning
model.
...let's use the hrtf
model!
... const panner
model = 'hrtf'; the coneinnerangle and coneouterangle properties specify where the volume emanates from.
...And 4 more matches
Window.open() - Web APIs
toolbar and ui parts features in
modern browsers (firefox 76 or newer, google chrome, safari, chromium edge), the following features are just a condition for whether to open popup or not.
... this is supported in
modern browsers including chrome, and firefox 52+.
... more reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html usability issues avoid resorting to window.open() generally speaking, it is preferable to avoid resorting to window.open() for several reasons: most
modern desktop browsers offer tab-browsing, and tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations.
...And 4 more matches
XRView.transform - Web APIs
const
modelviewmatrix = mat4.create(); const normalmatrix = mat4.create(); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); for (let obj of world.objects) { mat4.multiply(
modelviewmatrix, view.transform.inverse.matrix, obj.matrix); mat4.invert(normalmatrix,
modelviewmatrix); mat4.transpose(norma...
...lmatrix, normalmatrix); obj.render(
modelviewmatrix, normalmatrix); } } two matrices are created outside the rendering loop; this avoids repeatedly allocating and deallocating the matrices, and generally reduces overhead by reusing the same matrix for each object rendered.
...there will usually be two: one for the left eye and one for the right, but there may be only one if in monoscopic
mode.
...And 4 more matches
ARIA: application role - Accessibility
in this
mode, the web author is completely responsible for handling any and all keyboard input, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end.
...this is often referred to as virtual document, browse
mode, or similar terms.
...a keyboard interaction
model is generated that is very similar to a word processor where users can read line by line, sentence by sentence, or paragraph by paragraph.
...And 4 more matches
ARIA: feed role - Accessibility
a feed enables screen readers to use the browse
mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
...the list establishes an interoperability contract between the web page and assistive technologies that governs scroll interactions so that assistive technology users can read articles, jump forward and backward by article, and reliably trigger new articles to load while in reading
mode.
...implementing the feed pattern allows a screen reader to reliably read and trigger the loading of feed content while in reading
mode.
...And 4 more matches
Coordinate systems - CSS: Cascading Style Sheets
this guide describes the standard coordinate systems used by the css object
model.
...note that this is unlike most mathematical
models, where the origin is at the bottom-left corner, with positive y-coordinate values being above the origin.
... standard cssom coordinate systems there are four standard coordinate systems used by the css object
model, as described below.
...And 4 more matches
CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout
models: block layout, table layout, flex layout, and grid layout.
... relationship to writing
modes alignment is linked to writing
modes in that when we align an item we do not consider whether we are aligning it to the physical dimensions of top, right, bottom and left.
...this ensures that alignment works in the same way whichever writing
mode the document has.
...And 4 more matches
mask - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-
mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as luminance mask */...
... <masking-
mode> sets the masking
mode of the mask image.
... see mask-
mode.
...And 4 more matches
Creating a cross-browser video player - Developer guides
ium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="w
mode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offe...
... fullscreen the fullscreen api should be straight forward to use: the user clicks a button, if the video is in fullscreen
mode: cancel it, otherwise enter fullscreen
mode.
...screen(); else if (videocontainer.mozrequestfullscreen) videocontainer.mozrequestfullscreen(); else if (videocontainer.webkitrequestfullscreen) videocontainer.webkitrequestfullscreen(); else if (videocontainer.msrequestfullscreen) videocontainer.msrequestfullscreen(); setfullscreendata(true); } } first of all the function checks if the browser is already in fullscreen
mode by calling another function isfullscreen: var isfullscreen = function() { return !!(document.fullscreen || document.webkitisfullscreen || document.mozfullscreen || document.msfullscreenelement || document.fullscreenelement); } this function checks all the various browser prefixed versions to try and determine the correct result.
...And 4 more matches
Making content editable - Developer guides
fortunately, in
modern browsers things are somewhat more consistent.
... as of firefox 60, firefox will be updated to wrap the separate lines in <div> elements, matching the behavior of chrome,
modern opera, edge, and safari.
...d.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.compform.switch
mode.checked) { setdoc
mode(true); } } function formatdoc(scmd, svalue) { if (validate
mode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validate
mode() { if (!document.compform.switch
mode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdoc
mode(btosource) { var ocontent; if (btosource) { ocontent = do...
...And 4 more matches
HTTP Index - HTTP
http follows a classical client-server
model, with a client opening a connection to make a request, then waiting until it receives a response.
...http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the
modern maze of the internet, now carrying images, videos in high resolution and 3d.
...in http/1.x, there are several
models: short-lived connections, persistent connections, and http pipelining.
...And 4 more matches
Arrow function expressions - JavaScript
undefined in strict
mode function calls.
... this.age = 0; setinterval(function growup() { // in non-strict
mode, the growup() function defines `this` // as the global object (because it's where growup() is executed.), // which is different from the `this` // defined by the person() constructor.
... thus, in the following code, the this within the function that is passed to setinterval has the same value as the this in the lexically enclosing function: function person(){ this.age = 0; setinterval(() => { this.age++; // |this| properly refers to the person object }, 1000); } var p = new person(); relation with strict
mode given that this comes from the surrounding lexical context, strict
mode rules with regard to this are ignored.
...And 4 more matches
Introduction to progressive web apps - Progressive web apps (PWAs)
a look and feel that is more integrated with the native platform—app icons on the home screen or app launcher, applications that automatically run in full screen
mode, etc.
... for service worker and push specific information, be sure to check the service worker cookbook, a collection of recipes using service workers in
modern sites.
...
modern web apps can have this native app feel via properties set inside the web app manifest, and via a feature available in
modern smartphone browsers called web app installation.
...And 4 more matches
Supporting per-window private browsing - Archive of obsolete content
firefox 20 introduced per-window private browsing
mode, in which private user data is stored and accessed concurrently with public user data from another window.
... detecting private browsing
mode determining whether or not a given dom window is private is simple: import resource://gre/modules/privatebrowsingutils.jsm and use privatebrowsingutils.iswindowprivate(window).
... // might use doc.hasattribute("privatebrowsing
mode") then instead) try { var inprivatebrowsing = components.classes["@mozilla.org/privatebrowsing;1"].
...And 3 more matches
Installer Script - Archive of obsolete content
registerchrome(skin | delayed_chrome, getfolder(cf,"
modern.jar"),"skin/
modern/communicator/"); 48.
... registerchrome(skin | delayed_chrome, getfolder(cf,"
modern.jar"),"skin/
modern/editor/"); 49.
... registerchrome(skin | delayed_chrome, getfolder(cf,"
modern.jar"),"skin/
modern/global/"); 50.
...And 3 more matches
Complete - Archive of obsolete content
in seamonkey it supports two themes (classic and
modern).
... classic for seamonkey
modern for seamonkey to make it easier to support different themes, developers place anything that might depend on the theme in separate files in a separate directory.
...this is how it happens: this extension does not support
modern in firefox etc., but you can see the registration details for classic in chrome.manifest.
...And 3 more matches
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, size
mode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
... fullscreenbutton type: boolean set this attribute to true to display a button in the window chrome to allow the user to switch the window into full screen
mode.
... size
mode type: one of the values below the state of the window.
...And 3 more matches
Implementation Status - Archive of obsolete content
ces supported 3.2.1 common attributes supported 3.2.2 linking attributes supported 3.2.3 single-node binding attributes supported 3.2.4 node-set binding attributes supported 3.2.5
model item property attributes partial in some cases a loop error can occur on valid bindings 302168; 3.3.1
model supported 3.3.2 instance partial instance element with two child element does not trigger exception 337302; 3.3.3 submission partial no support for @inden...
...processing
model (events) section title status notes bugs 4 processing
model (events) partial the xforms-recalculate, xforms-revalidate, and xforms-refresh events are not as separated as they should be.
... 278448; 338146; 4.2 initialization events supported 4.2.1 xforms-
model-construct supported 4.2.2 xforms-
model-construct-done supported 4.2.3 xforms-ready supported 4.2.4 xforms-
model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2 xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported ...
...And 3 more matches
Plug-in Development Overview - Gecko Plugin API Reference
the plug-in can select one of these transmission
modes: normal
mode: the browser sends the stream data sequentially to the plug-in as the data becomes available.
... random-access
mode: the browser allows the plug-in to request specific ranges of bytes from anywhere in the stream.
... this
mode requires server support.
...And 3 more matches
MDN Web Docs Glossary: Definitions of Web-related terms
ion context argument aria arpa arpanet array ascii asynchronous atag attribute b bandwidth base64 baseline beacon bézier curve bidi bigint blink block block (css) block (scripting) block cipher
mode of operation boolean boot2gecko bootstrap bounding box breadcrumb brotli browser browsing context buffer c cache cacheable caldav call stack callback function canonical order canvas card sorting carddav caret ...
...nuous media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler crlf cross axis cross-site scripting crud cryptanalysis cryptographic hash function cryptography csp csrf css css object
model (cssom) css pixel css preprocessor d data structure decryption delta denial of service descriptor (css) deserialization developer tools dhtml digest digital certificate distributed denial of service dmz dns doctype document direc...
...tive document environment dom (document object
model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone multi-frequency signaling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os ...
...And 3 more matches
Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all
modern browsers can help you to find out what is going on.
... understanding the box
model in previous lessons we have discussed the box
model, and the fact that we have an alternate box
model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders.
... the layout view shows you a diagram of the box
model on the selected element, along with a description of the properties and values that change how the element is laid out.
...And 3 more matches
CSS building blocks - Learn web development
the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
... in this lesson, we will take a proper look at the css box
model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.
... handling different text directions in recent years, css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing
modes.
...And 3 more matches
Introduction to web APIs - Learn web development
there are a huge number of apis available in
modern browsers that allow you to do a wide variety of things in your code.
...the most obvious example is the dom (document object
model) api, which allows you to manipulate html and css — creating, removing and changing html, dynamically applying new styles to your page, etc.
... device apis are basically apis for manipulating and retrieving data from
modern device hardware in a way that is useful for web apps.
...And 3 more matches
Getting started with Svelte - Learn web development
the outcome of this approach is not only smaller application bundles and better performance, but also a developer experience that is more approachable for people that have limited experience of the
modern tooling ecosystem.
... svelte sticks closely to the classic web development
model of html, css, and js, just adding a few extensions to html and javascript.
... after installing git, to clone the repository you should execute: git clone https://github.com/opensas/mdn-svelte-tutorial.git then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev
mode to see what its current state should be, like this: cd 02-starting-our-todo-app npm install npm run dev if you want lo learn more about git and github, we've compiled a list of links to useful guides — see git and github.
...And 3 more matches
A bird's-eye view of the Mozilla framework
thehelp viewer files referenced in the article are located in /seamonkey/extensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and design concepts, the microsoft® component object
model (com), and the corba omg interface definition language (idl).
... content (dom) the mozilla document object
model (dom) specifies a logical tree structure for storing ui and document content, and provides an api (application programming interface) for accessing and manipulating the content.
... xpcom object
model before getting into the details of the ui example, it's helpful to have a basic understanding of the xpcom object
model.
...And 3 more matches
nss tech note5
iv is relevant only when using cbc
mode of encryption.
... if not using cbc
mode, just pass a null iv parm to pk11_paramfromiv function secitem ivitem; ivitem.data = /* ptr to an array of iv bytes */ ivitem.len = /* length of the array of iv bytes */ secitem *secparam = pk11_paramfromiv(ciphermech, &ivitem);</big> <big>now encrypt and decrypt using the key and parameter setup in above steps</big> create encryption context pk11context* enccontext = pk11_createcontextbysymkey(ciphermech, cka_encrypt or cka_decrypt, symkey, secparam); do the operation.
...iv is relevant only when using cbc cipher
mode.
...And 3 more matches
NSS cryptographic module
the nss cryptographic module has two
modes of operation: the non-fips (default)
mode and fips
mode.
... the fips
mode is an approved
mode of operation compliant to fips 140-2.
... both
modes of operation use the same data types but are implemented by different functions.
...And 3 more matches
sslfnc.html
syntax #include "ssl.h" prfiledesc *ssl_importfd( prfiledesc *
model, prfiledesc *fd); parameters this function has the following parameters:
model a pointer to the
model file descriptor.
...if the
model parameter is not null, the configuration of the new file descriptor is copied from the
model.
... if the
model parameter is null, then the default ssl configuration is used.
...And 3 more matches
Rhino shell
the javascript shell provides a simple way to run scripts in batch
mode or an interactive environment for exploratory programming.
... -strict enable strict
mode.
... -continuations enable experimental support for continuations and set the optimization level to -1 to force interpretation
mode.
...And 3 more matches
Introduction to the JavaScript shell
running the javascript shell the shell offers two
modes of operation.
... after following the build documentation and installing the built shell using make install, you can run the shell in interactive
mode using the command: js [ if you get " symbol lookup error: ./js: undefined symbol: pr_setcurrentthreadname" e.g.
... -i enables interactive
mode.
...And 3 more matches
nsIAccessibleEvent
event_contexthelp_start 0x0020 0x001d a window has entered context-sensitive help
mode.
... event_contexthelp_end 0x0021 0x001e a window has exited context-sensitive help
mode.
... event_dragdrop_start 0x0022 0x001f an application is about to enter drag-and-drop
mode.
...And 3 more matches
nsICacheSession
inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void asyncopencacheentry(in acstring key, in nscacheaccess
mode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring key, in nscacheaccess
mode accessrequested, in boolean blocking
mode); void doomentry(in acstring key, in nsicachelistener listener); attributes attribute type description doomentriesifexpired prbool expired...
...if false, expired entries will be returned (useful for offline
mode and clients, such as http, that can update the valid lifetime of cached content).
...void asyncopencacheentry( in acstring key, in nscacheaccess
mode accessrequested, in nsicachelistener listener, [optional] in boolean nowait ); parameters key the key for cache entry.
...And 3 more matches
Plug-in Development Overview - Plugins
the plug-in can select one of these transmission
modes: normal
mode: the browser sends the stream data sequentially to the plug-in as the data becomes available.
... random-access
mode: the browser allows the plug-in to request specific ranges of bytes from anywhere in the stream.
... this
mode requires server support.
...And 3 more matches
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane
mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane
mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspect...
...the following image shows 3-pane
mode: as you can see, the css pane has moved into the center of the inspector.
... layout view the layout view displays the box
model of the page.
...And 3 more matches
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.
...And 3 more matches
Document.fullscreenEnabled - Web APIs
the read-only fullscreenenabled property on the document interface indicates whether or not full-screen
mode is available.
... full-screen
mode is available only for a page that has no windowed plug-ins in any of its documents, and if all <iframe> elements which contain the document have their allowfullscreen attribute set.
... 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.
...And 3 more matches
HTMLOutputElement - Web APIs
modes this element behaves in one of two
modes: default
mode and value
mode.
... default
mode initially, the element is in default
mode, and so the contents of the element represent both the value of the element and its default value.
... if the element is in default
mode when the descendants of the element are changed in any way, the defaultvalue property is set to the value of the textcontent property.
...And 3 more matches
Basic concepts - Web APIs
indexeddb is built on a transactional database
model.
... this transaction
model is really useful when you consider what might happen if a user opened two instances of your web app in two different tabs simultaneously.
...you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush
mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
...And 3 more matches
MediaTrackConstraints - Web APIs
for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facing
mode or groupid.
... properties of image tracks whitebalance
mode a string specifying one of "none", "manual", "single-shot", or "continuous".
... exposure
mode a string specifying one of "none", "manual", "single-shot", or "continuous".
...And 3 more matches
Node.appendChild() - Web APIs
living standard no change from document object
model (dom) level 3 core specification.
... document object
model (dom) level 3 core specificationthe definition of 'node.appendchild()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
...And 3 more matches
PannerNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance.
... pannernode.distance
model an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.
... pannernode.panning
model an enumerated value determining which spatialisation algorithm to use to position the audio in 3d space.
...And 3 more matches
Request() - Web APIs
if this object has a request.
mode of navigate, the
mode value is converted to same-origin.
...
mode: the
mode you want to use for the request, e.g., cors, no-cors, same-origin, or navigate.
... cache: the cache
mode you want to use for the request.
...And 3 more matches
SVGFEConvolveMatrixElement - Web APIs
" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edge
mode_unknown 0 the type is not one of predefined types.
... svg_edge
mode_duplicate 1 corresponds to the duplicate value.
... svg_edge
mode_wrap 2 corresponds to the wrap value.
...And 3 more matches
Text.splitText() - Web APIs
living standard no change from document object
model (dom) level 3 core specification.
... document object
model (dom) level 3 core specificationthe definition of 'text.splittext' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
...And 3 more matches
Adding 2D content to a WebGL context - Web APIs
that position is then multiplied by two 4x4 matrices we provide called uprojectionmatrix and u
modelviewmatrix; gl_position is set to the result.
... // vertex shader program const vssource = ` attribute vec4 avertexposition; uniform mat4 u
modelviewmatrix; uniform mat4 uprojectionmatrix; void main() { gl_position = uprojectionmatrix * u
modelviewmatrix * avertexposition; } `; it's worth noting that we're using a vec4 attribute for the vertex position, which doesn't actually use a 4-component vector; that is, it could be handled as a vec2 or vec3 depending on the situation.
...bute and uniform locations are specific to a single shader program we'll store them together to make them easy to pass around const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), }, uniformlocations: { projectionmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'),
modelviewmatrix: gl.getuniformlocation(shaderprogram, 'u
modelviewmatrix'), }, }; creating the square plane before we can render our square plane, we need to create the buffer that contains its vertex positions and put the vertex positions in it.
...And 3 more matches
Starting up and shutting down a WebXR session - Web APIs
first among these is that use of immersive-vr
mode—which entirely replaces the user's view of the world—requires that the xr-spatial-tracking feature policy be in place.
... confirming the session type you need is available before trying to create a new webxr session, it's often wise to first check to see if the user's hardware and software support the presentation
mode you wish to use.
... to find out if a given
mode is supported, simply call the xrsystem method issessionsupported().
...And 3 more matches
XRInputSource.targetRaySpace - Web APIs
these values, interpreted in the context of the input source's targetray
mode, can be used both to fully interpret the device as an input source.
... usage notes all input sources—regardless of their targetray
mode—have a valid targetrayspace.
... the exact meaning of this space varies, however, depending on the
mode: every gaze input (targetray
mode value of gaze), shares the same xrspace object as their target ray space, since the gaze input comes from the viewer's head.
...And 3 more matches
XRSystem - Web APIs
methods in addition to inheriting methods from its parent interface, eventtarget, the xrsystem interface includes the following methods: issessionsupported() returns a promise which resolves to true if the browser supports the given xrsession
mode.
... resolves to false if the specified
mode isn't supported.
... requestsession() returns a promise that resolves to a new xrsession with the specified xrsession
mode.
...And 3 more matches
:fullscreen - CSS: Cascading Style Sheets
the :fullscreen css pseudo-class matches every element which is currently in full-screen
mode.
... if multiple elements have been put into full-screen
mode, this selects them all.
... examples in this example, the color of a button is changed depending on whether or not the document is in full-screen
mode.
...And 3 more matches
forced-colors - CSS: Cascading Style Sheets
the forced-colors css media 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.
... 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.
...And 3 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
note that grid is indexed according to the writing
mode of the document.
...we will learn more about the interaction between writing
modes and grids in a later guide.
...it may help to realize that this is due to grid using the flow-relative directions defined in the css writing
modes specification.
...And 3 more matches
Using media queries - CSS: Cascading Style Sheets
print intended for paged material and documents viewed on a screen in print preview
mode.
... display-
mode the display
mode of the application, as specified in the web app manifest's display member defined in the web app manifest spec.
...for instance, the following rule will apply its styles if the user's device has either a minimum height of 680px or is a screen device in portrait
mode: @media (min-height: 680px), screen and (orientation: portrait) { ...
...And 3 more matches
margin-left - CSS: Cascading Style Sheets
auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout
mode that is used.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout
mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout
mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout
mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
...And 3 more matches
margin-right - CSS: Cascading Style Sheets
auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout
mode that is used.
...this table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-table any static or relative 0 inline layout
mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
... block layout
mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout
mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto.
...And 3 more matches
mask-border - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: mask-border-
mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat |
mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
... <'mask-border-
mode'> defines whether the source image is treated as a luminance mask or alpha mask.
... see mask-border-
mode.
...And 3 more matches
text-underline-position - CSS: Cascading Style Sheets
left in vertical writing-
modes, this keyword forces the line to be placed on the left side of the text.
... in horizontal writing-
modes, it is a synonym of under.
... right in vertical writing-
modes, this keyword forces the line to be placed on the right side of the text.
...And 3 more matches
<input type="password"> - HTML: Hypertext Markup Language
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, input
mode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password.
... <label for="userpassword">password: </label> <input id="userpassword" type="password" required> <input type="submit" value="submit"> specifying an input
mode if your recommended (or required) password syntax rules would benefit from an alternate text entry interface than the standard keyboard, you can use the input
mode attribute to request a specific one.
... <label for="pin">pin: </label> <input id="pin" type="password" input
mode="numeric"> setting length requirements as usual, you can use the minlength and maxlength attributes to establish minimum and maximum acceptable lengths for the password.
...And 3 more matches
JavaScript technologies overview - JavaScript
one of them is the core language (ecmascript), another is the collection of the web apis, including the dom (document object
model).
... a prototype-based inheritance mechanism built-in objects and functions (json, math, array.prototype methods, object introspection methods, etc.) strict
mode browser support as of october 2016, the current versions of the major web browsers implement ecmascript 5.1 and ecmascript 2015, but older versions (still in use) implement ecmascript 5 only.
... the core of the dom the document object
model (dom) is a cross-platform, language-independent convention for representing and interacting with objects in html, xhtml and xml documents.
...And 3 more matches
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated - JavaScript
the javascript strict
mode-only exception "applying the 'delete' operator to an unqualified name is deprecated" occurs when variables are attempted to be deleted using the delete operator.
... message syntaxerror: calling delete on expression not allowed in strict
mode (edge) syntaxerror: applying the 'delete' operator to an unqualified name is deprecated (firefox) syntaxerror: delete of an unqualified identifier in strict
mode.
... (chrome) error type syntaxerror in strict
mode only.
...And 3 more matches
Transport Layer Security - Web security
once parameters and a data exchange
mode where application data, such http, is exchanged.
... tls 1.3 supports forward-secure
modes only, unless the connection is resumed or it uses a pre-shared key.
...these cipher suites all use
modern authenticated encryption with associated data (aead) algorithms.
...And 3 more matches
Content Processes - Archive of obsolete content
the final section explains why the sdk still uses the notion of content scripts and message passing, even though the multiprocess
model for which they were designed never materialized.
... content scripts when the sdk was first designed, firefox was being refactored towards a multiprocess
model.
... in this
model, the ui would be rendered in one process (called the chrome process), whereas each tab and each add-on would run in their own dedicated process (called content and add-on processes, respectively).
...And 2 more matches
Index of archived content - Archive of obsolete content
ul elements with xbl getting started with firefox extensions handling preferences intercepting page loads introduction javascript object management local storage mozilla documentation roadmap observer notifications setting up a development environment the box
model the essentials of an extension useful mozilla community sites user notifications and alerts xpcom objects performance best practices in extensions search extension tutorial (draft) security best practices in extensions session store api setti...
...on techniques monitoring downloads mozilla application framework mozilla application framework in detail mozilla crypto faq mozprocess mozprofile mozrunner nsc_setpin nanojit lir new security
model for web services new skin notes overview of how downloads work plug-n-hack plug-n-hack get involved plug-n-hack phase1 plug-n-hack phase2 plug-n-hack tools supported plugin architecture porting nspr to unix platforms priority content ...
...ger detailed design space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing
mode table cellmap table cellmap - border collapse table layout regression tests table layout strategy tamarin abcasm tamarin acceptance testing abc assembler tests actionscript acceptance tests tamarin...
...And 2 more matches
Venkman Introduction - Archive of obsolete content
this quick stop
mode reflects a common scenario in javascript debugging, which is to inspect and debug scripts while they are running, as on a page where elements are moved around dynamically with dhtml.
... the continue button to the right of the stop button dismisses the stop
mode and specifies that scripts should be executed normally, without pausing as each statement is executed.
... the pretty print button toggles pretty print
mode.
...And 2 more matches
Introduction to XUL - Archive of obsolete content
this linkage can be accomplished by including javascript in the xul, or by application code which walks the content
model after it has been built from xul, and hooks up event listeners.
...the resulting ui will be created using an xml content
model.
... a xul content
model is generated from *.xul files.
...And 2 more matches
XUL Template Primer - Bindings - Archive of obsolete content
example to illustrate how <bindings> work, we'll examine this xul document, which builds a simple content
model an rdf/xml file.
... we'll use a the following data
model to illustrate how bindings work.
...<rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> </rdf:li> </rdf:seq> </nc:friends> </rdf:description> <rdf:description id="home" nc:street="437 hoffman"/> <rdf:description id="doghouse" nc:street="435 hoffman"/> </rdf:rdf> the rdf
model that this file creates can be represented with the following graph.
...And 2 more matches
NPAPI plugin reference - Archive of obsolete content
npanycallbackstruct contains information required during embedded
mode printing.
... npembedprint substructure of npprint that contains platform-specific information used during embedded
mode printing.
... npfullprint substructure of npprint that contains platform-specific information used during full-page
mode printing.
...And 2 more matches
Supporting private browsing in plugins - Archive of obsolete content
firefox 3.5 introduced private browsing, a
mode in which potentially private information is not recorded in any way.
... it also introduced a mechanism by which plugins can determine whether or not private browsing
mode is in effect.
... plugins should be updated to monitor the state of private browsing
mode and only save private information when private browsing is disabled.
...And 2 more matches
Using the W3C DOM - Archive of obsolete content
some browsers have non-standard properties, such as internet explorer's document.all[], that are not part of the w3c document object
model (dom) standards and may cause javascript errors in standards-compliant browsers.
... the w3c document object
model provides interfaces dom elements to scriptable objects.
... w3c dom standards are well supported by
modern browsers, however the standards are moving target so support for newer features should be tested before use.
...And 2 more matches
XForms Custom Controls - Archive of obsolete content
we will also show you how to create custom controls that work with the xforms
model and are automatically updated just like xforms controls.
...02/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www.w3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-integer'); } advanced xforms controls there may be times where you need a control that is very specific to your task, but you also want it to work with xforms
models and instance nodes just like a regular xforms control.
... if aforceupdate is true then the * xforms
model will rebuild/recalculate/revalidate/refresh.
...And 2 more matches
Mozilla XForms Specials - Archive of obsolete content
instead of using digest('abc', 'sha-1') explicitly use the third parameter (the results are equal): digest('abc', 'sha-1', 'base64') (limitation tracked in bug 477857) extensions enumerating instances the standardized nsixforms
modelelement does not allow one to enumerate over all possible instances, but only to retrieve instances by their name.
... in the mozilla xforms extension we added a getinstancedocuments() function to the
model which returns all the
model's instance documents.
... this is documented in nsixformsns
modelelement.
...And 2 more matches
XForms Repeat Element - Archive of obsolete content
example <
model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </
model> <repeat id="lineset" nodeset="/my:lines/my:line"> <input ref="my:price"> <label>line item</label> </input> <input ref="@name"> <label>name</label> </input> </re...
...to accommodate this, xforms 1.0 defines an alternative syntax that is functionally equivalent to the repeat element, using the following attributes: repeat-
model repeat-bind repeat-nodeset repeat-startindex repeat-number additionally, when using xforms action setindex, its repeat attribute (which contains an idref) can point to any element carrying these repeat attributes.
... example <xforms:
model id="i_
model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:
model> <div xforms:repeat-nodeset="val"> this is the inline cont...
...And 2 more matches
RDF in Fifty Words or Less - Archive of obsolete content
first, rdf is a graph-based
model for describing internetresources (like web pages and email messages), and how these resources relate to one another.
...to a mozilla developer, it means that the rdf data
model (the "graph") can be used as a mechanism for integrating and organizing internet resources.
... the rdf graph provides a perfect data
model upon which to build a "universal" bookmarking service as described above: the graph can contain pointers to arbitrary resources and can group them in just about any way that you can imagine.
...And 2 more matches
Anatomy of a video game - Game development
it helps beginners to the
modern game development arena understand what is required when building a game and how web standards like javascript lend themselves as tools.
...this once-per-frame
model is implemented in something called a main loop.
...
modern javascript — as described in the next sections — thankfully makes it easy to develop an efficient, execute-once-per-frame main loop.
...And 2 more matches
GLSL Shaders - Game development
you should: make sure you are using a
modern browser with good webgl support, such as the latest firefox or chrome.
... the vertex shader code let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix *
modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } the resulting gl_position is calculated by multiplying the
model-view and the projection matrices by each vector to get the final vertex position, in each case.
... note: you can learn more about
model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it.
...And 2 more matches
Mobile accessibility - Learn web development
accessibility on mobile devices the state of accessibility — and support for web standards in general — is good in
modern mobile devices.
...
modern mobile browsers tend to have good support for wai-aria, too.
... to turn it on, look up what phone
model and android version you have, and then look up where the talkback menu is.
...And 2 more matches
CSS values and units - Learn web development
the standard color system available in
modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) let's have a look at some of the ways in which we can specify colors in css.
... note: at some point
modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same.
... hsl and hsla values slightly less well-supported than rgb is the hsl color
model (not supported on old versions of ie), which was implemented after much interest from designers.
...And 2 more matches
Responsive design - Learn web development
note: the screenshots above are taken using the responsive design
mode in firefox devtools.
...
modern css layout methods are inherently responsive, and we have new things built into the web platform to make designing responsive sites easier.
...it is likely that you will come across websites using this approach in your work, so it is worth understanding it, even though you would not build a
modern site using a float-based flexible grid.
...And 2 more matches
Advanced form styling - Learn web development
rance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast
mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="checkbox"]:disabled { border-color: black; background: #d...
... as you can see, we've done fairly well at getting these to look uniform across
modern browsers.
... selects and datalists in
modern browsers, selects and datalists are generally not too bad to style provided you don't want to vary the look and feel too much from the defaults.
...And 2 more matches
Client-side storage - Learn web development
previous overview: client-side web apis
modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
...most major
modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser.
...however, this does not mean cookies are completely useless on the
modern-day web — they are still used commonly to store data related to user personalization and state, e.g.
...And 2 more matches
Manipulating documents - Learn web development
this is usually done by using the document object
model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object.
... the document object
model the document currently loaded in each one of your browser tabs is represented by a document object
model.
...document.queryselector() is the recommended
modern approach, which is convenient because it allows you to select elements using css selectors.
...And 2 more matches
Starting our Svelte Todo list app - Learn web development
clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development
mode.
... a file named src/components/todos.svelte with the following content: <h1>svelte to-do list</h1> change the title element in public/index.html to contain the text svelte to-do list: <title>svelte to-do list</title> open src/app.svelte and replace its contents with the following: <script> import todos from './components/todos.svelte' </script> <todos /> in development
mode, svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a name prop being specified when we instantiate the app component inside src/main.js, which isn't used inside app.
...n 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="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing
mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> ...
...And 2 more matches
Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of
modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.
... many
modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.
...adding a new todo form: vue events, methods, and
models we now have sample data in place and a loop that takes each bit of data and renders it inside a todoitem in our app.
...And 2 more matches
Introduction to Layout in Mozilla
thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame widget native window [0..1] per view, owned by view key data structures the document owns the content
model, and one or more presentations exposed programmatically via dom apis the presentation owns the frame hierarchy frames own the style contexts, views, widgets presentation has media type, dimensions, etc.
... may not be directly manipulated detailed walk-through setting up content
model construction frame construction style resolution reflow painting setting up assume basic knowledge of embedding and network apis (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a nshtmldocument object, invokes startdocumentload.
... creates a parser, returned as nsistreamlistener back to the docshell creates a content sink, which is linked to the parser and the document creates a documentviewerimpl object, which is returned as nsicontentviewer back to the docshell documentviewerimpl creates pres context and pres shell content
model construction content arrives from network via nsistreamlistener::ondataavailable parser tokenizes & processes content; invokes methods on nsicontentsink with parser node objects some buffering and fixup occurs here opencontainer, closecontainer, addleaf content sink creates and attaches content nodes using nsicontent interface content sink maintains stack of “live” elements more buffering and...
...And 2 more matches
L20n HTML Bindings
monolingual
mode l20n can also operate in the so-called monolingual
mode, when there is only one locale available.
...there is no language negotiation nor locale fallback possible in the monolingual
mode.
... the monolingual
mode may be useful when you first start a new project, when you want to test something quickly or when using server-side language negotiation.
...And 2 more matches
Optimizing Applications For NSPR
in the combined (mxn)
model, which includes nt, irix (sprocs), and pthreads-user, the primordial thread is always a local thread.
... the general rules of 16 bit large
model memory restrictions apply to applications using nspr on windows 3.1.
... 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.
...And 2 more matches
JSAPI User Guide
first, the failure
mode is pretty severe.
... spidermonkey is designed to support custom, application-defined security
models.
... for example, the firefox browser has a complex and powerful security
model.
...And 2 more matches
Shell global objects
the name is one of: maxbytes maxmallocbytes gcbytes gcnumber
mode unusedchunks totalchunks slicetimebudget markstacklimit highfrequencytimelimit highfrequencylowlimit highfrequencyhighlimit highfrequencyheapgrowthmax highfrequencyheapgrowthmin lowfrequencyheapgrowth dynamicheapgrowth dynamicmarkslice allocationthreshold minemptychunkcount maxemptychunkcount compactingenabled refreshframeslicesenabled relazifyfunctions(...)...
...some of these
modes can be set simultaneously, by passing multiple level options, e.g.
... "2;4" will activate both
modes 2 and 4.
...And 2 more matches
nsIAppStartup
ndow(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.9.1 void enterlastwindowclosingsurvivalarea(); void exitlastwindowclosingsurvivalarea(); void getstartupinfo(); void hidesplashscreen(); obsolete since gecko 1.9.1 void initialize(in nsisupports nativeappsupportorsplashscreen); obsolete since gecko 1.9.1 void quit(in pruint32 a
mode); void restartinsafe
mode(in pruint32 aquit
mode); void run(); attributes attribute type description interrupted boolean true if the startup process was interrupted by an interactive prompt.
...obsolete since gecko 1.9.1 constants the following flags may be passed as the a
mode parameter to the quit() method.
... void quit( in pruint32 a
mode ); parameters a
mode this parameter modifies how the application is shutdown, and it is constructed from the constants defined above.
...And 2 more matches
nsILocalFile
file openansifiledesc(in string
mode); native code only!
... prfiledescstar opennsprfiledesc(in long flags, in long
mode); native code only!
... file openansifiledesc( in string
mode ); parameters
mode an ansi file open
mode string, which will be passed to fopen().
...And 2 more matches
nsINavHistoryResultObserver
method overview void batching(in boolean atoggle
mode); void containerclosed(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainerresultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstatechanged(in nsinavhistorycontainerresultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); ...
...ainerresultnode aparentnode, in nsinavhistoryresultnode aoldnode, in nsinavhistoryresultnode anewnode, in unsigned long aindex); void nodetagschanged(in nsinavhistoryresultnode anode); void nodetitlechanged(in nsinavhistoryresultnode anode, in autf8string anewtitle); void nodeurichanged(in nsinavhistoryresultnode anode, in autf8string anewuri); void sortingchanged(in unsigned short sorting
mode); attributes attribute type description result nsinavhistoryresult the nsinavhistoryresult this observer monitors.
...void batching( in boolean atoggle
mode ); parameters atoggle
mode specify true to start batch
mode or false to finish the batch.
...And 2 more matches
nsITreeView
text(in long row, in nsitreecolumn col); astring getcellvalue(in long row, in nsitreecolumn col); astring getcolumnproperties(in nsitreecolumn col, in nsisupportsarray properties obsolete since gecko 22); astring getimagesrc(in long row, in nsitreecolumn col); long getlevel(in long index); long getparentindex(in long rowindex); long getprogress
mode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean iseditable(in long row, i...
... getprogress
mode() the progress
mode for a given cell.
...see the constants section for possible
modes.
...And 2 more matches
nsIXPConnect
tr anewscope); obsolete since gecko 1.9.1 nsixpconnectjsobjectholder reparentwrappednativeiffound(in jscontextptr ajscontext, in jsobjectptr ascope, in jsobjectptr anewparent, in nsisupports acomobj); void restorewrappednativeprototype(in jscontextptr ajscontext, in jsobjectptr ascope, in nsiclassinfo aclassinfo, in nsixpconnectjsobjectholder aprototype); void setdebug
modewhenpossible(in prbool
mode); native code only!
... void restorewrappednativeprototype( in jscontextptr ajscontext, in jsobjectptr ascope, in nsiclassinfo aclassinfo, in nsixpconnectjsobjectholder aprototype ); parameters ajscontext missing description ascope missing description aclassinfo missing description aprototype missing description exceptions thrown missing exception missing description native code only!setdebug
modewhenpossible when we place the browser in js debug
mode, there can't be any js on the stack.
... this is because we currently activate debug
mode on all scripts in the jsruntime when the debugger is activated.
...And 2 more matches
Mozilla
displaying places information using views views are one component of the places
model-view-controller design.
... gecko's "almost standards"
mode "almost standards" rendering
mode is exactly the same as "standards"
mode in all details save one, where it works like "quirks"
mode: the height calculations for line boxes and some of the inline elements in them.
... mozilla quirks
mode behavior the following is a rough list of the differences that exist between mozilla's standards
mode and quirks
mode behavior.
...And 2 more matches
Structures - Plugins
structure summary npanycallbackstruct contains information required during embedded
mode printing.
... npembedprint substructure of npprint that contains platform-specific information used during embedded
mode printing.
... npfullprint substructure of npprint that contains platform-specific information used during full-page
mode printing.
...And 2 more matches
Migrating from Firebug - Firefox Developer Tools
inspect box
model in firebug the box
model can be inspected via the layout side panel.
... in the devtools the box
model is part of the computed side panel.
... both tools highlight the different parts of the box
model within the page when hovering them in the box
model view.
...And 2 more matches
AudioNodeOptions - Web APIs
syntax var audionodeoptions = { "channelcount" : 2, "channelcount
mode" : "max", "channelinterpretation" : "discrete" } properties channelcount optional represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node.
... (see audionode.channelcount for more information.) its usage and precise definition depend on the value of audionodeoptions.channelcount
mode.
... channelcount
mode optional represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
...And 2 more matches
CharacterData - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'characterdata' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
... document object
model (dom) level 2 core specificationthe definition of 'characterdata' in that specification.
...And 2 more matches
Document: fullscreenchange event - Web APIs
the fullscreenchange event is fired immediately after the browser switches into or out of full-screen
mode.
... bubbles yes cancelable no interface event event handler property onfullscreenchange the event is sent to the element that is transitioning into or out of full-screen
mode, and this event then bubbles up to the document.
... to find out whether the element is entering or exiting full-screen
mode, check the value of documentorshadowroot.fullscreenelement: if this value is null then the element is exiting full-screen
mode, otherwise it is entering full-screen
mode.
...And 2 more matches
EventTarget.addEventListener() - Web APIs
the event propagation
mode determines the order in which elements receive the event.
... if you'd prefer, you can use a third-party library like
modernizr or detect it to do this test for you.
...</table> the value of this within logid() is a reference to the global object window (or undefined in the case of strict
mode.
...And 2 more matches
HTMLImageElement.crossOrigin - Web APIs
syntax htmlimageelement.crossorigin = crossorigin
mode; let crossorigin
mode = htmlimageelement.crossorigin; value a domstring of a keyword specifying the cors
mode to use when fetching the image resource.
... if you don't specify crossorigin, the image is fetched without cors (the fetch no-cors
mode).
... permitted values are: anonymous requests by the <img> element have their
mode set to cors and their credentials
mode set to same-origin.
...And 2 more matches
KeyboardEvent: code values - Web APIs
0x0065 "f14" "f18" 0x0066 "f15" "f19" 0x0067 "f16" "f20" 0x0068 "f17" "f21" 0x0069 "f18" "f22" 0x006a "f19" "f23" 0x006b "f20" "f24" 0x006c "f21" "" 0x006d "f22" "" 0x006e "f23" "" 0x006f "unidentified" "" 0x0070 "kana
mode" "" 0x0071 (hanja key without korean keyboard layout) "lang2" "" 0x0072 (han/yeong key without korean keyboard layout) "lang1" "" 0x0073 "intlro" "" 0x0074, 0x0075 "unidentified" "" 0x0076 "f24" "" 0x0077, 0x0078 "unidentified" "" 0x0079 "convert" "" 0x007a ...
... kvk_f5 (0x60) "f5" "f5" kvk_f6 (0x61) "f6" "f6" kvk_f7 (0x62) "f7" "f7" kvk_f3 (0x63) "f3" "f3" kvk_f8 (0x64) "f8" "f8" kvk_f9 (0x65) "f9" "f9" kvk_jis_eisu (0x66) "lang2" "" (no events fired actually) kvk_f11 (0x67) "f11" "f11" kvk_jis_kana (0x68) "lang1" "kana
mode" (no events fired actually) kvk_f13 (0x69) "f13" "f13" kvk_f16 (0x6a) "f16" "f16" kvk_f14 (0x6b) "f14" "f14" kvk_f10 (0x6d) "f10" "f10" kvk_f12 (0x6f) "f12" "f12" kvk_f15 (0x71) "f15" "f15" kvk_help (0x72) "help" "insert" kvk_home (0x73) "home" "home" kvk_pageup (0x74) ...
...numpad0" "numpad0" 0x005b "numpaddecimal" "numpaddecimal" 0x005c, 0x005d "unidentified" "" 0x005e "intlbackslash" "intlbackslash" 0x005f "f11" "f11" 0x0060 "f12" "f12" 0x0061 "intlro" "intlro" 0x0062, 0x0063 "unidentified" "" 0x0064 "convert" "convert" 0x0065 "kana
mode" "kana
mode" 0x0066 "nonconvert" "nonconvert" 0x0067 "unidentified" "" 0x0068 "numpadenter" "numpadenter" 0x0069 "controlright" "controlright" 0x006a "numpaddivide" "numpaddivide" 0x006b "printscreen" "printscreen" 0x006c "altright" "altright" 0x006d "unidentified" "" ...
...And 2 more matches
Lock - Web APIs
the lock interface of the the web locks api provides the name and
mode of a previously requested lock, which is received in the callback to lockmanager.request().
... properties lock.
mode read only returns the access
mode passed to lockmanager.request() when the lock was requested.
... the
mode is either "exclusive" (the default) or "shared".
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facing
mode"]) { // we're missing needed properties, so handle that error.
... } else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: 1.777777778, framerate: { max: 30 }, facing
mode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found are supported (width, height, framerate, and facing
mode), we set up constraints which request a width no smaller than 640 and no larger than 1920 (but preferably 1920), a height no smaller than 400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater than ...
...if the width, height, framerate, or facing
mode constraints can't be met, the promise returned by applyconstraints() will be rejected.
...And 2 more matches
Storage API - Web APIs
box
modes the actual data storage within each site storage unit is called its box.
... each site storage unit has exactly one box into which all of its data is placed, and has a box
mode that describes the data retention policy for that box.
... there are two
modes: "best-effort" the user agent will try to retain the data contained in the box for as long as it can, but will not warn users if storage space runs low and it becomes necessary to clear the box in order to relieve the storage pressure.
...And 2 more matches
Lighting in WebGL - Web APIs
instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting
model or if you'd like to see a webgl based explanation see this artcle.
... for our purposes, we're going to simplify the lighting
model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene.
....enablevertexattribarray( programinfo.attriblocations.vertexnormal); } finally, we need to update the code that builds the uniform matrices to generate and deliver to the shader a normal matrix, which is used to transform the normals when dealing with the current orientation of the cube in relation to the light source: const normalmatrix = mat4.create(); mat4.invert(normalmatrix,
modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); ...
...And 2 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
note: this example makes use of
modern javascript features including async functions and the await expression.
... in the examples below, we'll refer to the peer which is turning "hold"
mode on and off as the local peer and the user being placed on hold as the remote peer.
... activating hold
mode local peer when the local user decides to enable hold
mode, the enablehold() method below is called.
...And 2 more matches
WebXR application life cycle - Web APIs
if it's not supported, disable any user interface used to activate xr features and abort any attempts to enter xr
mode.
... call navigator.xr.issessionsupported(), specifying the webxr experience
mode you want to provide: inline, immersive-vr, or immersive-ar, in order to determine whether or not the type of session you wish to provide is available.
... when the user requests the activation of webxr functionality by engaging with the user interface enabled above, request an xrsession using the desired
mode.
...And 2 more matches
Web Animations API Concepts - Web APIs
the two
models: timing and animation the web animations api runs on top of two
models, one that handles time—timing—and one that handles visual change over time—animation.
... the timing
model keeps track of how far along a set timeline we've come.
... the animation
model determines what the animated object should look like at any given time.
...And 2 more matches
WheelEvent() - Web APIs
wheeleventinit optional is a wheeleventinit dictionary, having the following fields: "deltax", optional and defaulting to 0.0, is a double representing the horizontal scroll amount in the delta
mode unit.
... "deltay", optional and defaulting to 0.0, is a double representing the vertical scroll amount in the delta
mode unit.
... "deltaz", optional and defaulting to 0.0, is a double representing the scroll amount for the z-axis in the delta
mode unit.
...And 2 more matches
WindowOrWorkerGlobalScope.fetch() - Web APIs
mode the
mode you want to use for the request, e.g., cors, no-cors, or same-origin.
... cache the cache
mode you want to use for the request.
... redirect the redirect
mode to use: follow (automatically follow redirects), error (abort with an error if a redirect occurs), or manual (handle redirects manually).
...And 2 more matches
XRRigidTransform.inverse - Web APIs
examples in this example, the
model view matrix for an object is computed by taking the view matrix and multiplying it by the object's pose matrix.
... let
modelviewmatrix = mat4.create(); for (let view of pose.view) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* ...
... */ mat4.multiply(
modelviewmatrix, view.transform.inverse.matrix, objectmatrix); gl.uniformmatrix4fv(programinfo.uniformlocations.
modelviewmatrix, false,
modelviewmatrix); /* ...
...And 2 more matches
@font-face - CSS: Cascading Style Sheets
since firefox 61 (and in other
modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style a font-style value.
... since firefox 61 (and in other
modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value.
... since firefox 61 (and in other
modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value.
...And 2 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
item1 { grid-area: a; margin-left: auto; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> you can see how the item is aligned by using the firefox grid highlighter: alignment and writing
modes in all of these examples i have been working in english, which is a left-to-right language.
... css grid layout, and the box alignment specification are designed to work with writing
modes in css.
... setting auto margins, using margin-right or margin-left however, or absolutely positioning items using the top, right, bottom and left offsets would not honor writing
modes.
...And 2 more matches
Inline formatting context - CSS: Cascading Style Sheets
inline boxes are laid out one after the other, in the direction sentences run in the writing
mode in use: in a horizontal writing
mode, boxes are laid out horizontally, starting on the left.
... in a vertical writing
mode they would be laid out vertically starting at the top.
...the boxes in the horizontal writing
mode run horizontally, and the vertical writing
mode boxes run vertically.
...And 2 more matches
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <div class="animation">animated box</div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast
mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast
mode, and with what color variation.
... 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.
...And 2 more matches
CSS reference - CSS: Cascading Style Sheets
--webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-
modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-
modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-
mode>block-sizeblur()bor...
...:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-
modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-
modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmi...
...n-width (@viewport)min-zoom (@viewport)minmax()mix-blend-
modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-to...
...And 2 more matches
Adding captions and subtitles to HTML5 video - Developer guides
initial setup as with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button: var subtitles = document.getelementbyid('subtitles'); we also initially turn off all subtitles, in case the browser turns any of them on by default: for (var i = 0; i < video.texttracks.length; i++) { video.texttracks[i].
mode = 'hidden'; } the video.texttracks property contains an array of all the text tracks attached to the video.
... we loop through each one and set its
mode to hidden.
...ons[i].setattribute('data-state', 'inactive'); }); // find the language to activate var lang = this.getattribute('lang'); for (var i = 0; i < video.texttracks.length; i++) { // for the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off if (video.texttracks[i].language == lang) { video.texttracks[i].
mode = 'showing'; this.setattribute('data-state', 'active'); } else { video.texttracks[i].
mode = 'hidden'; } } subtitlesmenu.style.display = 'none'; }); subtitlemenubuttons.push(button); return listitem; } this function builds the required <li> and <button> elements, and returns them so they can be added to the subtitles menu lis...
...And 2 more matches
Content categories - Developer guides
a few other elements belong to this category, but only if a specific condition is fulfilled: <area>, if it is a descendant of a <map> element <link>, if the itemprop attribute is present <meta>, if the itemprop attribute is present <style>, if the scoped attribute is present sectioning content elements belonging to the sectioning content
model create a section in the current outline that defines the scope of <header> elements, <footer> elements, and heading content.
... do not confuse this content
model with the sectioning root category, which isolates its content from the regular outline.
...elements whose
model is flow content or phrasing content should have at least one node which is palpable.
...And 2 more matches
User input and controls - Developer guides
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
...and the fullscreen api helps you in displaying your app in fullscreen
mode.
... fullscreen you might need to present an element of your application (such as a <video>, for example) in fullscreen
mode.
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
the primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color
modes.
... only light indicates that the document only supports light
mode, with a light background and dark foreground colors.
... by specification, only dark is not valid, because forcing a document to render in dark
mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light
mode if not otherwise configured.
...And 2 more matches
HTML documentation index - HTML: Hypertext Markup Language
19 input
mode attribute, editing, forms, global attributes, html, input, reference, text, web, contenteditable, global, input
mode, text input the input
mode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
...most
modern browsers implement this by surrounding the text in quotation marks.
...it participates in the table
model.
...And 2 more matches
Classes - JavaScript
strict
mode the body of a class is executed in strict
mode, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ecmascript.
...this behavior will be the same even if the "use strict" directive isn't present, because code within the class body's syntactic boundary is always executed in strict
mode.
... class animal { speak() { return this; } static eat() { return this; } } let obj = new animal(); obj.speak(); // the animal object let speak = obj.speak; speak(); // undefined animal.eat() // class animal let eat = animal.eat; eat(); // undefined if we rewrite the above using traditional function-based syntax in non–strict
mode, then this method calls is automatically bound to the initial this value, which by default is the global object.
...And 2 more matches
SyntaxError: for-in loop head declarations may not have initializers - JavaScript
the javascript strict
mode-only exception "for-in loop head declarations may not have initializers" occurs when the head of a for...in contains an initializer expression, such as |for (var i = 0 in obj)|.
... this is not allowed in for-of loops in strict
mode.
...(chrome) error type syntaxerror in strict
mode only.
...And 2 more matches
Functions - JavaScript
hey are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example: /* declare the function 'myfunc' */ function myfunc(theobject) { theobject.brand = "toyota"; } /* * declare variable 'mycar'; * create and initialize a new object; * assign reference to it to 'mycar' */ var mycar = { brand: "honda",
model: "accord", year: 1998 }; /* logs 'honda' */ console.log(mycar.brand); /* pass object reference to the function */ myfunc(mycar); /* * logs 'toyota' as the value of the 'brand' property * of the object, as changed to by the function.
... examples // function declaration function foo() {} // function expression (function bar() {}) // function expression x = function hello() {} if (x) { // function expression function world() {} } // function declaration function a() { // function declaration function b() {} if (0) { // function expression function c() {} } } block-level functions in strict
mode, starting with es2015, functions inside blocks are now scoped to that block.
... prior to es2015, block-level functions were forbidden in strict
mode.
...And 2 more matches
Object.freeze() - JavaScript
any attempt to do so will fail, either silently or by throwing a typeerror exception (most commonly, but not exclusively, when in strict
mode).
...object.isfrozen(obj); // === true // now any changes will fail obj.foo = 'quux'; // silently does nothing // silently doesn't add the property obj.quaxxor = 'the friendly duck'; // in strict
mode such attempts will throw typeerrors function fail(){ 'use strict'; obj.foo = 'sparky'; // throws a typeerror delete obj.foo; // throws a typeerror delete obj.quaxxor; // returns true since attribute 'quaxxor' was never added obj.sparky = 'arf'; // throws a typeerror } fail(); // attempted changes through object.defineproperty; // both statements below throw a typeerror.
... a[0] = 1; // fails silently // in strict
mode such attempt will throw a typeerror function fail() { "use strict" a[0] = 1; } fail(); // attempted to push a.push(2); // throws a typeerror the object being frozen is immutable.
...And 2 more matches
display - Web app manifests
type string mandatory no the display member is a string that determines the developers’ preferred display
mode for the website.
... the display
mode changes how much of browser ui is shown to the user and can range from browser (when the full browser window is shown) to fullscreen (when the app is full-screened).
... note: you can selectively apply css to your app based on the display
mode, using the display-
mode media feature.
...And 2 more matches
Web audio codec guide - Web media technologies
even
modest quality, high-fidelity stereo sound can use a substantial amount of disk space.
... typically, most
modern applications will use g.711 only as a fallback option, unless the limitations have specific value to their use cases.
...mpeg-1 format mp3 is generally best for music or other complex audio, while mpeg-2
mode mp3 audio is acceptable for speech and other simpler sounds.
...And 2 more matches
Codecs used by WebRTC - Web media technologies
packetization-
mode all endpoints are required to support
mode 1 (non-interleaved
mode).
... support for other packetization
modes is optional, and the parameter itself is not required to be specified.
... both the speech and general audio
modes should be supported.
...And 2 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
removes the top margin from the x-card contents so you don't end up with an unsightly gap at the top of the screen in landscape
mode.
...if you want a solution that works across general web apps, you could use the screen orientation api, and/or provide a message asking the user to rotate their screen if they are using the wrong orientation (for example, if window.innerwidth is larger than window.innerheight, assume the game is landscape
mode and show a "please rotate" message.) viewport one last problem to mention for our example app is concerned with mobile browsers and media queries.
...although they are not supported very well on older browsers such as internet explorer 6-8, this is not too much of a concern when you are creating an interface aimed at
modern devices, and they also tend to gracefully degrade.
...And 2 more matches
<feBlend> - SVG: Scalable Vector Graphics
the <feblend> svg filter primitive composes two objects together ruled by a certain blending
mode.
...the
mode is defined by the
mode attribute.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in in2
mode dom interface this element implements the svgfeblendelement interface.
...And 2 more matches
Using shadow DOM - Web Components
high-level view this article assumes you are already familiar with the concept of the dom (document object
model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an html document in the case of web documents).
...this takes as its parameter an options object that contains one option —
mode — with a value of open or closed: let shadow = elementref.attachshadow({
mode: 'open'}); let shadow = elementref.attachshadow({
mode: 'closed'}); open means that you can access the shadow dom using javascript written in the main page context, for example using the element.shadowroot property: let myshadowdom = mycustomelem.shadowroot; if you attach a shadow root to a custom element with
mode:...
... if you are attaching a shadow dom to a custom element as part of its constructor (by far the most useful application of the shadow dom), you would use something like this: let shadow = this.attachshadow({
mode: 'open'}); when you've attached a shadow dom to an element, manipulating it is a matter of just using the same dom apis as you use for the regular dom manipulation: let para = document.createelement('p'); shadow.appendchild(para); // etc.
...And 2 more matches
Connecting to Remote Content - Archive of obsolete content
it is an integral part of the
modern web, and all major browsers support it.
... .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous
mode.
...in asynchronous
mode code execution continues immediately after the send call.
... in synchronous
mode the code and user interface are blocked while waiting for a response to come back.
Mozilla Application Framework in Detail - Archive of obsolete content
xpcom, the cross platform component object
model the cross platform component object
model (xpcom) is one of the main things that makes the mozilla application environment an actual framework.
... it is a development environment that provides the following features for the cross-platform software developer: component management file abstraction object message passing memory management this component object
model makes virtually all of the functionality of gecko available as a series of components, or reusable cross-platform libraries, that can be accessed from the browser or scripted from any mozilla application.
...mozilla engineers have written and are in the process of refining a new security
model for web services that will ease the deployment of applications using web services while maintaining the security of sites inside the user's firewall.
..., including useful example installations the following snippet from an xpinstall installation gives you some idea about how easy it is to write cross-platform installations that use the mozilla browser: // register chrome registerchrome(package | delayed_chrome, getfolder("chrome","xmlterm.jar"), "content/xmlterm/"); registerchrome(skin | delayed_chrome, getfolder("chrome","xmlterm.jar"), "skin/
modern/xmlterm/"); registerchrome(locale | delayed_chrome, getfolder("chrome","xmlterm.jar"), "locale/xmlterm/"); if (getlasterror() == success) performinstall(); else { alert("error detected: "+getlasterror()); cancelinstall(); } other features a resource description framework (rdf) parser with support for creating rdf graphs programmatically or by parsing files, compositing multiple sou...
RDF Datasource How-To - Archive of obsolete content
deciding on a vocabulary the vocabulary is the set of properties that you will use to express relationships between elements (resources and literals) in your data
model.
...you may also need to choose this implementation if the data set which your datasource is
modeling is too large to fit in to memory (e.g., the entire file system structure).
...in fact, you can convert rdf to an arbitrary content
model using xul templates.
...this roots the graph in your content
model.
File object - Archive of obsolete content
file.canappend true if the file is in append
mode.
... file.canreplace true if the file is in replace
mode.
...(xxx note -- ascii might imply asciiz) file.
mode a string describing the
mode used to open the file.
...file.input, file.output, file.error or a pipeline) methods file.open() opens the file, specifying file
mode and type.
XUL Event Propagation - Archive of obsolete content
this article describes the event
model in xul and features event propagation as a way to handle events in different places in the interface.
...collectively, this process is referred to as the event
model.
... the following image describes in a very basic way how the various actors in the event
model interact with one another.
...this flexibility in the xul event
model is the focus of this article.
progressmeter - Archive of obsolete content
in addition, an indeterminate progressmeter may be created by setting the
mode attribute to undetermined.
... attributes max,
mode, value properties accessibletype, max,
mode, value examples <progressmeter
mode="determined" value="82"/> <progressmeter
mode="undetermined"/> <!-- switching
modes while the mouse is over a button --> <progressmeter
mode="determined" id="myprogress"/> <button label="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').
mode = (state) ?
...
mode type: one of the values below a determinedprogressmeter is used in cases where you know how long an operation will take.
...
mode type: string gets and sets the value of the
mode attribute.
NPFullPrint - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary substructure of npprint that contains platform-specific information used during full-page
mode printing.
... syntax typedef struct _npfullprint { npbool pluginprinted; /* true: print fullscreen */ npbool printone; /* true: print one copy */ /* to default printer */ void* platformprint; /* platform-specific */ } npfullprint; fields the data structure has the following fields: pluginprinted determines whether the plug-in prints in full-page
mode.
...the npfullprint structure is used when the
mode field of npprint is set to np_full.
... the pluginprinted field of this structure determines whether the plug-in prints in full-page
mode or not.
NPN_RequestRead - Archive of obsolete content
seekable streams are created by calling npp_newstream() with np_seek as the stype
mode.
... the plug-in can call npn_requestread() on streams that were not initially in np_seek
mode as long as the stream is inherently seekable; npn_requestread() automatically changes the
mode to np_seek.
... if the stream is not inherently seekable, the stream must have been put in np_seek
mode initially (since the browser must cache all the stream data on disk in order to access it randomly).
... if npn_requestread() is called on a stream that is not inherently seekable and not initially in
mode np_seek, it returns the error code nperr_stream_not_seekable.
NPPrint - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information the plug-in needs to print itself in full-page or embedded
mode.
... syntax typedef struct _npprint { uint16
mode; /* np_full or np_embed */ union { npfullprint fullprint; /* if
mode is np_full */ npembedprint embedprint; /* if
mode is np_embed */ } print; } npprint; fields the data structure has the following fields:
mode determines whether plug-in prints in full-page or embedded
mode.
...plug-in can optionally print in full-page
mode.
...plug-in should print in embedded
mode.
The Business Benefits of Web Standards - Archive of obsolete content
the content - markup - style;
model also lends itself very neatly to linear methods of production.
... in a ground breaking development microsoft have announced a new meta tag that can be used in sites to trigger ie 8 into web standards
mode.
... at the same time in non standards
mode existing legacy sites will still be seen as intended.
...the content will be usable but not as attractively presented as in a
modern browser.
Introduction to game development for the Web - Game development
the
modern web has quickly become a viable platform not only for creating stunning, high quality games, but also for distributing those games.
...with
modern web technologies and a recent browser, it's entirely possible to make stunning, top-notch games for the web.
... javascript javascript, the programming language used on the web, is blazing fast in
modern browsers and getting faster all the time.
... web workers workers give you the ability to spawn background threads running their own javascript code, to take advantage of
modern, multi-core processors.
Scaling - Game development
update your existing preload() function as follows: function preload() { game.scale.scale
mode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scale
mode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled.
... show_all — scales the canvas, but keeps the aspect ratio untouched, so images won't be skewed like in the previous
mode.
... resize — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced
mode.
... user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced
mode the other two lines of code in the preload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size.
Backgrounds and borders - Learn web development
borders when learning about the box
model, we discovered how borders affect the size of our box.
...-top: 1px solid black; } the individual properties for these shorthands would be: .box { border-width: 1px; border-style: solid; border-color: black; } and for the longhands: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } note: these top, right, bottom, and left border properties also have mapped logical properties that relate to the writing
mode of the document (e.g.
... in the next lesson, we will find out how the writing
mode of your document interacts with your css.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
How much does it cost to do something on the Web? - Learn web development
editors can be free (gimp, paint.net),
moderately expensive (paintshop pro, less than $100), or several hundred dollars (adobe photoshop).
... web access computer /
modem you need a computer.
... you need to upload content to a remote server (see hosting below), so you need a
modem.
...that will likely cost you a few dozen dollars, including the rent for the
modem.
Front-end web developer - Learn web development
jects covered the subjects covered are: basic setup and learning how to learn web standards and best practices (such as accessibility and cross-browser compatibility) html, the language that gives web content structure and meaning css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate
modern client-side web development.
...all you need is a computer that can run
modern web browsers, an internet connection, and a willingness to learn.
... modules cross-browser testing (25–30 hour read/exercises) accessibility (20–25 hour read/exercises)
modern tooling time to complete: 55–90 hours prerequisites it is a good idea to know html, css, and javascript before working through this section, as the tools discussed work alongside many of these technologies.
...the case study tutorials at the end of the second and third modules prepare you for grasping the essentials of
modern tooling.
The web and web standards - Learn web development
the w3c is the best known web standards body, but there are others such as the whatwg (who were responsible for the
modernization of the html language), ecma (who publish the standard for ecmascript, which javascript is based on), khronos (who publish technologies for 3d graphics, such as webgl), and others.
... overview of
modern web technologies there are a number of technologies to learn if you want to be a front-end web developer.
...examples include: the developer tools inside
modern browsers that can be used to debug your code.
... user 4 might be using a really old desktop machine that can't run
modern browsers.
Storing the information you need — Variables - Learn web development
so, let was created in
modern versions of javascript, a new keyword for creating variables that works somewhat differently to var, fixing its issues in the process.
...there is no reason to use var, unless you need to support old versions of internet explorer with your code (it doesn't support let until version 11; the
modern windows edge browser supports let just fine).
... objects in programming, an object is a structure of code that
models a real-life object.
...in
modern javascript, we have the keyword const, which lets us store values that can never be changed: const daysinweek = 7; const hoursinday = 24; const works in exactly the same way as let, except that you can't give a const a new value.
Inheritance in JavaScript - Learn web development
in addition, we present some advice on when and where you might use oojs, and look at how classes are dealt with in
modern ecmascript syntax.
... note: this
modern way of writing classes is supported in all
modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably internet explorer).
...bye for now note: under the hood, your classes are being converted into prototypal inheritance
models — this is just syntactic sugar.
...they have a series of attributes that are common to all people; in this section we'll create our specialized teacher class, making it inherit from person using
modern class syntax.
Client-Server Overview - Learn web development
most
modern browsers also have tools that monitor network requests (for example, the network monitor tool in firefox).
...the structure of our data is defined in
models, which are python classes that define the fields to be stored in the underlying database.
... if we have a
model named team with a field of "team_type" then we can use a simple query syntax to get back all teams that have a particular type.
... #best/views.py from django.shortcuts import render from .
models import team def junior(request): list_teams = team.objects.filter(team_type__exact="junior") context = {'list': list_teams} return render(request, 'best/index.html', context) after the junior() function gets the list of junior teams, it calls the render() function, passing the original httprequest, an html template, and a "context" object defining the information to be included ...
Getting started with Ember - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
... introducing ember ember is a component-service framework that focuses on the overall web application development experience, minimizing the trivial differences between applications — all while being a
modern and light layer on top of native javascript.
... starting the development server you may start the app in development
mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >= 5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 35ms (2 ms) package /ass...
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Framework main features - Learn web development
writing components as mentioned in the previous chapter, most frameworks have some kind of component
model.
...all of the frameworks follow the same general
model: they allow developers to perform certain actions when the component mounts, when it renders, when it unmounts, and at many phases in between these.
...both react and vue utilize a virtual dom
model, but they do not apply the exact same logic when diffing or rendering.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Getting started with React - Learn web development
react utilizes features of
modern javascript for many of its patterns.
... also bear in mind that react and reactdom produce apps that only work on a fairly
modern set of browsers — ie9+ by way of some polyfills.
... it is recommended that you use a
modern browser like firefox, safari, or chrome when working through these tutorials.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Deployment and next steps - Learn web development
e along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development
mode.
... compiling our app so far we've been running our app in development
mode with npm run dev.
...uild/bundle.js' }, plugins: [ svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component css out into // a separate file - better for performance css: css => { css.write('public/build/bundle.css'); } }), later on in the same file you'll also see how rollup minimizes our scripts in production
mode and launches a local server in development
mode: // in dev
mode, call `npm run start` once // the bundle has been generated !production && serve(), // watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // if we're building for production (npm run build // instead of npm run dev), minify ...
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Package management basics - Learn web development
without
modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some
modern tooling to bundle your code and dependencies together when they are released on the web.
... installing parcel run the following command to install parcel locally: npm install parcel-bundler once that's done all the things, we're now ready for some "
modern client-side development" (which really means using build tools to make the developer experience a little easier).
...most build tooling systems will have a "development
mode" and a "production
mode".
...for instance, we could create the following command: npm run dev # or yarn run dev this would run a custom script for starting our project in “development
mode”.
Mozilla accessibility architecture
we do not currently support the carbon accessibility
model for apple's os x.
...it can read in an entire document at once, look only pieces of a document related to recent events, or traverse the accessibility object
model based on screen position.
...finally, because the msaa client gets the same accessible for the event and for tree traversal each time, it can do comparisons with its own internal data
model.
... for example, this allows the msaa client to invalidate parts of its own cache or data
model based on dom mutation events.
Command line options
you must use an upper case p on linux with versions older than 7.x, as there lower case invokes purify
mode (memory and leak detection).
... -private opens firefox in permanent private browsing
mode.
... -offline start with the offline
mode.
... -safe-
mode launches the application with all extensions disabled, for that launch only (extensions are not loaded, but are not permanently disabled in the extension manager data source).
Eclipse CDT Manual Setup
select "c/c++ > editor > scalability" and set "enable scalability
mode when the number of lines in the file is more than:" to something larger, like 100000.
... additional discovery for c++11
mode as of mozilla 25, mozilla is built in c++11
mode.
... when gcc is invoked in c++11
mode, it defines pre-processor symbols that enable conditional compilation of c++11 code in its standard library.
...unfortunately, the build option discovery process outlined above does not pick up this information, so cdt needs to be told separately about c++11
mode.
Experimental features in Firefox
nightly 53 yes developer edition 53 no beta 53 no release 53 no preference name dom.dialog_element.enabled global attribute: input
mode our implementation of the input
mode global attribute has been updated as per the whatwg spec (bug 1509527), but we still need to make other changes too, like making it available on contenteditable content.
... nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.input
mode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... nightly 60 no developer edition 60 no beta 60 no release 60 no preference name security.insecure_connection_text.enabled for normal browsing
mode; security.insecure_connection_text.pb
mode.enabled for private browsing
mode upgrading mixed display content when enabled, this preference causes firefox to automatically upgrade requests for media content from http to https on secure pages.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design
mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
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).
AsyncTestUtils extended framework
e tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ // list your tests here ]; function run_test() { configure_message_injection({
mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
... configuring message injection local injection let inboxfolder = configure_message_injection({
mode: "local"}); set up message injection to happen locally.
... imap injection, do not bring messages offline let inboxfolder = configure_message_injection({
mode: "imap", offline: false}); use an imap fake-server to inject messages.
... imap injection, do bring messages offline let inboxfolder = configure_message_injection({
mode: "imap", offline: true}); use an imap fake-server to inject messages.
PR_MkDir
creates a directory with a specified name and access
mode.
... syntax #include <prio.h> prstatus pr_mkdir( const char *name, printn
mode); parameters the function has the following parameters: name the name of the directory to be created.
...
mode the access permission bits of the file
mode of the new directory if the file is created when pr_create_file is on.
... caveat: the
mode parameter is currently applicable only on unix platforms.
PR_Open
syntax #include <prio.h> prfiledesc* pr_open( const char *name, printn flags, printn
mode); parameters the function has the following parameters: name the pathname of the file to be opened.
...
mode when pr_create_file flag is set and the file is created, these flags define the access permission bits of the newly created file.
...possible values of the
mode parameter are listed in the table below.
...if a new file is created as a result of the pr_open call, its file
mode bits are set according to the
mode parameter.
nss tech note6
nss .chk files for the fips 140
mode nss technical note: 6 in nss 3.8, we added checksum files required for the nss softoken to operate in fips 140
mode.
...when in fips 140
mode, the softoken is required to compute its checksum and compare it with the value in libsoftokn3.chk/softokn3.chk.
...if your application modifies nss binaries for any reason after they were built, then : the fips 140
mode of operation will no longer work, because the chk files will no longer match the softoken and freebl shared libraries .
...if you still decide to make unsupported changes, you can allow the softoken to come up in fips 140
mode of operation by regenerating the .chk files yourself.
PKCS11 FAQ
nss never uses parallel
mode.
...when operating in fips
mode, moving keys is significantly harder.
... yes, nss attempts to change the password in user
mode only.
... (it goes to sso
mode only if your token identifies itself as ckf_login_required, but not ckf_user_initialized).
NSS environment variables
3.11.8 nss_enable_audit boolean (1 to enable) enable auditing of activities of the nss cryptographic module in fips
mode.
... 3.12 nss_fips string ("fips","true","on","1") will start nss in fips
mode.
... 3.12.8 nsdist
mode string on operating systems other than windows, this controls whether copies, absolute symlinks, or relative symlinks of the output files should be published to mozilla/dist.
... nss_force_fips boolean (1 to enable) allows enabling fips
mode using nss_fips 3.24 os_target string (target os) for cross-compilation environments only, when the target os is not the default for the system on which the build is performed.
JS::CompileOptions
tions &setmutederrors(bool mute) owningcompileoptions &setversion(jsversion v) owningcompileoptions &setutf8(bool u) owningcompileoptions &setcolumn(unsigned c) owningcompileoptions &setcompileandgo(bool cng) owningcompileoptions &setforeval(bool eval) owningcompileoptions &setnoscriptrval(bool nsr) owningcompileoptions &setselfhosting
mode(bool shm) owningcompileoptions &setcanlazilyparse(bool clp) owningcompileoptions &setsourceislazy(bool l) owningcompileoptions &setintroductiontype(const char *t) bool setintroductioninfo(jscontext *cx, const char *introducerfn, const char *intro, unsigned line, jsscript *script, uint32_t offset) duplicate null-terminated string introducerfn for introducerfi...
...tionscript(jsscript *s) compileoptions &setmutederrors(bool mute) compileoptions &setversion(jsversion v) compileoptions &setutf8(bool u) compileoptions &setcolumn(unsigned c) compileoptions &setcompileandgo(bool cng) compileoptions &setforeval(bool eval) compileoptions &setnoscriptrval(bool nsr) compileoptions &setselfhosting
mode(bool shm) compileoptions &setcanlazilyparse(bool clp) compileoptions &setsourceislazy(bool l) compileoptions &setintroductiontype(const char *t) compileoptions &setintroductioninfo(const char *introducerfn, const char *intro, unsigned line, jsscript *script, uint32_t offset) compileoptions &maybemakestrict
mode(bool strict) properties properti...
... selfhosting
mode bool true iff the code is self-hosted.
... strictoption bool true if the code is strict
mode ("use strict").
JSAPI reference
rrornumberuc js_reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflow added in spidermonkey 1.8 js_geterrorreporter js_seterrorreporterobsolete since jsapi 52 js_errorfromexception js_geterrorprototype jsreport_is_exception jsreport_is_strict jsreport_is_warning jsreport_is_strict_
mode_error the following functions allow c/c++ functions to throw and catch javascript exceptions: js::createerror added in spidermonkey 38 js_isexceptionpending js_getpendingexception js_setpendingexception js_clearpendingexception js_throwstopiteration added in spidermonkey 1.8 js_isstopiteration added in spidermonkey 31 typedef jsexceptionstate js_saveexceptionstate js_restoreexcep...
...see js::value for their
modern replacements.
...pt 1.8.5 serialization struct jsstructuredclonecallbacks js_setstructuredclonecallbacks js_readstructuredclone js_writestructuredclone js_structuredclone js_readuint32pair js_readbytes js_writeuint32pair js_writebytes security struct jsprincipals js_setobjectprincipalsfinder obsolete since javascript 1.8 js_setprincipalstranscoder obsolete since javascript 1.8 enum jsaccess
mode obsolete since jsapi 29 js_checkaccess obsolete since jsapi 29 jsobjectops.checkaccess obsolete since javascript 1.8 jsclass.checkaccess obsolete since jsapi 29 js_setcheckobjectaccesscallback obsolete since javascript 1.8 added in spidermonkey 1.8.1 security callbacks are set per-runtime.
... jssecuritycallbacks js_getsecuritycallbacks added in spidermonkey 13 js_setsecuritycallbacks added in spidermonkey 13 js_setcontextsecuritycallbacks obsolete since jsapi 13 js_getruntimesecuritycallbacks obsolete since jsapi 13 js_setruntimesecuritycallbacks obsolete since jsapi 13 threading the following functions support the spidermonkey threading
model.
IAccessibleTable
accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult
modelchange([out] ia2table
modelchange
modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedchildren([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowcolumnextentsatindex([in] long index, [out...
...
modelchange() returns the type and extents describing how a table changed.
... provided for use by the ia2_event_table_
model_changed event handler.
...[propget] hresult
modelchange( [out] ia2table
modelchange
modelchange ); parameters
modelchange a struct of (type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn).
IAccessibleTable2
[propget] hresult caption([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult
modelchange([out] ia2table
modelchange
modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr descrip...
...
modelchange() returns the type and extents describing how a table changed.
... provided for use by the ia2_event_table_
model_changed event handler.
...[propget] hresult
modelchange( [out] ia2table
modelchange
modelchange ); parameters
modelchange a struct of (type(insert, delete, update), firstrow, lastrow, firstcolumn, lastcolumn).
nsIDocShell
void preparefornewcontent
model(); void resumerefreshuris(); void setchildoffset(in unsigned long offset); native code only!
...the rule of thumb here is that we disable js if this docshell or any of its parents disallow scripting, unless the only reason for js being disabled in this docshell is a parent docshell having a document that is in design
mode.
... preparefornewcontent
model() reset state to a new content
model within the current document and the document viewer.
...void preparefornewcontent
model(); parameters none.
nsINavHistoryResult
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) places results use a
model-view-controller (mvc) design pattern.
... result objects represent the
model in which the data is stored.
... sortingannotation autf8string the annotation to use in sort_by_annotation_* sorting
modes; you must set this value before setting the sorting
mode attribute.
... sorting
mode unsigned short specifies the sorting
mode for the result.
Adding items to the Folder Pane
the result is a javascript file that will add a "numbers" container to the end of thunderbird's "all folders"
mode.
...each time the folder pane determines that it is necessary to invalidate all its data (because of too many changes, or more commonly because the folder pane's "
mode" (aka view) has changed), a "rebuild" occurs.
... when this happens, the folder pane consults the map-generator for the current
mode, and that generator returns the necessary data for the folder pane's display.
...thus, our _insert function becomes _insert: function gne__insert() { // only insert our nodes into the "all"
mode if (gfoldertreeview.
mode != "all") return; gfoldertreeview._rowmap.push(containerrow); }, right now, clicking on these additional items has no effect.
Using COM from js-ctypes
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.
... '0x6e', '0x04', '0x22', '0xd4']); let spf_default = 0; function main() { let spvoice; let spvoiceptr; try { // msdn docs tell us ot use coinitex instead of coinit, and default is 0 // which is coinit_multithreaded but it wouldnt work so i used // coinit_apartmentthreaded and it worked checkhresult would throw a bad // hresult of rpc_e_changed_
mode which is 0x80010106 which is // -2147417850.
...this example uses ipropertystore::setvalue to change the system.user
modelapp.id of an open firefox window.
... example a - based on bugzilla :: bug 738501 - attachement 608538 exmaple b - based on example a ishelllink & ipersistfile & ipropertystore - uses ipropertystore to set and get the system.user
modelapp.id on shortcut files.
Firefox Developer Tools
(note: this feature is not turned on by default and must be enabled in settings before the icon will appear.) toggles responsive design
mode.
...visualise many aspects of the page including the box
model, animations, and grid layouts.
... responsive design
mode see how your website or app will look and behave on different devices and network types.
... application panel provides tools for inspecting and debugging
modern web apps (also known as progressive web apps).
CDATASection - Web APIs
obsolete removed in favour of the more generic text interface document object
model (dom) level 3 core specificationthe definition of 'cdatasection' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'cdatasection' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'cdatasection' in that specification.
DOMImplementation.hasFeature() - Web APIs
it is deprecated and
modern browsers return true in all cases.
... document object
model (dom) level 3 core specificationthe definition of 'domimplementation.hasfeature' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'domimplementation.hasfeature' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'domimplementation.hasfeature' in that specification.
Document.exitFullscreen() - Web APIs
the document method exitfullscreen() requests that the element on this document which is currently being presented in full-screen
mode be taken out of full-screen
mode, restoring the previous state of the screen.
... return value a promise which is resolved once the user agent has finished exiting full-screen
mode.
... if an error occurs while attempting to exit full-screen
mode, the catch() handler for the promise is called.
... document.onclick = function (event) { if (document.fullscreenelement) { document.exitfullscreen() .then(() => console.log("document exited form full screen
mode")) .catch((err) => console.error(err)) } else { document.documentelement.requestfullscreen(); } } note: for a more complete example, see the example in element.requestfullscreen().
Document.onfullscreenchange - Web APIs
the document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a document transitions into or out of full-screen
mode.
... syntax targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler which is invoked whenever the document receives a fullscreenchange event, indicating that the document is transitioning into or out of full-screen
mode.
... usage notes the fullscreenchange event does not directly specify whether the transition is into or out of full-screen
mode, so your event handler should look at the value of document.fullscreenelement.
... if it's null, the event indicates a transition out of full-screen
mode.
DocumentOrShadowRoot.fullscreenElement - Web APIs
the documentorshadowroot.fullscreenelement read-only property returns the element that is currently being presented in full-screen
mode in this document, or null if full-screen
mode is not currently in use.
... 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.
... syntax var element = document.fullscreenelement; return value the element object that's currently in full-screen
mode; if full-screen
mode isn't currently in use by the document>, the returned value is null.
... example this example presents a function, isvideoinfullscreen(), which looks at the value returned by fullscreenelement; if the document is in full-screen
mode (fullscreenelement isn't null) and the full-screen element's nodename is video, indicating a <video> element, the function returns true, indicating that the video is in full-screen
mode.
DocumentType - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'documenttype' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
... document object
model (dom) level 2 core specificationthe definition of 'documenttype' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'documenttype' in that specification.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the demonstrations provided here will work fine in any
modern browser, including all versions of firefox and ie 5+.
... the dom methods presented here are part of the document object
model (core) level 1 specification.
...remember to keep in mind the tree
model for the structures you are planning to create; this will make it easier to write the necessary code.
...so visually, when you see the html page it seems like the two text nodes hello and world are a single node, but remember that in the document
model, there are two nodes.
Element.id - Web APIs
living standard no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'id' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'id' in that specification.
Element.onfullscreenchange - Web APIs
the element interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired when the element has transitioned into or out of full-screen
mode.
... syntax targetdocument.onfullscreenchange = fullscreenchangehandler; value an event handler for the fullscreenchange event, indicating that the element has changed in or out of full-screen
mode.
... this gives us a value, isfullscreen, which we pass into a function called adjustmycontrols(), which we imagine to be a function that makes adjustments to the app's user interface to present itself optimally when it's in full-screen
mode versus being displayed in a window.
... function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen
mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
FetchEvent.respondWith() - Web APIs
for security reasons, there are a few global rules: you can only return response objects of type "opaque" if the fetchevent.request object's
mode is "no-cors".
... you can only return response objects of type "opaqueredirect" if the fetchevent.request object's
mode is "manual".
... you cannot return response objects of type "cors" if the fetchevent.request object's
mode is "same-origin".
... exceptions exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.
mode and response.type values, as hinted at in the "global rules" listed above.
Using Fetch - Web APIs
mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'content-type': 'application/json' // 'content-type': 'application/x-www-form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // n...
...same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that
mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-form-urlencoded, multipart/form-data, or text/plain sending a request with credentials included to cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: 'include' to the init object you ...
...with your fetch operation:', error); }); supplying your own request object instead of passing a path to the resource you want to request into the fetch() call, you can create a request object using the request() constructor, and pass that in as a fetch() method argument: const myheaders = new headers(); const myrequest = new request('flowers.jpg', { method: 'get', headers: myheaders,
mode: 'cors', cache: 'default', }); fetch(myrequest) .then(response => response.blob()) .then(myblob => { myimage.src = url.createobjecturl(myblob); }); request() accepts exactly the same parameters as the fetch() method.
... request-no-cors: guard for a headers object obtained from a request created with request.
mode no-cors.
HTMLBaseElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmlbaseelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlbaseelement' in that specification.
HTMLDListElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmldlistelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmldlistelement' in that specification.
HTMLDivElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmldivelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmldivelement' in that specification.
HTMLElement.dir - Web APIs
living standard no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'dir' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'dir' in that specification.
HTMLElement.title - Web APIs
living standard no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'title' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'title' in that specification.
HTMLIFrameElement - Web APIs
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.
... document object
model (dom) level 2 html specificationthe definition of 'htmliframeelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmliframeelement' in that specification.
HTMLImageElement - Web APIs
modern html should instead simply place an <img> inside an <a> element defining the hyperlink.
...// image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document alert(document.images[0].src); specifications specification status comment css object
model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmlimgelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlimgelement' in that specification.
HTMLOListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in
modern pages.
... document object
model (dom) level 2 html specificationthe definition of 'htmlolistelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlolistelement' in that specification.
HTMLOptGroupElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmloptgroupelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmloptgroupelement' in that specification.
HTMLOrForeignElement.tabIndex - Web APIs
living standard no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'tabindex' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'tabindex' in that specification.
HTMLQuoteElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmlquoteelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlquoteelement' in that specification.
HTMLScriptElement - Web APIs
there are three possible execution
modes: if the async attribute is present, then the script will be executed asynchronously as soon as it downloads.
... document object
model (dom) level 2 html specificationthe definition of 'htmlscriptelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlscriptelement' in that specification.
HTMLSelectElement.type - Web APIs
no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlselectelement' in that specification.
HTMLTableCaptionElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification, though align was formerly obsoleted.
... document object
model (dom) level 2 html specificationthe definition of 'htmltablecaptionelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltablecaptionelement' in that specification.
HTMLTitleElement - Web APIs
recommendation no change from document object
model (dom) level 2 html specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmltitleelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltitleelement' in that specification.
HTMLUListElement - Web APIs
this property reflects the compact attribute only, it doesn't consider the line-height css property used for that behavior in
modern pages.
... document object
model (dom) level 2 html specificationthe definition of 'htmlulistelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlulistelement' in that specification.
The HTML DOM API - Web APIs
structure of an html document the document object
model (dom) is an architecture that describes the structure of a document; each document is represented by an instance of the interface document.
...gelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement html
modelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement html...
... id="username"> (*) </p> <p> <label for="email">email:</label> <input type="email" id="useremail"> </p> <input type="submit" value="send" id="sendbutton"> </form> result specifications specification status comment html living standard living standard whatwg html specification html5 recommendation no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specification obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specification obsolete initial definition.
IDBDatabaseSync - Web APIs
method overview idbobjectstoresync createobjectstore (in domstring name, in domstring keypath, in optional boolean autoincrement) raises (idbdatabaseexception); idbobjectstoresync openobjectstore (in domstring name, in optional unsigned short
mode) raises (idbdatabaseexception); void removeobjectstore (in domstring storename) raises (idbdatabaseexception); void setversion (in domstring version); idbtransactionsync transaction (in optional domstringlist storenames, in optional unsigned int timeout) raises (idbdatabaseexception); attributes attribute type description description ...
... openobjectstore() opens the object store with the given name in the connected database using the specified
mode.
... idbobjectstoresync openobjectstore ( in domstring name, in optional unsigned short
mode ) raises (idbdatabaseexception); parameters name the name of the object store to open.
...
mode the
mode that is used to access the object store.
KeyboardEvent - Web APIs
however, a limitation of the macos event
model causes caps lock to dispatch only the keydown event.
... num lock was supported on some older laptop
models (2007
models and older), but since then, macos hasn't supported num lock even on external keyboards.
...it will either behave like windows or mac depending on what the native event
model does.
...both have been superseded by the
modern usage of a constructor: keyboardevent().
MouseEvent.clientX - Web APIs
mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'clientx' in that specification.
... document object
model (dom) level 3 events specificationthe definition of 'mouseevent.clientx' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.clientx' in that specification.
MouseEvent.clientY - Web APIs
mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'clienty' in that specification.
... document object
model (dom) level 3 events specificationthe definition of 'mouseevent.clienty' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.clienty' in that specification.
MouseEvent.screenX - Web APIs
ment, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications specification status comment css object
model (cssom) view modulethe definition of 'screenx' in that specification.
... document object
model (dom) level 3 events specificationthe definition of 'mouseevent.screenx' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.sceenx' in that specification.
MouseEvent.screenY - Web APIs
mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'screeny' in that specification.
... document object
model (dom) level 3 events specificationthe definition of 'mouseevent.screeny' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.sceeny' in that specification.
RTCPeerConnection.createOffer() - Web APIs
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.
... 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.
... 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.
... 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.
Text - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'text' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'text' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'text' in that specification.
TextTrack - Web APIs
texttrack.
mode a domstring specifying the track's current
mode.
... changing this property's value changes the track's current
mode to match.
... permitted values are listed under text track
mode constants.
... the default is disabled, unless the <track> element's default boolean attribute is specified, in which case the default
mode is started.
WEBGL_compressed_texture_pvrtc - Web APIs
ext.compressed_rgb_pvrtc_4bppv1_img rgb compression in 4-bit
mode.
... ext.compressed_rgba_pvrtc_4bppv1_img rgba compression in 4-bit
mode.
... ext.compressed_rgb_pvrtc_2bppv1_img rgb compression in 2-bit
mode.
... ext.compressed_rgba_pvrtc_2bppv1_img rgba compression in 2-bit
mode.
Using textures in WebGL - Web APIs
their wrapping
mode must also be set to clamp_to_edge.
... on the other hand if the texture is a power of 2 in both dimensions then webgl can do higher quality filtering, it can use mipmap, and it can set the wrapping
mode to repeat or mirrored_repeat.
... const vssource = ` attribute vec4 avertexposition; attribute vec2 atexturecoord; uniform mat4 u
modelviewmatrix; uniform mat4 uprojectionmatrix; varying highp vec2 vtexturecoord; void main(void) { gl_position = uprojectionmatrix * u
modelviewmatrix * avertexposition; vtexturecoord = atexturecoord; } `; the key change here is that instead of fetching the vertex color, we're fetching the texture coordinates and passing them to the vertex shader; this will indicate ...
... added a uniform we need to look up their locations const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), texturecoord: gl.getattriblocation(shaderprogram, 'atexturecoord'), }, uniformlocations: { projectionmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'),
modelviewmatrix: gl.getuniformlocation(shaderprogram, 'u
modelviewmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler'), }, }; drawing the textured cube the changes to the drawscene() function are simple.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic 3d theory matrix math for the web webgl
model view projection geometry and reference spaces in webxr ed.
...there are several kinds of perspective; those are defined and their mathematics explained in the article webgl
model view projection.
...since the xrview representing the view has a transform property which is an xrrigidtransform providing the camera view, you can get the
model view matrix—the transform matrix needed to move the world to simulate the desired camera position—like this: let viewmatrix = view.transform.inverse.matrix; if the library you're using accepts an xrrigidtransform object directly, you can instead get view.transform.inverse, rather than pulling out just the array representing the view matrix.
...for more detail on the subject, see the articles geometry and reference spaces, webgl
model view projection, and matrix math for the web.
Migrating from webkitAudioContext - Web APIs
in this article, we cover the differences in web audio api since it was first implemented in webkit and how to update your code to use the
modern web audio api.
...; // lowpass filter filter.type = "highpass"; // highpass filter filter.type = "bandpass"; // bandpass filter filter.type = "lowshelf"; // lowshelf filter filter.type = "highshelf"; // highshelf filter filter.type = "peaking"; // peaking filter filter.type = "notch"; // notch filter filter.type = "allpass"; // allpass filter pannernode.panning
model pannernode's panning
model property has been changed to use web idl enums.
... old code using webkitaudiocontext can be ported to standards based audiocontext like below: // old webkitaudiocontext code: var panner = context.createpanner(); panner.panning
model = panner.equalpower; // equalpower panning panner.panning
model = panner.hrtf; // hrtf panning // new standard audiocontext code: var panner = context.createpanner(); panner.panning
model = "equalpower"; // equalpower panning panner.panning
model = "hrtf"; // hrtf panning pannernode.distance
model pannernode's distance
model property has been changed to use web idl enums.
... old code using webkitaudiocontext can be ported to standards based audiocontext like below: // old webkitaudiocontext code: var panner = context.createpanner(); panner.distance
model = panner.linear_distance; // linear distance
model panner.distance
model = panner.inverse_distance; // inverse distance
model panner.distance
model = panner.exponential_distance; // exponential distance
model // mew standard audiocontext code: var panner = context.createpanner(); panner.distance
model = "linear"; // linear distance
model panner.distance
model = "inverse"; // inverse distance
model panner.distance
model = "exponential"; // exponential distance
model gain control moved to its own node type the web audio standard now controls all gain using...
Web Locks API - Web APIs
the api provides optional functionality that may be used as needed, including: returning values from the asynchronous task shared and exclusive lock
modes conditional acquisition diagnostics to query the state of locks in an origin an escape hatch to protect against deadlocks locks are scoped to origins; the locks acquired by a tab from https://example.com have no effect on the locks acquired by a tab from https://example.org:8080 as they are separate origins.
... await do_something_else_without_lock(); options several options can be passed when requesting a lock:
mode: the default
mode is "exclusive", but "shared" can be specified.
...
mode) about each, at the time the snapshot was taken.
... interfaces lock provides the name and
mode of a previously requested lock, which is received in the callback to lockmanager.request().
HTML in XMLHttpRequest - Web APIs
limitations to discourage the synchronous use of xmlhttprequest, html support is not available in the synchronous
mode.
...this limitation avoids wasting time parsing html uselessly when legacy code uses xmlhttprequest in the default
mode to retrieve responsetext for text/html resources.
... usage retrieving an html resource as a dom using xmlhttprequest works just like retrieving an xml resource as a dom using xmlhttprequest, except you can't use the synchronous
mode and you have to explicitly request a document by assigning the string "document" to the responsetype property of the xmlhttprequest object after calling open() but before calling send().
...first, the detection result is obtained asynchronously, because html support is only available in the asynchronous
mode.
XRSession - Web APIs
xrsession supports both inline and immersive virtual and augmented reality
modes.
... environmentblend
mode read only returns this session's blend
mode which denotes how much of the real-world environment is visible through the xr device and how the device will blend the device imagery with it.
... note: environmentblend
mode() is part of the webxr augmented reality module, which has not been completed.
... example this example establishes a new xrsession in inline
mode so that it can be displayed within an html element, avoiding the need for a dedicated ar or vr viewing device such as a headset.
XRSystem: isSessionSupported() - Web APIs
the xrsystem method issessionsupported() returns a promise which resolves to true if the specified webxr session
mode is supported by the user's webxr device.
... syntax var issupportedpromise = xr.issessionsupported(xrsession
mode) parameters xrsession
mode a domstring specifying the webxr session
mode for which support is to be checked.
... return value a promise that resolves to true if the specified session
mode is supported; otherwise the promise resolves to false.
... examples in this example, we see issessionsupported() used to detect whether or not the device supports vr
mode by checking to see if an immersive-vr session is supported.
XRView - Web APIs
in other words, don't assume there are exactly two views on a given viewer; there can be as few as one (such as when rendering the scene in inline
mode, and potentially many (especially if the field of view is very large).
...
model view matrix the
model view matrix is a matrix which defines the position of an object relative to the space in which it's located: if objectmatrix is a transform applied to the object to provide its basic position and rotation, then the
model view matrix can be computed by multiplying the object's matrix by the inverse of the view transform matrix, like this: mat4.multiply(
modelviewmatrix, vie...
...w.transform.inverse.matrix, objectmatrix); normal matrix the
model view's normal matrix is used when lighting the scene, in order to transform each surface's normal vectors to ensure that the light is reflected in the correct direction given the orientation and position of the surface relative to the light source or sources.
... it's computed by inverting then transposing the
model view matrix: mat4.invert(normalmatrix,
modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); teleporting an object to programmatically move and/or rotate (often referred to as teleporting) an object, you need to create a new reference space for that object which applies a transform that encapsulates the desired changes.
Web APIs
tmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmeterelement html
modelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement h...
...ayoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmanager lockedfile m midiaccess midiconnectionevent midiinput midiinputmap midimessageevent midioutputmap mscandidatewindowhide mscandidatewindowshow mscandidatewindowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssite
modeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeysession mediakeystatusmap mediakeysystemaccess mediakeysystemconfiguration mediakeys medialist mediametadata mediapositionstate mediaque...
...doworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblend
mode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit xrrigidtransform xrsession xrsessionevent xrses...
...sioneventinit xrsessioninit xrsession
mode xrspace xrsystem xrtargetray
mode xrview xrviewerpose xrviewport xrvisibilitystate xrwebgllayer xrwebgllayerinit xsltprocessor ...
::backdrop - CSS: Cascading Style Sheets
the ::backdrop css pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in full-screen
mode.
... this includes both elements which have been placed in full-screen
mode using the fullscreen api and <dialog> elements.
... when multiple elements have been placed into full-screen
mode, the backdrop is drawn immediately beneath the frontmost such element, and on top of the older full-screen elements.
... syntax ::backdrop examples styling the backdrop for full-screen video in this example, the backdrop style used when a video is shifted to full-screen
mode is configured to be a grey-blue color rather than the black it defaults to in most browsers.
Flow Layout and Overflow - CSS: Cascading Style Sheets
flow relative properties in the guide to writing
modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing
modes than tying our layout to the physical dimensions of the screen.
...these correspond to overflow-x and overflow-y but the mapping depends on the writing
mode of the document.
... these properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing
mode.
...we also have ellipsis which renders an ellipsis, which may be replaced with a better character for the language or writing
mode in use.
Introduction to formatting contexts - CSS: Cascading Style Sheets
elements participating in a bfc use the rules outlined by the css box
model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.
... the box
model does not fully apply to items participating in an inline formatting context.
... in a horizontal writing
mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right.
...in the next guide, we will find out how normal flow interacts with different writing
modes.
Logical properties for floating and positioning - CSS: Cascading Style Sheets
they assume a horizontal writing-
mode, with a left-to-right direction.
...if you change the writing-
mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated item follows the direction and writing-
mode.
... new properties have been created in the logical properties specification for when you want the positioning to relate to the flow of text in your writing
mode.
...change the writing-
mode property to vertical-rl, or add direction: rtl, and see how the flow relative box stays with the text direction.
Logical properties for sizing - CSS: Cascading Style Sheets
you might want some features to always relate to the physical dimensions whatever the writing
mode.
...these mappings assume that you are in a horizontal-tb writing
mode, such as english or arabic, in which case width would be mapped to inline-size.
... if you were in a vertical writing
mode then inline-size would be mapped to height.
... in the live example below i have set the writing
mode to horizontal-tb.
WebKit CSS extensions - CSS: Cascading Style Sheets
yle -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-
mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit...
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-
mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border...
...-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-
mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser without a prefix, but are not on the standards track.
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-
mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function -webkit-appearance* b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** ...
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.
... syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing
mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-
mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-
mode, direction, and text-orientation.
... this is useful when building styles to work regardless of the text orientation and writing
mode.
... /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing
mode this property corresponds to the border-bottom-right-radius property.
...<percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-
mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specification.
border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-
mode, direction, and text-orientation.
... this is useful when building styles to work regardless of the text orientation and writing
mode.
... /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing
mode this property corresponds to the border-top-right-radius property.
...>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-
mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-end-start-radius' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-
mode, direction, and text-orientation.
... this is useful when building styles to work regardless of the text orientation and writing
mode.
... /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing
mode this property corresponds to the border-bottom-left-radius property.
...>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-
mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-end-radius' in that specification.
border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-
mode, direction, and text-orientation.
... this is useful when building styles to work regardless of the text orientation and writing
mode.
... /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing
mode this property corresponds to the border-top-left-radius property.
... or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-
mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-start-start-radius' in that specification.
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.
... syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing
mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-
mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
the margin-inline-start css property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing
mode, 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.
...formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-...
...
mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing
mode, directionality, and text orientation.
...ative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; margin-inline: 20px 40px; background-c...
... initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...
max-inline-size - CSS: Cascading Style Sheets
the max-inline-size css property defines the horizontal or vertical maximum size of an element's block depending on its writing
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.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-
mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
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.
... syntax /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing
mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-
mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
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.
... syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing
mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it relates to the minimum width of the element.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-
mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
this property only has an effect in vertical writing
modes.
... html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-
mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
... html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-
mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing
modes level 4the definition of 'text-combine-upright' in that specification.
... candidate recommendation add digits value css writing
modes module level 3the definition of 'text-combine-upright' in that specification.
text-emphasis-position - CSS: Cascading Style Sheets
sis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; syntax values over draw marks over the text in horizontal writing
mode.
... under draw marks under the text in horizontal writing
mode.
... right draws marks to the right of the text in vertical writing
mode.
... left draw marks to the left of the text in vertical writing
mode.
Writing Web Audio API code that works in every browser - Developer guides
once you include it in your page, you can write in "
modern web audio api" style, and do things such as: var audiocontext = new audiocontext(); everywhere, including chrome/ium, opera, safari, and ---of course!--- firefox.
...if you're porting
moderately "old" code (say, a year old) it's possible that it uses some methods that audiocontext-monkeypatch doesn't alias, because it helps you to write code in the new style.
...for example, up until a couple of days ago pannernode did not support the default hrtf panning
model yet, and attempting to use a pannernode with that configuration simply resulted in silence or a mono output coming out from that node, depending on the build you used.
...in the meantime, you can explicitly specify 'equalpower' instead: var panner = new audiocontext.pannernode(); panner.panning
model = 'equalpower'; note that there's a list of projects built with the web audio api, specifying which ones use the standard audiocontext and which browsers do they work on.
Developer guides
graphics on the web
modern web sites and applications often need to present graphics of varying sophistication.
... progressive web apps progressive web apps (pwas) use
modern web apis along with traditional progressive enhancement strategy to create cross-platform web applications.
... optimization and performance when building
modern web apps and sites, it's important to make your content work quickly and efficiently.
... user input and controls
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
see box properties in the box
model to learn about the relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders.
...in a left-to-right writing
mode (such as the way english is written), the block start border is the top edge and the block end is the bottom.
...which side this is will vary depending on the writing-
mode, direction, and text-orientation properties, which are typically (but not always) used to adjust text directionality based on the language being displayed.
...we enable flex
mode using display: flex, and set both justify-content and align-items to center.
<input type="range"> - HTML: Hypertext Markup Language
first is the css for the wrapper itself; this specifies the display
mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.
... html use similar html as in the previous examples, we add the attribute with a value of vertical: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> writing-
mode: bt-lr; the writing-
mode property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.
... html we use the same html as in the previous examples: <input type="range" min="0" max="11" value="7" step="1"> css we target just the inputs with a type of range, changing the writing
mode from the default to bt-lr, or bottom-to-top and left-to-right: input[type="range"] { writing-
mode: bt-lr; } putting it all together as each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser: html we keep the orient attribute with a value of vertical for firefox: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> css we target just the inputs with a type of range, changing the writing
mode from the default to bt-lr, or bottom-to-top and left-to-right, for edge and internet explorer, and add...
... -webkit-appearance: slider-vertical for all -webkit-based browsers: input[type="range"] { writing-
mode: bt-lr; -webkit-appearance: slider-vertical; } specifications specification status comment html living standardthe definition of '<input type="range">' in that specification.
Inline elements - HTML: Hypertext Markup Language
because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading
mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</d...
...iv> the css (not displayed in standard reading
mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as before, we get: see the difference?
...however, doing this will not change the category and the content
model of the element.
... conceptual differences in brief, here are the basic conceptual differences between inline and block-level elements: content
model generally, inline elements may contain only data and other inline elements.
Evolution of HTTP - HTTP
http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the
modern maze of the internet, now carrying images, videos in high resolution and 3d.
...the drawback of the rest
model resides in the fact that each website defines its own non-standard restful api and has total control on it; unlike the *dav extensions were clients and servers are interoperable.
... relaxing the security-
model of the web http is independent of the security
model of the web, the same-origin policy.
... in fact, the current web security
model has been developed after the creation of http!
X-XSS-Protection - HTTP
although these protections are largely unnecessary in
modern browsers when sites implement a strong content-security-policy that disables the use of inline javascript ('unsafe-inline'), they can still provide protections for users of older web browsers that don't yet support csp.
... header type response header forbidden header name no syntax x-xss-protection: 0 x-xss-protection: 1 x-xss-protection: 1;
mode=block x-xss-protection: 1; report=<reporting-uri> 0 disables xss filtering.
... 1;
mode=block enables xss filtering.
... example block pages from loading when they detect reflected xss attacks: x-xss-protection: 1;
mode=block php header("x-xss-protection: 1;
mode=block"); apache (.htaccess) <ifmodule mod_headers.c> header set x-xss-protection "1;
mode=block" </ifmodule> nginx add_header "x-xss-protection" "1;
mode=block"; specifications not part of any specifications or drafts.
ReferenceError: deprecated caller or arguments usage - JavaScript
the javascript strict
mode-only exception "deprecated caller or arguments usage" occurs when the deprecated function.caller or function.arguments properties are used.
... message typeerror: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (edge) warning: referenceerror: deprecated caller usage (firefox) warning: referenceerror: deprecated arguments usage (firefox) typeerror: 'callee' and 'caller' cannot be accessed in strict
mode.
... (safari) error type a strict-
mode-only warning that a referenceerror occurred.
... in strict
mode, the function.caller or function.arguments properties are used and shouldn't be.
ReferenceError: assignment to undeclared variable "x" - JavaScript
the javascript strict
mode-only exception "assignment to undeclated variable" occurs when the value has been assigned to an undeclared variable.
... message referenceerror: assignment to undeclared variable "x" (firefox) referenceerror: "x" is not defined (chrome) referenceerror: variable undefined in strict
mode (edge) error type referenceerror warning in strict
mode only.
...there are some differences between declared and undeclared variables, which might lead to unexpected results and that's why javascript presents an error in strict
mode.
... errors about undeclared variable assignments occur in strict
mode code only.
The arguments object - JavaScript
forbidden in strict
mode.
... function foo(...args) { return args; } foo(1, 2, 3); // [1, 2, 3] while the presence of rest, default, or destructured parameters does not alter the behavior of the arguments object in strict
mode code, there are subtle differences for non-strict code.
... in strict-
mode code, the arguments object behaves the same whether or not a function is passed rest, default, or destructured parameters.
...instead, the arguments object in non-strict functions with complex parameters will always reflect the values passed to the function when the function was called (this is the same behavior as exhibited by all strict-
mode functions, regardless of the type of variables they are passed): function func(a = 55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } func(10); // 10 and also: function func(a = 55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } func(10); // 10 and also: // an untracked default parameter function func(a ...
block - JavaScript
examples block scoping rules with var or function declaration in non-strict
mode variables declared with var or created by function declarations in non-strict
mode do not have block scope.
... block scoping rules with let, const or function declaration in strict
mode by contrast, identifiers declared with let and const do have block scope: let x = 1; { let x = 2; } console.log(x); // logs 1 the x = 2 is limited in scope to the block in which it was defined.
... in strict
mode, starting with es2015, functions inside blocks are scoped to that block.
... prior to es2015, block-level functions were forbidden in strict
mode.
JavaScript
as of 2012, all
modern browsers fully support ecmascript 5.1.
... 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, interactive web applications.
... strict
mode strict
mode defines that you can not use any variable before initializing it.
... concurrency
model and event loop javascript has a concurrency
model based on an "event loop".
Digital video concepts - Web media technologies
there are several color
models, and video codec makes use of one or more of these to represent their pixels during the encoding process as well as after decoding the video frames.
... rgb most computer graphics
models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an individual pixel, and an image is comprised of a two-dimensional array of these pixels.
... the table below shows examples of three chroma subsampling
models.
... what if the chroma subsampling
model is 4:0:0?
Web Performance
optimizing the critical render path improves render performance.the critical rendering path includes the document object
model (dom), css object
model (cssom), render tree and layout.css and javascript animation performancebrowsers are able to optimize rendering flows.
... beginner's tutorials the mdn web performance learning area contains
modern, up-to-date tutorials covering performance essentials.
... analyzing javascript bundles no doubt, javascript is a big part of
modern web development.
...in this guide we'll talk about the dynamic import() statement, which is a feature in
modern browsers that loads a javascript module on demand.
Structural overview of progressive web apps - Progressive web apps (PWAs)
for example, an offline
mode with the help of service workers is just an extra trait that makes the website experience better, but it's still perfectly usable without it.
... the app shell
model requires all the resources to be available before the website can start rendering.
... in theory, streaming is a better
model than the app shell
model, but it's also more complex, and the streams api isn't yet fully supported by any of the major browsers.
...the parts that are directly relevant to the app shell
model are found outside the <section> with the id content within this page.
dominant-baseline - SVG: Scalable Vector Graphics
le</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top default value auto animatable yes auto if this property occurs on a <text> element, then the computed value depends on the value of the writing-
mode attribute.
... if the writing-
mode is horizontal, then the value of the dominant-baseline component is alphabetic.
... otherwise, if the writing-
mode is vertical, then the value of the dominant-baseline component is central.
...the writing-
mode, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline.
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calc
mode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edge
mode elevation enable-background end exponent externalresourcesrequired...
...i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min
mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx re...
...t-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-
mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing at...
...hting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-
mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calc
mode, ...
Using templates and slots - Web Components
this was possible before, but it is made a lot easier by the html <template> element (which is well-supported in
modern browsers).
...we'll call it <my-paragraph>: customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } } ); the key point to note here is that we append a clone of the template content to the shadow root, created using the node.clonenode() method.
... customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(template.clonenode(true)); } } ); using the <element-details> custom element with named slots now let’s take that <element-details> element and actually use it in our document: <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with t...
...y subsequently be instantiated during runtime using javascript.</span> </element-details> <script> customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(template.clonenode(true)); } }) </script> </body> </html> ...
ui/frame - Archive of obsolete content
communicating with frames you can exchange messages between the main add-on code and scripts loaded into the frame using an api
modeled on window.postmessage().
...this is passed an event object which always contains a source property, which has a postmessage() function
modeled after window.postmessage().
...this is passed an event object which always contains a source property, which has a postmessage() function
modeled after window.postmessage().
Creating Reusable Modules - Archive of obsolete content
e documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecentbrowserwindow(); fp.init(window, "select a file", nsifilepicker.
modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.
modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
... so "filepicker.js" should look like this: var {cc, ci} = require("chrome"); function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.
modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
note: with the
modern jit javascript engine in gecko and js-ctypes more extension code can be written only in javascript than ever before.
... the makefile in the public/ directory should follow this
model: depth = ../../..
... kinda, sorta complex extensions for a
moderately complex extension, it's probably enough just to subdivide the code into a single level of modules.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
internet explorer handles this using activex; in firefox, we use the cross-platform component object
model, or xpcom.
...ts.interfaces.nsibinaryinputstream); binarystream.setinputstream(filestream); var array = binarystream.readbytearray(filestream.available()); binarystream.close(); filestream.close(); alert(array.map( function(aitem) {return aitem.tostring(16); } ).join(' ').touppercase( )); when we initialized nsifileinputstream, we set the second and third parameters to initialize it in read-only
mode.
...here, we're outputting a text file consisting of the ascii characters "xul." when we initialized nsifileinputstream, we set the second and third parameters to initialize it in write-only
mode.
The Essentials of an Extension - Archive of obsolete content
there are two similar code blocks, because in
modern versions of firefox, particularly on windows, a single firefox menu button is presented, with simplified menu options, rather than an extensive menu bar.
... just like in regular js, we can use the dom (document object
model) in order to manipulate the xul document.
...we'll look into some of the differences when we cover the xul box
model, and other more advanced topics.
JXON - Archive of obsolete content
if you want a complete bidirectional jxon library (
modelled on the json global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility).
...s are escaped: <root>quote: " new-line: </root> becomes "quote: \" new-line:\n" empty elements will become null: <root><nil/><empty></empty></root> becomes { "nil": null, "empty": null } if all sibling elements have the same name, they become an array <root><item>1</item><item>2</item><item>three</item></root> becomes [1, 2, "three"] mixed
mode text-nodes, comments and attributes get absorbed: <root version="1.0">testing<!--comment--><element test="true">1</element></root> becomes { "element": true } namespaces get absorbed, and prefixes will just be part of the property name: <root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root> becomes { "ding:dong" : "binnen" } note: our algor...
...its usage is
modeled on the json native object.
MMgc - Archive of obsolete content
applications are also getting larger and larger and consuming more memory with scripting giving way to full fledged application component
models (ala flex).
...(temporarily not working) <gflash>600 300 gc2.swf</gflash> detecting missing write barriers to make sure that we injected write barriers into all the right places we plan on implementing a debug
mode that will search for missing write barriers.
...furthermore we can run this check even more frequently than every mark increment, for instance every time our gc memory allocators request a new block from our primary allocator (the way our extremely helpful greedy collection
mode works).
Source code directories overview - Archive of obsolete content
dom contains c interfaces and code for implementing and tracking dom (document object
model) objects in javascript.
... themes contains the default themes for mozilla,
modern and classic.
... 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").
jspage - Archive of obsolete content
ction(a,f){f=f||window;var k=f.document;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compat
mode||k.compat
mode=="css1compat")?k.html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mo...
...rn{top:0,left:0,bottom:h.y,right:h.x,height:h.y,width:h.x}; }});var d=element.getcomputedstyle;function e(h,i){return d(h,i).toint()||0;}function f(h){return d(h,"-moz-box-sizing")=="border-box";}function g(h){return e(h,"border-top-width"); }function c(h){return e(h,"border-left-width");}function b(h){return(/^(?:body|html)$/i).test(h.tagname);}function a(h){var i=h.getdocument();return(!i.compat
mode||i.compat
mode=="css1compat")?i.html:i.body; }})();element.alias("setposition","position");native.implement([window,document,element],{getheight:function(){return this.getsize().y;},getwidth:function(){return this.getsize().x; },getscrolltop:function(){return this.getscroll().y;},getscrollleft:function(){return this.getscroll().x;},getscrollheight:function(){return this.getscrollsize().y; },getscr...
...$merge(this.options,{duration:-1})).write("");return this;}});cookie.write=function(b,c,a){return new cookie(b,a).write(c); };cookie.read=function(a){return new cookie(a).read();};cookie.dispose=function(b,a){return new cookie(b,a).dispose();};var swiff=new class({implements:[options],options:{id:null,height:1,width:1,container:null,properties:{},params:{quality:"high",allowscriptaccess:"always",w
mode:"transparent",swliveconnect:true},callbacks:{},vars:{}},toelement:function(){return this.object; },initialize:function(l,m){this.instance="swiff_"+$time();this.setoptions(m);m=this.options;var b=this.id=m.id||this.instance;var a=document.id(m.container); swiff.callbacks[this.instance]={};var e=m.params,g=m.vars,f=m.callbacks;var h=$extend({height:m.height,width:m.width},m.properties);var k=this;f...
Anonymous Content - Archive of obsolete content
events flow through the final transformed content
model after all elements have been repositioned through the usage of children tags.
...style rules using the child, descendant, or sibling selectors transparently cross bind scopes and operate on the altered and original content
models.
...an element either ends up underneath its explicit parent (just as in the content
model), or it ends up being nested through a series of insertion points.
Building accessible custom components in XUL - Archive of obsolete content
<caption>focus is tracked properly during keyboard navigation</caption> further reading document object
model events adding editing capabilities download stage-5.zip install stage-5.xpi we now have a fully accessible xul spreadsheet, correctly focusable, correctly keyboard-navigable, and correctly exposed to assistive technologies.
...to maintain compatibility with the accessible html spreadsheet demo, i chose the enter key to trigger editing
mode.
...(we don't need any special code to track the focus change; we just need an onblur handler to accept the edited value before the focus changes.) first, the code to trigger edit
mode: <code> const key_up = 38; const key_down = 40; const key_left = 37; const key_right = 39; const key_enter = 13; const key_escape = 27; function cell_keypress(e) { var current = e.target; switch (e.keycode) { case key_enter: if (current.tagname == 'label') { start_edit(current); } break; case key_up: spreadsheet_up(current); break; ...
startFind - Archive of obsolete content
« xul reference home startfind(
mode ) return type: no return value call this method to handle your application's "find" command.
... the
mode should be one of find_normal, find_typeahead, or find_links.
... if you don't pass a
mode, the last-used
mode for the same findbar is used.
Adding more elements - Archive of obsolete content
<hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="search
mode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog.
...<spacer style="height: 10px"/> <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="search
mode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.
...we will see more examples of the box
model and some of its features as we continue to add elements throughout the tutorial.
Accessibility/XUL Accessibility Reference - Archive of obsolete content
we believe they are using the window class to determine that it is content rather than dialog, but does not support content
mode for xul.
... grid although text in the grid can be read, jaws does not recognize grids as tables for table reading
mode.
... progressmeter <progressmeter
mode="determined" value="10" /> as progress advances, jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows ...
Application Update - Archive of obsolete content
rocess uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.
mode and allows automatic download and // install to take place.
...w the application update service notifies the user about updates: // // aum set to: minor releases: major releases: // 0 download no prompt download no prompt // 1 download no prompt download no prompt if no incompatibilities // 2 download no prompt prompt // // see chart in nsupdateservice.js.in for more details // pref("app.update.
mode", 1); // if set to true, the update service will present no ui for any event.
...pref("app.update.incompatible.
mode", 0); update server follow the instructions here to setup an update server for your xulrunner application to query.
Archived Mozilla and build documentation - Archive of obsolete content
in this article, i will describe mozilla's quirks
mode, which provides strong backwards html compatibility with internet explorer and other legacy browsers.
... supporting private browsing
mode firefox 3.5 introduced private browsing
mode, in which potentially private information is not recorded.
... gecko - the smart embedding choice xbdesign
mode.js xml in mozilla mozilla has a relatively good support for xml.
NPAnyCallbackStruct - Archive of obsolete content
contains information required during embedded
mode printing.
...the npanycallbackstruct structure contains information required by the platformprint field of the npembedprint structure during embedded
mode printing.
... during printing in embedded
mode, the platformprint field of the npembedprint structure points to an npanycallbackstruct.
NPN_GetValue - Archive of obsolete content
; returns hwnd unix/x11: gets the browser toplevel window in which the plug-in is displayed; returns window npnvjavascriptenabledbool: tells whether javascript is enabled; true=javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline
mode is enabled; true=offline
mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwindownpobject: returns the npobject * pointer for the dom window object; see getting the page url in npapi plugin for a rough example npnvpluginelementnpobject: npnvsupportswindowless: tells whether the browser supports windowless plugins.
... npnvprivate
modebool: indicates whether or not the browser is currently in private browsing
mode.
... npnvplugindrawing
model: (mac only) npnvsupportsquickdrawbool : (mac only) npnvsupportscoregraphicsbool : (mac only) value function returns the name of the plug-in in the value parameter.
NPP_New - Archive of obsolete content
syntax #include <npapi.h> nperror npp_new(npmimetype plugintype, npp instance, uint16
mode, int16 argc, char *argn[], char *argv[], npsaveddata *saved); parameters the function has the following parameters: plugintype pointer to the mime type for new plug-in instance.
...
mode display
mode of plug-in.
...it is called after np_initialize and is passed the mime type, embedded or full-screen display
mode, and, for embedded plug-ins, information about html embed arguments.
TCP/IP Security - Archive of obsolete content
security controls exist for network communications at each layer of the tcp/ip
model.
... data link layer controls are applied to all communications on a specific physical link, such as a dedicated circuit between two buildings or a dial-up
modem connection to an internet service provider (isp).
... data link layer controls for dedicated circuits are most often provided by specialized hardware devices known as data link encryptors; data link layer controls for other types of connections, such as dial-up
modem communications, are usually provided through software.
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][
mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][
mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left
mode.
... toolbar[iconsize="large"][
mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][
mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
... using start/end rules instead of left/right rules directions are mirrored in rtl
mode, so left becomes right and right becomes left.
Theme changes in Firefox 3.5 - Archive of obsolete content
browser.xul bug 463189 added a new attribute on the xul window element of browser.xul named browsing
mode.
... the value of this attribute is normal when the private browsing
mode is inactive, and private when it's active.
... this attribute can be used to style different parts of the browser window inside the private browsing
mode.
-ms-high-contrast-adjust - Archive of obsolete content
the -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast
mode.
... initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values auto indicates the applicable css properties will be adjusted as expected when the system is in high contrast
mode.
... none indicates the applicable css properties will not be adjusted when the system is in high contrast
mode.
GetObject - Archive of obsolete content
this object is a microsoft extension and is only supported in internet explorer versions prior to ie 9 (standards
mode).
... remarks the getobject function is not supported in internet explorer 9 standards
mode, internet explorer 10 standards
mode, internet explorer 11 standards
mode, and windows store apps or later.
... requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, and internet explorer 8 standards.
Windows Media in Netscape - Archive of obsolete content
this is the example: needs to be embedded in wiki page (can it just be put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="ui
mode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7.1.
... <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="ui
mode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> your browser does not support the activex windows media player </object> the classid attribute references the clsid of windows media player 7 and above -- windows media player versions before 7 used a different clsid.
... <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="ui
mode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> </object> <script type="text/javascript"> if(!document.playerex2.versioninfo) { // control not installed -- the versioninfo property returns null // redirect users to http://www.microsoft.com/windows/windowsmedia/download/default.asp } else { //control was correctly created //proc...
Building up a basic demo with A-Frame - Game development
a-frame is built on top of webgl, and provides pre built components to use in applications —
models, video players, skyboxes, geometries, controls, animations, cursors, etc.
...you should start off by: making sure you are using a
modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher).
... the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr
mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.
Implementing controls using the Gamepad API - Game development
the code explained below is from the full version of the hungry fridge game, but it's almost identical to the one from the demo — the only difference is that the full version uses the turbo variable to decide whether or not the game will be launched using super turbo
mode.
...it will launch the game in the super turbo
mode and you'll be able to control the fridge with the keyboard: a and d for turning the turret left and right, w for shooting and arrow keys for movement.
...(we could use the gamepad.connected boolean for this purpose, but we wanted to have a separate variable for turning on turbo
mode without needing to have a gamepad connected, for reasons explained above.) disconnect: function(evt) { gamepadapi.turbo = false; delete gamepadapi.controller; console.log('gamepad disconnected.'); }, the disconnect function sets the gamepad.turbo property to false and removes the variable containing the gamepad object.
Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
for justify-self and align-self, the alignment subject is the margin box of the box the property is set on, using the writing
mode of that box.
... for justify-content and align-content, the writing
mode of the box is also used.
... the definition of the alignment subject depends on the layout
mode being used.
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
block ciphers are always used with a
mode, which specifies how to securely encrypt messages that are longer than the block size.
... for example, aes is a cipher, while ctr, cbc, and gcm are all
modes.
... using an inappropriate
mode, or using a
mode incorrectly, can completely undermine the security provided by the underlying cipher.
Introduction to CSS layout - Learn web development
the block direction runs vertically in a language such as english, which has a horizontal writing
mode.
... it would run horizontally in any language with a vertical writing
mode, such as japanese.
...this gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in
modern web design.
Normal Flow - Learn web development
first of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box
model thing again, which we've looked at earlier.
...by default, block-level elements are laid out in the block flow direction, based on the parent's writing
mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them.
... in english therefore, or any other horizontal, top to bottom writing
mode, block-level elements are laid out vertically.
create fancy boxes - Learn web development
before we start getting into the practical side of it, make sure you are familiar with the css box
model.
...all of the following: its box
model properties: width, height, padding, border, etc.
... box
model tweak the box
model alone allows us to do some basic stuff, like adding simple borders, making squares, etc..
How does the Internet work? - Learn web development
all
modern computers can sustain any of those connections.
...to connect our network to the telephone infrastructure, we need a special piece of equipment called a
modem.
... this
modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.
Installing basic software - Learn web development
in this article, we'll just set you up with a bare minimum — a text editor and some
modern web browsers.
... installing
modern web browsers for now, we'll install a couple of desktop web browsers to test our code in.
... note: internet explorer is not compatible with some
modern web features and it may not be able to run your project.
Tips for authoring fast-loading HTML pages - Learn web development
use
modern ajax methods to manipulate page content for
modern browsers, rather than the older approaches based on document.write().
... use
modern css and valid markup use of
modern css reduces the amount of markup, can reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text -- that "cost" much more than the equivalent text-and-css.
... ideally, your basic minimum requirements should be based on the consideration of
modern browsers that support the relevant standards.
Client-side web APIs - Learn web development
this is usually done by using the document object
model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object.
... fetching data from the server another very common task in
modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page.
... client-side storage
modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more.
Object-oriented JavaScript for beginners - Learn web development
the basic idea of oop is that we use objects to
model real world things that we want to represent inside our programs, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.
... objects can contain related data and code, which represent information about the thing you are trying to
model, and functionality or behavior that you want it to have.
...this is known as abstraction — creating a simple
model of a more complex thing, which represents its most important aspects in a way that is easy to work with for our program's purposes.
What is web performance? - Learn web development
the document object
model.
... the document object
model, or dom, is a tree structure that represents the content and elements of your html as a tree of nodes.
...find out more at document object
model.
Multimedia: video - Learn web development
playsinline is required for mobile safari, allowing videos to play without forcing fullscreen
mode.
... offering more
modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load.
... this is a useful option for some small or
moderately sized files.
Working with Svelte stores - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development
mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/07-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-next-steps remember to run npm install && npm run dev to start your app in development
mode.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Dynamic behavior in Svelte: working with variables and props - Learn web development
e the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development
mode.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development
mode.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-
model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <s...
... getting back out of edit
mode first, we need to add an itemedited() method to our todoitem component's methods.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Getting started with Vue - Learn web development
a clearer vue vue is a
modern javascript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use vue to enhance existing html.
... babel.config.js: this is the config file for babel, which transforms
modern javascript features being used in development code into older syntax that is more cross-browser compatible in production code.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Introducing a complete toolchain - Learn web development
jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers,
modern and older.
...this means that if this project is installed in production
mode these dependencies will not be installed.
...in its default
mode it will watch for changes in your code and automatically install your dependencies.
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of
modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
... overview of
modern tooling writing software for the web has become more sophisticated through the ages.
... the
modern tooling ecosystem today's
modern developer tooling ecosystem is huge, so it's useful to have a broad idea of what main problems the tools are solving.
The Firefox codebase: CSS Guidelines
high contrast
mode content area on windows high contrast
mode, in the content area, gecko does some automatic color adjustments regarding page colors.
... part of those adjustments include making all box-shadow invisible, so this is something to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-contrast
mode.
... another adjustment to be aware of is that gecko removes all the background-image when high contrast
mode is enabled.
Reviewer Checklist
new files have license declarations and
modelines.
... new js files should use strict
mode.
... [fennec: when writing tests that use paintedsurface, ensure the paintedsurface is closed when you're done with it.] performance impact check for main-thread io [fennec: android may warn about this with strict
mode].
Overview of Mozilla embedding APIs
mozilla's xpcom layer consists of a component
model (called xpcom) and the infrastructure necessary to support dynamic registration, instantiation and manipulation of xpcom components.
...saving documents notification interfaces which the embedding application should implement nsfile public interfaces nsisupports base component object
model interface.
... this interface provides runtime interface discovery and a reference counted memory
model fashioned after the microsoft com iunknown interface.
Script security
the security
model for web content is based on the same-origin policy, in which code gets full access to objects from its origin but highly restricted access to objects from a different origin.
...from the point of view of chrome code, the script security
model in gecko is intended to provide that help to make writing secure, system-privileged javascript a realistic expectation.
... this also enables the script security
model to treat compartments that have expanded principals more like part of the browser than like web content.
Getting Started with Chat
simply type them into the message box at the bottom of the screen and press enter: /join #channel joins you to the specified channel until you quit your irc client or quit the channel /leave leave the current channel /
mode #channel +k password sets a password for the channel.
... /
mode #channel +o nickname sets specified user as an owner or
moderator of the specified channel.
... /
mode #channel +s sets the channel as a secret channel.
DownloadLastDir.jsm
ifile downloadlastdir.setfile(uri, file); to retrieve the path in firefox 26 or later, use getfileasync: downloadlastdir.getfileasync(uri, function (file) { // file is an nsifile console.log(file); }); deprecated since gecko 26.0 to retrieve the path in firefox 25 or earlier, use getfile: // file is an nsifile var file = gdownloadlastdir.getfile(uri); console.log(file); private browsing
mode when browsing normally, the browser uses the browser.download.lastdir preference to store the last download directory path.
... however, when private browsing
mode is enabled, the last download directory path is instead maintained in memory, and the preference is not changed.
... when the user exits private browsing
mode, the last download directory value is reverted to the preference's value.
OS.File.Info
unix
mode a number holding the unix access rights to this file.
...this is the date of the latest write/renaming/
mode change/...
...is any write/set of inode information (such as owner, group, link count,
mode, etc).
openLocationLastURL.jsm
if the user is not in private browsing
mode, this automatically updates the value of the general.open_location.last_url preference.
... note: this module automatically handles private browsing
mode for you.
... the value preserved across accesses is not preserved when the user exits private browsing
mode.
MathML Torture Test
mathml torture test html content <p> render mathematics with: <select name="mathfont" id="mathfont"> <option value="default" selected="selected">default fonts</option> <option value="asana">asana</option> <option value="cambria">cambria</option> <option value="dejavu">dejavu</option> <option value="latin
modern">latin
modern</option> <option value="libertinus">libertinus</option> <option value="lucidabright">lucida bright</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> ...
...n; border-collapse: collapse; margin-left: auto; margin-right: auto; } th { background-color: #ddf; border: solid thin; color: black; padding: 5px; } td { border: solid thin; padding: 5px; text-align: center; } .asana math { font-family: asana math; } .cambria math { font-family: cambria math; } .dejavu math { font-family: dejavu math tex gyre; } .latin
modern math { font-family: latin
modern math; } .libertinus math { font-family: libertinus math; } .lucidabright math { font-family: lucida bright math; } .minion math { font-family: minion math; } .stixtwo math { font-family: stix two math; } .texgyrebonum math { font-family: tex gyre bonum math; } .texgyrepagella math { font-family: tex gyre pagella math; } .texgyreschola math { font-f...
...it compares the rendering by the xetex engine using the default latin
modern math font against the mathml rendering by your browser using the default math font, or an alternative opentype math fonts.
Activity Monitor, Battery Status Menu and top
careful investigation indicates that on mac os 10.10 and 10.11 it is computed with a formula that is machine
model-specific, and includes the following factors: cpu usage, wakeup frequency, quality of service class usage, and disk, gpu, and network activity.
... ioreg -l | grep board-id in contrast, on mac os 10.9 it is computed via a simpler machine
model-independent formula that only factors in cpu usage and wakeup frequency.
... top -stats pid,command,cpu,idlew,power -o power -d note: -a and -e can be used instead of -d to get different counting
modes.
Power profiling overview
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.
... pp1: an uncore device, usually the gpu (not available on all processor
models.) dram: main memory (not available on all processor
models.) the following relationship holds: pp0 + pp1 <= pkg.
... these values are computed using a power
model that uses processor-internal counts as inputs, and they have been verified as being fairly accurate.
Midas
internet explorer supports the ability to make an entire document editable by setting the design
mode property of the document object; this is how midas is invoked in gecko.
... properties document.design
mode by setting this property to "on", the document becomes editable.
... examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midasform" src="about:blank" onload="this.contentdocument.design
mode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command.
PR_OpenSemaphore
syntax #include <pripcsem.h> #define pr_sem_create 0x1 /* create if not exist */ #define pr_sem_excl 0x2 /* fail if already exists */ nspr_api(prsem *) pr_opensemaphore( const char *name, printn flags, printn
mode, pruintn value ); parameters the function has the following parameters: name the name to be given the semaphore.
...
mode unix style file
mode to be used when creating the semaphore.
... if pr_sem_create is specified, the third argument is the access permission bits of the new semaphore (same interpretation as the
mode argument to pr_open) and the fourth argument is the initial value of the new semaphore.
PR_SetConcurrency
description setting concurrency controls the number of virtual processors that nspr uses to implement its m x n threading
model.
... the m x n
model is not available on all host systems.
...since global threads are scheduled by the host operating system, this
model is particularly applicable to multiprocessor architectures, where true parallelism is possible.
NSS FAQ
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.
...mozilla strongly recommends that multithreaded applications use the nspr or native os threading
model.
... (in recent nspr releases, the nspr threading
model is compatible with the native threading
model if the os has native threads.) alternatively, you can adapt the open-source nspr implementation to be compatible with your existing application's threading
models.
NSS 3.12.4 release notes
ceeds 384 bytes bug 487736: libpkix passes wrong argument to der_decodetimechoice and crashes bug 487858: remove obsolete build options mozilla_security_build and mozilla_bsafe_build bug 487884: object leak in libpkix library upon error bug 488067: pk11_importcrl reports sec_error_crl_not_found when it fails to import a crl bug 488350: nspr-free freebl interface need to do post tests only in fips
mode.
...[[@isspace - secmod_argisblank - secmod_arghasblanks - secmod_formatpair - secmod_mknewmodulespec] bug 498509: produce debuggable optimized builds for mozilla on macosx bug 498511: produce debuggable optimized nss builds for mozilla on linux bug 499385: drbg reseed function needs to be tested on post bug 499825: utilrename.h is missing from solaris packages bug 502961: allocator mismatch in pk11
mode bug 502965: allocator mismatch in sdrtest bug 502972: another allocator mismatch in sdrtest bug 504398: pkix_pl_aiamgr_gethttpcerts could crash if sec_getregisteredhttpclient fails bug 504405: pkix_pl_crldp_create will fail on alloc success because of a missing !
...bug 505858: nss_registershutdown can return without unlocking nssshutdownlist.lock bug 507041: invalid build options for vc6 bug 507228: coreconf.dep doesn't need to contain the nss version number bug 507422: crash [[@ port_freearena - lg_mksecretkeyrep] when port_newarena fails bug 507482: nss 3.12.3 (and later) doesn't build on aix 5.1 bug 507937: pwdecrypt program problems bug 508259: pk11
mode crashed on linux2.4 bug 508467: libpkix ocsp checker should use date argument to obtain the time for cert validity verification bug 510367: fix the utf8 characters in the nickname string for ac raíz certicamara s.a.
NSS 3.24 release notes
counter
mode and galois/counter
mode (gcm) have checks to prevent counter overflow.
...this
mode is triggered by setting the database password to the empty string.
... in fips
mode, you may move from level 1 to level 2 (by setting an appropriate password), but not the reverse.
Python binding for NSS
all command line process in test and examples now uses
modern argparse module instead of deprecated getopt and optparse.
...ge_flags nss.list_certs nss.find_certs_from_email_addr nss.find_certs_from_nickname nss.nss_get_version nss.nss_version_check nss.set_shutdown_callback nss.get_use_pkix_for_validation nss.set_use_pkix_for_validation nss.enable_ocsp_checking nss.disable_ocsp_checking nss.set_ocsp_cache_settings nss.set_ocsp_failure_
mode nss.set_ocsp_timeout nss.clear_ocsp_cache nss.set_ocsp_default_responder nss.enable_ocsp_default_responder nss.disable_ocsp_default_responder the following files were added: src/py_traceback.h doc/examples/verify_cert.py test/test_misc.py the following constants were added: nss.ku_digi...
...s.certusagesslclient nss.certusagesslserver nss.certusagesslserverwithstepup nss.certusagesslca nss.certusageemailsigner nss.certusageemailrecipient nss.certusageobjectsigner nss.certusageusercertimport nss.certusageverifyca nss.certusageprotectedobjectsigner nss.certusagestatusresponder nss.certusageanyca nss.ocsp
mode_failureisverificationfailure nss.ocsp
mode_failureisnotaverificationfailure internal changes reimplement exception handling nsprerror is now derived from standardexception instead of environmenterror.
NSS tools : pk12util
pkcs12 v2 pbe with sha1 and 40 bit rc4 is the default for the overall package encryption when not in fips
mode.
... when in fips
mode, there is no package encryption.
...128-cbc o camellia-192-cbc o camellia-256-cbc pkcs#12 pbe ciphers o pkcs #12 pbe with sha1 and 128 bit rc4 o pkcs #12 pbe with sha1 and 40 bit rc4 o pkcs #12 pbe with sha1 and triple des cbc o pkcs #12 pbe with sha1 and 128 bit rc2 cbc o pkcs #12 pbe with sha1 and 40 bit rc2 cbc o pkcs12 v2 pbe with sha1 and 128 bit rc4 o pkcs12 v2 pbe with sha1 and 40 bit rc4 (the default for non-fips
mode) o pkcs12 v2 pbe with sha1 and 3key triple des-cbc o pkcs12 v2 pbe with sha1 and 2key triple des-cbc o pkcs12 v2 pbe with sha1 and 128 bit rc2 cbc o pkcs12 v2 pbe with sha1 and 40 bit rc2 cbc pkcs#5 pbe ciphers o pkcs #5 password based encryption with md2 and des cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pk...
NSS Tools modutil
o svcpkcs #11 version 2.0library version: 4.0cipher enable flags: nonedefault mechanism flags: rsa:dsa:rc2:rc4:des:sha1:md5:md2slot: communicator internal cryptographic services version 4.0manufacturer: netscape communications corp type: softwareversion number: 4.1firmware version: 0.0status: enabledtoken name: communicator generic crypto svcstoken manufacturer: netscape communications corp token
model: libsec 4.0 token serial number: 0000000000000000token version: 4.0token firmware version: 0.0access: write protectedlogin type: public (no login required)user pin: not initializedslot: communicator user private key and certificate servicesmanufacturer: netscape communications corp type: softwareversion number: 3.0firmware version: 0.0status: enabledtoken name: communicator certificate db token ...
...manufacturer: netscape communications corp token
model: libsec 4.0 token serial number: 0000000000000000token version: 7.0token firmware version: 0.0access: not write protectedlogin type: login requireduser pin: not initialized setting a default provider this example makes the specified module a default provider for the rsa, dsa, and rc2 security mechanisms: modutil -default "cryptographic module" -dbdir c:\databases -mechanisms rsa:dsa:rc2 the security module database tool displays a warning: warning: performing this operation while communicator is running couldcause corruption of your security databases.
...type'q <enter>' to abort, or <enter> to continue: after you press enter, the tool displays the following: fips
mode enabled.
NSS tools : pk12util
pkcs12 v2 pbe with sha1 and 40 bit rc4 is the default for the overall package encryption when not in fips
mode.
... when in fips
mode, there is no package encryption.
...128 bit rc4 o pkcs #12 pbe with sha1 and 40 bit rc4 o pkcs #12 pbe with sha1 and triple des cbc o pkcs #12 pbe with sha1 and 128 bit rc2 cbc o pkcs #12 pbe with sha1 and 40 bit rc2 cbc o pkcs12 v2 pbe with sha1 and 128 bit rc4 o pkcs12 v2 pbe with sha1 and 40 bit rc4 (the default for non-fips
mode) o pkcs12 v2 pbe with sha1 and 3key triple des-cbc o pkcs12 v2 pbe with sha1 and 2key triple des-cbc o pkcs12 v2 pbe with sha1 and 128 bit rc2 cbc o pkcs12 v2 pbe with sha1 and 40 bit rc2 cbc pkcs#5 pbe ciphers pkcs #5 password based encryption with md2 and des cbc o pkcs #5 password based encryption with m...
Rhino optimization
optimization settings the currently supported optimization settings are: -1 interpretive
mode is always used.
...another benefit of the interpreted
mode is that the interpreter performs tail-call elimination of recursive functions.
...the bytecode compiler runs fastest in this
mode, but the generated byte code is less efficient.
JIT Optimization Outcomes
this failure
mode is unlikely and occurs if the target object is obtained in some roundabout way.
...this is an unlikely failure
mode, and should not occur.
... indictionary
mode the object whose property is being accessed is in dictionary
mode.
JSCheckAccessOp
(it is also the type of the callback set by js_setcheckobjectaccesscallback.) syntax typedef jsbool (* jscheckaccessop)(jscontext *cx, jsobject *obj, jsval id, jsaccess
mode mode, jsval *vp); name type description cx jscontext * the js context in which the property access attempt is occurring.
...
mode jsaccess
mode the type of access being checked.
... description check whether obj[id] may be accessed per
mode, returning js_false on error/exception, js_true on success with obj[id]'s stored value in *vp.
JSErrorReport
jsreport_strict this error is only being reported because the engine is in strict
mode.
... jsreport_strict_
mode_error this condition is an error in strict
mode code, a warning if js_has_strict_option(cx), and otherwise should not be reported at all.
... jsreport_is_strict_
mode_error(flags) returns true if flags has jsreport_strict_
mode_error.
JSPrincipalsTranscoder
principalsp jsprincipals ** if xdr->
mode == jsxdr_decode, this is an out parameter: on success, *principalsp receives the deserialized principals.
... otherwise xdr->
mode == jsxdr_encode, and *principalsp points to the jsprincipals object to be serialized.
... the callback xdr-encodes or -decodes a principals instance, based on whether xdr->
mode is jsxdr_encode, in which case *principalsp should be encoded; or jsxdr_decode, in which case implementations must return a held (via jsprincipals_hold), non-null *principalsp out parameter.
JS_CheckAccess
syntax jsbool js_checkaccess(jscontext *cx, jsobject *obj, jsid id, jsaccess
mode mode, jsval *vp, unsigned int *attrsp); name type description cx jscontext * the context in which to perform the access check.
...
mode jsaccess
mode the type of access requested (read, write, etc.) vp jsval * out parameter.
... the
mode parameter specifies what kind of access to check for.
SpiderMonkey 1.8.5
the type of setters has changed from jspropertyop to jsstrictpropertyop (to accomodate es5 strict
mode).
...new javascript language features javascript 1.8.5 adds support for ecmascript edition 5, including es5 strict
mode.
... jsxdrapi changes were missed jsstrictpropertyop for setters (affects jsclass) - maybe general notes about es5 strict
mode changes in jsapi tricks like argv[-2] not guaranteed to work any more; is js_callee or similar instead ...
Places Developer Guide
there are two
models of identity in the system: uris, and unique integer identifiers for items in the bookmark system.
...the bookmarks datastore is hierarchical,
modeling folders and their contents.
...var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var query = historyservice.getnewquery(); var options = historyservice.getnewqueryoptions(); options.sorting
mode = options.sort_by_visitcount_descending; options.maxresults = 10; // execute the query var result = historyservice.executequery(query, options); // iterate over the results result.root.containeropen = true; var count = result.root.childcount; for (var i = 0; i < count; i++) { var node = result.root.getchild(i); // do something with the node properties...
Accessing the Windows Registry Using XPCOM
the third parameter for open() and create() is the access
mode.
...you can read the interface documentation for a full explanation, but we will show only the three most commonly used
modes here: access_read — for reading values, enumerating keys, and receiving notifications access_write — for setting values and creating sub keys access_all — access for all operations in addition to open() and create(), there are the openchild() and createchild() methods.
...both methods take a relative path and access
mode as parameters and return a new object implementing nsiwindowsregkey.
Creating the Component Code
what we'll be working on the component we'll be working on in this book controls a special
mode in your browser that prevents users from leaving the current domain or a set of safe domains.
... once enabled, this "weblock"
mode is password protected and persists until it is turned off by the password holder.
...web lock user interface shows the icon that is used to activate the web lock
mode (leftmost in the status bar) once you have installed the weblock component and the extra user interface.
Mozilla internal string guide
in order to avoid unnecessary copying of string data (which can have significant performance cost), the string classes support different ownership
models.
... all string classes support the following three ownership
models dynamically: reference counted, copy-on-write, buffers (the default) adopted buffers (a buffer that the string class owns, but is not reference counted, because it came from somewhere else) dependent buffers, that is, an underlying buffer that the string class does not own, but that the caller that constructed the string guarantees will outlive the string instance in addition, there is a special string class, ns[c]autostring, that additionally contains an internal 64-unit buffer (intended primarily for use on the stack), leading to a fourth ownership
model: storage within an auto string's stack buffer auto strings will prefer reference counting an existing reference-counted buffer over their stack buffer, but will oth...
...these types are really just convenient notation for constructing an ns[c]s[ubs]tring with a non-default ownership
mode; they should not be thought of as different types.
Introduction to XPCOM for the DOM
however in idl we have to use the so-called "intercaps"
model.
...note that the same intercaps
model applies to idl attributes as well.
... interface inheritance (advanced topic) the inheritance
model in mozilla is of course the same as the class inheritance
model of c++.
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 "interactive"
mode) -f this option specifies a script file to execute.
... -i this option turns on the "interactive"
mode -s this option toggles the javascript strict option on and off.
Observer Notifications
this can happen multiple times, such as when the window first opens, when multiple items are removed, and when entering private browsing
mode.
... topic data description private-browsing enter sent when private browsing
mode is activated.
... private-browsing exit sent when private browsing
mode is deactivated.
imgIContainer
animation
mode unsigned short currentframe gfxasurface get a surface for the current frame.
... frame_current 1 frame_max_value 1 knormalanim
mode 0 animation
mode constants 0 = normal 1 = do not animate 2 = loop once.
... kdontanim
mode 1 klooponceanim
mode 2 kdisposeclearall -1 "disposal" method indicates how the image should be handled before the subsequent image is displayed.
imgIRequest
x 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void cancelandforgetobserver(in nsresult astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description cors
mode long the cors
mode that this image was loaded with.
... cors_none 1 cors
modes images can be loaded with.
...if an html img element has the crossorigin attribute set, the imgirequest will be validated for cross-origin usage with cors, and, if successful, will have its cors
mode set to the relevant type.
nsICacheListener
inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void oncacheentryavailable(in nsicacheentrydescriptor descriptor, in nscacheaccess
mode accessgranted, in nsresult status); void oncacheentrydoomed(in nsresult status); methods oncacheentryavailable() this method is called when the requested access (or appropriate subset) is acquired.
...void oncacheentryavailable( in nsicacheentrydescriptor descriptor, in nscacheaccess
mode accessgranted, in nsresult status ); parameters descriptor the cache entry descriptor.
... accessgranted the cache access
mode.
nsINavBookmarksService
solete since gecko 2.0 void removefolder(in long long afolder); obsolete since gecko 2.0 void removefolderchildren(in long long aitemid); void removeitem(in long long aitemid); void removeobserver(in nsinavbookmarkobserver observer); void replaceitem(in print64 folder, in nsiuri item, in nsiuri newitem); obsolete since gecko 1.9 void runinbatch
mode(in nsinavhistorybatchcallback acallback, in nsisupports auserdata); void setfolderreadonly(in long long afolder, in boolean areadonly); void setfoldertitle(in print64 folder, in astring title); obsolete since gecko 1.9 void setitemdateadded(in long long aitemid, in prtime adateadded); void setitemguid(in long long aitemid, in astring aguid); obsolete since ...
... runinbatch
mode() this method runs the passed callback in batch
mode (inside a database transaction).
... void runinbatch
mode( in nsinavhistorybatchcallback acallback, in nsisupports auserdata ); parameters acallback nsinavhistorybatchcallback interface to call.
nsINavHistoryResultViewer
sultnode anode, in autf8string anewuri); void nodereplaced(in nsinavhistorycontainerresultnode parent, in nsinavhistoryresultnode olditem, in nsinavhistoryresultnode newitem, in unsigned long index); void nodeinserted(in nsinavhistorycontainerresultnode aparent, in nsinavhistoryresultnode anode , in unsigned long anewindex); void sortingchanged(in unsigned short sorting
mode); attributes attribute type description result nsinavhistoryresult the nsinavhistoryresult this viewer monitors.
... sortingchanged() called when the sorting order is changed to a particular
mode.
... void sortingchanged( in unsigned short sorting
mode ); parameters sorting
mode one of the nsinavhistoryqueryoptions.sort_by_* constants, indicating the softing
mode.
nsINavHistoryService
aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void addobserver(in nsinavhistoryobserver observer, in boolean ownsweak); void removeobserver(in nsinavhistoryobserver observer); void runinbatch
mode(in nsinavhistorybatchcallback acallback, in nsisupports aclosure); void importhistory(in nsifile file); astring getcharsetforuri(in nsiuri auri); astring setcharsetforuri(in nsiuri auri, in astring acharset); attributes attribute type description hashistoryentries boolean true if there is any history.
... runinbatch
mode() this method runs the passed callback in batch
mode.
... void runinbatch
mode( in nsinavhistorybatchcallback acallback, in nsisupports aclosure ); parameters acallback nsinavhistorybatchcallback interface to call.
nsITransactionManager
beginbatch() turns on the transaction manager's batch
mode, forcing all transactions executed by the transaction manager's dotransaction() method to be aggregated together until endbatch() is called.
... this
mode allows an application to execute and group together several independent transactions so they can be undone with a single call to undotransaction().
... endbatch() turns off the transaction manager's batch
mode.
Using the clipboard
the clipboard
model in mozilla requires you to perform the following steps to copy data: create an xpcom wrapper for the data which you want to put on the clipboard.
...this ensures that if the copied data comes from a window in private browsing
mode, the clipboard will be cleared when private browsing
mode ends.
...next we need to initialize it with a "privacy context", which will ensure that source data from inside private browsing
mode will be cleared when the
mode is exited.
Index
but this is not a common usage
model.
...the result is a javascript file that will add a "numbers" container to the end of thunderbird's "all folders"
mode.
...it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object
model.
MailNews fakeserver
onmultiline sent line server's response or nothing called when in multi-line
mode.
...it will also properly queue all messages sent in pipelining
mode and will present lines without any eol characters.
... setmultiline the new value of multiline nothing the value is a boolean, with true invoking multiline
mode.
Scripting plugins - Plugins
the new nppvariable enumeration is defined in npapi.h as: nppvpluginscriptablenpobject = 15 threading
model this api is not designed to be thread safe.
... the threading
model for this api is such that all calls through this api are synchronous and calls from a plugin to methods in this api must come from the thread on which the plugin was initiated, and likewise all calls to methods in this api by the browser are guaranteed to come from the same thread.
... security
model the security
model for making calls through this api is much like the general same-origin security
model enforced by the browser.
Gecko Plugin API Reference - Plugins
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime
model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display
modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawi...
...ssage making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access
mode sending the stream in file
mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flus...
... scripting plugins how the dom handles scripting threading
model security
model what's in the plugin code?
Debugger.Object - Firefox Developer Tools
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.
... note that, like evalinglobal, if the code passed to evalinglobalwithbindings is not strict
mode code, then any declarations it contains affect the referent global object, even ascode is evaluated in an environment extended according tobindings.
All keyboard shortcuts - Firefox Developer Tools
pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design
mode ctrl + shift + m cmd + opt + m ctrl + shift + m open browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt + shift + i open scratchpad shift + f4 shift + f4 * shift + f4 open webide shift + f8 shift + f8 * shift + f8 st...
... f1 f1 f1 toggle toolbox between the last 2 docking
modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox.
... 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.
Tips - Firefox Developer Tools
viewport: click the screenshot button () in responsive design
mode.
... when selecting elements: shift + click to select an element but keep selecting (picker
mode doesn't disengage).
... click an @media rule to apply it in responsive design
mode.
Toolbox - Firefox Developer Tools
docking
mode by default, the toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the toolbar.
...by default this array includes: toggle split console responsive design
mode select a frame as the currently targeted document (this is only included by default from firefox 41 onwards).
... f1 f1 f1 toggle toolbox between the last 2 docking
modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox.
AbsoluteOrientationSensor - Web APIs
on each reading it uses orientationsensor.quaternion to rotate a visual
model of a phone.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { //
model is a three.js object instantiated elsewhere.
...
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requesting permissions for multiple device sensors.
AudioNode.channelCount - Web APIs
channelcount's usage and precise definition depend on the value of audionode.channelcount
mode: it is ignored if the channelcount
mode value is max.
... it is used as a maximum value if the channelcount
mode value is clamped-max.
... it is used as the exact value if the channelcount
mode value is explicit.
CSSStyleSheet.insertRule() - Web APIs
ackslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertrule.call(this, selectorandrule, "", arguments[2]); }; } })(cssstylesheet.prototype); specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.insertrule' in that specification.
... working draft no change from document object
model (dom) level 2 style specification.
... document object
model (dom) level 2 style specificationthe definition of 'cssstylesheet.insertrule' in that specification.
Comment - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'comment' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'comment' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'comment' in that specification.
DOMImplementation - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'domimplementation' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'domimplementation' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'domimplementation' in that specification.
Document.createAttribute() - Web APIs
living standard precised behavior with uppercase characters document object
model (dom) level 3 core specificationthe definition of 'document.createattribute()' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'document.createattribute()' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'document.createattribute()' in that specification.
Document.createProcessingInstruction() - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'createprocessinginstruction()' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'createprocessinginstruction()' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'createprocessinginstruction()' in that specification.
Document: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot switch to full-screen
mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreenchange event, two fullscreenerror events are fired; the first is sent to the element which failed to change
modes, and the second is sent to the document which owns that element.
... for some reasons that switching into full-screen
mode might fail, see the guide to the fullscreen api.
Document.getElementById() - Web APIs
specification specification status comment document object
model (dom) level 1 specificationthe definition of 'getelementbyid' in that specification.
... obsolete initial definition for the interface document object
model (dom) level 2 core specificationthe definition of 'getelementbyid' in that specification.
... obsolete supersede dom 1 document object
model (dom) level 3 core specificationthe definition of 'getelementbyid' in that specification.
Document.scrollingElement - Web APIs
in standards
mode, this is the root element of the document, document.documentelement.
... when in quirks
mode, the scrollingelement attribute returns the html body element if it exists and is not potentially scrollable, otherwise it returns null.
... syntax var element = document.scrollingelement; example var scrollelm = document.scrollingelement; scrollelm.scrolltop = 0; specifications specification status comment css object
model (cssom) view modulethe definition of 'scrollingelement' in that specification.
DocumentFragment - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'documentfragment' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'documentfragment' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'documentfragment' in that specification.
Element.attributes - Web APIs
living standard from document object
model (dom) level 3 core specification, moved from node to element document object
model (dom) level 3 core specificationthe definition of 'element.attributes' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'element.attributes' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'element.attributes' in that specification.
Element.clientHeight - Web APIs
when clientheight is used on the root element (the <html> element), (or on <body> if the document is in quirks
mode), the viewport's height (excluding any scrollbar) is returned.
... example specification specification status comment css object
model (cssom) view modulethe definition of 'clientheight' in that specification.
... working draft notes clientheight is a property introduced in the internet explorer object
model.
Element.clientWidth - Web APIs
when clientwidth is used on the root element (the <html> element), (or on <body> if the document is in quirks
mode), the viewport's width (excluding any scrollbar) is returned.
... example specification specification status comment css object
model (cssom) view modulethe definition of 'clientwidth' in that specification.
... working draft notes clientwidth was first introduced in the ms ie dhtml object
model.
Element: fullscreenerror event - Web APIs
the fullscreenerror event is fired when the browser cannot switch to full-screen
mode.
... bubbles yes cancelable no interface event event handler property onfullscreenerror as with the fullscreenchange event, two fullscreenerror events are fired; the first is sent to the element which failed to change
modes, and the second is sent to the document which contains that element.
... for some reasons that switching into full-screen
mode might fail, see the guide to the fullscreen api.
Element.getBoundingClientRect() - Web APIs
the element's size is equal to its width/height + padding + border-width in the case that the standard box
model is being used, or width/height only if box-sizing: border-box has been set on it.
... specifications specification status comment css object
model (cssom) view modulethe definition of 'element.getboundingclientrect()' in that specification.
... working draft initial definition notes the returned domrect object can be modified in
modern browsers.
Element.getElementsByTagName() - Web APIs
living standard changed the return value from nodelist to htmlcollection document object
model (dom) level 3 core specificationthe definition of 'element.getelementsbytagname()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'element.getelementsbytagname()' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'element.getelementsbytagname()' in that specification.
Element.getElementsByTagNameNS() - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'element.getelementsbytagnamens()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
... document object
model (dom) level 2 core specificationthe definition of 'element.getelementsbytagnamens()' in that specification.
Element.onfullscreenerror - Web APIs
the element interface's onfullscreenerror property is an event handler for the fullscreenerror event which is sent to the element when an error occurs while attempting to transition into or out of full-screen
mode.
... example this example attempts to switch into full-screen
mode from outside a handler for a user-initiated event (such as a click or keypress event).
... since full-screen
mode changes are only permitted in response to a user input, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen
mode."); }; //....
Event.composedPath() - Web APIs
this does not include nodes in shadow trees if the shadow root was created with its shadowroot.
mode closed.
...the only difference between the two is that their shadow roots are attached with their
modes set to open and closed respectively.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> e...
Event.eventPhase - Web APIs
event listeners registered for capture
mode when eventtarget.addeventlistener() was called are triggered during this phase.
... example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing
mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; ...
... obsolete document object
model (dom) level 2 events specificationthe definition of 'event.eventphase' in that specification.
FullscreenOptions.navigationUI - Web APIs
the fullscreenoptions dictionary's navigationui property is used when calling requestfullscreen() to specify to what extent the user agent should include its standard user interface while the element is presented in full-screen
mode.
... example in this example, the entire document is placed into full-screen
mode by calling requestfullscreen() on the document's document.documentelement, which is the document's root <html> element.
... let elem = document.documentelement; elem.requestfullscreen({ navigationui: "show" }).then({}).catch(err => { alert(`an error occurred while trying to switch into full-screen
mode: ${err.message} (${err.name})`); }); the promise's resolve handler does nothing, but if the promise is rejected, an error message is displayed by calling alert().
HTMLAnchorElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlanchorelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlanchorelement' in that specification.
HTMLAreaElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlareaelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlareaelement' in that specification.
HTMLBodyElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification.
HTMLButtonElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlbuttonelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlbuttonelement' in that specification.
HTMLElement: input event - Web APIs
bubbles yes cancelable no interface inputevent event handler property globaleventhandlers.oninput the event also applies to elements with contenteditable enabled, and to any element when design
mode is turned on.
... in the case of contenteditable and design
mode, the event target is the editing host.
... living standard document object
model (dom) level 3 events specificationthe definition of 'input event' in that specification.
HTMLElement - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'htmlelement' in that specification.
... document object
model (dom) level 2 html specificationthe definition of 'htmlelement' in that specification.
... obsolete no change from document object
model (dom) level 2 html specification document object
model (dom) level 1 specificationthe definition of 'htmlelement' in that specification.
HTMLFrameSetElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlbodyelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlbodyelement' in that specification.
HTMLHRElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlhrelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlhrelement' in that specification.
HTMLInputElement - Web APIs
input
mode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
... document object
model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlinputelement' in that specification.
HTMLLIElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmllielement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmllielement' in that specification.
HTMLLabelElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmllabelelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmllabelelement' in that specification.
HTMLLegendElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmllegendelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmllegendelement' in that specification.
HTMLMapElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlareaelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlareaelement' in that specification.
HTMLMetaElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlmetaelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlmetaelement' in that specification.
HTMLParagraphElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlparagraphelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlparagraphelement' in that specification.
HTMLParamElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlparamelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlparamelement' in that specification.
HTMLPreElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlpreelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlpreelement' in that specification.
HTMLTextAreaElement - Web APIs
input
mode maxlength long: returns / sets the element's maxlength attribute, indicating the maximum number of characters the user can enter.
... document object
model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltextareaelement' in that specification.
HTMLTrackElement - Web APIs
usage notes loading of the track's text resource the webvtt or ttml data describing the actual cues for the text track isn't loaded if the track's
mode is initially in the disabled state.
... if you need to be able to perform any processing on the track after the <track> is set up, you should instead ensure that the track's
mode is either hidden (if you don't want it to start out being presented to the user) or showing (to initially display the track).
... you can then change the
mode as desired later.
IDBObjectStoreSync - Web APIs
mode readonly unsigned short the
mode for isolating access to the data in this object store.
... constants
mode constants constant value description read_only 1 modification operations are not allowed on this object store.
... openindex() opens the index with the given name, using the
mode of the current transaction.
Browser storage limits and eviction criteria - Web APIs
note: the information below should be fairly accurate for most
modern browsers, but browser specifics are called out where known.
... note: in private browsing
mode, most data storage is not supported.
...it doesn't matter if box
mode is "best-effort" or "persistent" — data is stored under <profile>/storage/default.
MediaDevices.getUserMedia() - Web APIs
for example, on mobile devices, the following will prefer the front camera (if one is available) over the rear one: { audio: true, video: { facing
mode: "user" } } to require the rear camera, use: { audio: true, video: { facing
mode: { exact: "environment" } } } another non-number constraint is the deviceid constraint.
... note: the security
model for getusermedia() is still somewhat in flux.
... var front = false; document.getelementbyid('flip-button').onclick = function() { front = !front; }; var constraints = { video: { facing
mode: (front?
MediaTrackSettings - Web APIs
for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facing
mode or groupid.
... facing
mode a domstring indicating the current value of the facing
mode property, specifying the direction the camera is facing.
... resize
mode a domstring indicating the current value of the resize
mode property, specifying the
mode used by the user agent to derive the resolution of the track.
MouseEvent.altKey - Web APIs
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.button - Web APIs
.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } } result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.button' in that specification.
... obsolete compared to document object
model (dom) level 2 events specification, the return value can be negative.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.button' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.initMouseEvent() - Web APIs
se(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulateclick(); result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.initmouseevent()' in that specification.
... obsolete from document object
model (dom) level 2 events specification, deprecated.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.initmouseevent()' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.relatedTarget - Web APIs
working draft document object
model (dom) level 3 events specificationthe definition of 'mouseevent.relatedtarget' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
... obsolete no change from document object
model (dom) level 2 events specification.
... document object
model (dom) level 2 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
msIsBoxed - Web APIs
msisboxed is a property which gets or sets when the video player control is in boxed (letterbox or pillarbox)
mode.
... returns true if the video is in letterbox or pillarbox
mode.
... syntax isboxed = object.msisboxed value boolean value set to true activates boxed
mode for the video player.
NamedNodeMap - Web APIs
living standard deals with attr instead of node document object
model (dom) level 3 core specificationthe definition of 'namednodemap' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'namednodemap' in that specification.
... obsolete added getnameditemns(), setnameditemns() and removenameditemns() document object
model (dom) level 1 specificationthe definition of 'namednodemap' in that specification.
Navigator.getUserMedia() - Web APIs
for details, see the constraints section under the
modern mediadevices.getusermedia() method, as well as the article capabilities, constraints, and settings.
... }; } errorcallback when the call fails, the function specified in the errorcallback is invokedwith a mediastreamerror object as its sole argument; this object is is
modeled on domexception.
...note that this is the deprecated way of doing it: see the examples section under the mediadevices.getusermedia() for
modern examples.
Online and offline events - Web APIs
this property is updated whenever the user switches into "offline
mode" by selecting the corresponding menu item (file -> work offline in firefox).
... firefox 2 updates this property when switching to/from the browser's offline
mode.
...these two events are fired on the <body> of each page when the browser switches between online and offline
mode.
Node.childNodes - Web APIs
living standard no change document object
model (dom) level 3 core specificationthe definition of 'node.childnodes' in that specification.
... obsolete no change document object
model (dom) level 2 core specificationthe definition of 'node.childnodes' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'node.childnodes' in that specification.
Node.firstChild - Web APIs
living standard no change document object
model (dom) level 3 core specificationthe definition of 'node.firstchild' in that specification.
... obsolete no change document object
model (dom) level 2 core specificationthe definition of 'node.firstchild' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'node.firstchild' in that specification.
Node.insertBefore() - Web APIs
obsolete describes the algorithm in more detail document object
model (dom) level 3 core specificationthe definition of 'node.insertbefore' in that specification.
... obsolete no notable changes document object
model (dom) level 2 core specificationthe definition of 'node.insertbefore' in that specification.
... obsolete no notable changes document object
model (dom) level 1 specificationthe definition of 'node.insertbefore' in that specification.
Node.isSupported() - Web APIs
var main = document.getelementbyid('doc'); var output = main.issupported('html', '2.0'); </script> specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification.
... document object
model (dom) level 2 core specificationthe definition of 'node.issupported()' in that specification.
Node.lastChild - Web APIs
living standard no change document object
model (dom) level 3 core specificationthe definition of 'node.lastchild' in that specification.
... obsolete no change document object
model (dom) level 2 core specificationthe definition of 'node.lastchild' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'node.lastchild' in that specification.
Node.namespaceURI - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.namespaceuri' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'dom level 2 core: xml namespaces' in that specification.
... obsolete document object
model (dom) level 2 core specificationthe definition of 'node.namespaceuri' in that specification.
Node.nodeType - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'node.nodetype' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'node.nodetype' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'node.nodetype' in that specification.
Node.previousSibling - Web APIs
living standard no change document object
model (dom) level 3 core specificationthe definition of 'node.previoussibling' in that specification.
... obsolete no change document object
model (dom) level 2 core specificationthe definition of 'node.previoussibling' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'node.previoussibling' in that specification.
Node - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'node' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'node' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'node' in that specification.
NodeList - Web APIs
living standard document object
model (dom) level 3 core specificationthe definition of 'nodelist' in that specification.
... obsolete document object
model (dom) level 2 core specificationthe definition of 'nodelist' in that specification.
... obsolete document object
model (dom) level 1 specificationthe definition of 'nodelist' in that specification.
Notation - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'notation' in that specification.
... obsolete no change document object
model (dom) level 2 core specificationthe definition of 'notation' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'notation' in that specification.
OrientationSensor - Web APIs
on each reading it uses orientationsensor.quaternion to rotate a visual
model of a phone.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new absoluteorientationsensor(options); sensor.addeventlistener('reading', () => { //
model is a three.js object instantiated elsewhere.
...
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
Page Visibility API - Web APIs
a site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page an application showing a dashboard of information doesn't want to poll the server for updates when the page 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.
... 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 each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively.
Pointer events - Web APIs
however, since many devices support other types of pointing input devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event
models are needed.
...they are designed to create a single dom event
model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).
...having a single event
model for pointers can simplify creating web sites and applications and provide a good user experience regardless of the user's hardware.
ReadableStream.getReader() - Web APIs
syntax var reader = readablestream.getreader({
mode}); parameters {
mode} optional an object containing a property
mode, which takes as its value a domstring specifying the type of reader to create.
... return value a readablestreamdefaultreader or readablestreambyobreader object instance, depending on the
mode value.
... exceptions rangeerror the provided
mode value is not "byob" or undefined.
RelativeOrientationSensor - Web APIs
on each reading it uses orientationsensor.quaternion to rotate a visual
model of a phone.
... const options = { frequency: 60, referenceframe: 'device' }; const sensor = new relativeorientationsensor(options); sensor.addeventlistener('reading', () => { //
model is a three.js object instantiated elsewhere.
...
model.quaternion.fromarray(sensor.quaternion).inverse(); }); sensor.addeventlistener('error', error => { if (event.error.name == 'notreadableerror') { console.log("sensor is not available."); } }); sensor.start(); permissions example using orientation sensors requires requsting permissions for multiple device sensors.
ResizeObserverEntry.borderBoxSize - Web APIs
for boxes with a horizontal writing-
mode, this is the vertical dimension, or height; if the writing-
mode is vertical, this is the horizontal dimension, or width.
...for boxes with a horizontal writing-
mode, this is the horizontal dimension, or width; if the writing-
mode is vertical, this is the vertical dimension, or height.
... note: for more explanation of writing
modes and block and inline dimensions, read handling different text directions.
ResizeObserverEntry.contentBoxSize - Web APIs
for boxes with a horizontal writing-
mode, this is the vertical dimension, or height; if the writing-
mode is vertical, this is the horizontal dimension, or width.
...for boxes with a horizontal writing-
mode, this is the horizontal dimension, or width; if the writing-
mode is vertical, this is the vertical dimension, or height.
... note: for more explanation of writing
modes and block and inline dimensions, read handling different text directions.
StyleSheet.disabled - Web APIs
} specification specification status comment css object
model (cssom)the definition of 'stylesheet.disabled' in that specification.
... working draft no change from document object
model (dom) level 2 style specification.
... document object
model (dom) level 2 style specificationthe definition of 'stylesheet.disabled' in that specification.
StyleSheet - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'stylesheet' in that specification.
... working draft no change from document object
model (dom) level 2 style specification.
... document object
model (dom) level 2 style specificationthe definition of 'stylesheet' in that specification.
SubtleCrypto.decrypt() - Web APIs
function decryptmessage(privatekey, ciphertext) { return window.crypto.subtle.decrypt( { name: "rsa-oaep" }, privatekey, ciphertext ); } aes-ctr this code decrypts ciphertext using aes in ctr
mode.
... function decryptmessage(key, ciphertext) { return window.crypto.subtle.decrypt( { name: "aes-ctr", counter, length: 64 }, key, ciphertext ); } aes-cbc this code decrypts ciphertext using aes in cbc
mode.
... function decryptmessage(key, ciphertext) { return window.crypto.subtle.decrypt( { name: "aes-cbc", iv: iv }, key, ciphertext ); } aes-gcm this code decrypts ciphertext using aes in gcm
mode.
UIEvent.initUIEvent() - Web APIs
example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification.
... obsolete from document object
model (dom) level 2 events specification, deprecated.
... document object
model (dom) level 2 events specificationthe definition of 'uievent.inituievent()' in that specification.
UIEvent.view - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
... obsolete from document object
model (dom) level 2 events specification, changed the type of view from abstractview to windowproxy.
... document object
model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
WebGLRenderingContext.blendEquationSeparate() - Web APIs
syntax void gl.blendequationseparate(
modergb,
modealpha); parameters
modergb a glenum specifying how the red, green and blue components of source and destination colors are combined.
...
modealpha a glenum specifying how the alpha component (transparency) of source and destination colors are combined.
... exceptions if
mode is not one of the three possible values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.cullFace() - Web APIs
syntax void gl.cullface(
mode); parameters
mode a glenum specifying whether front- or back-facing polygons are candidates for culling.
... gl.enable(gl.cull_face); gl.cullface(gl.front_and_back); to check the current cull face
mode, query the cull_face_
mode constant.
... gl.getparameter(gl.cull_face_
mode) === gl.front_and_back; // true specifications specification status comment webgl 1.0the definition of 'cullface' in that specification.
WebGLRenderingContext.getProgramParameter() - Web APIs
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.
... gl.transform_feedback_varyings: returns a glint indicating the number of varying variables to capture in transform feedback
mode.
... editor's draft adds new pname values: gl.transform_feedback_buffer_
mode, gl.transform_feedback_varyings, gl.active_uniform_blocks ...
Geometry and reference spaces in WebXR - Web APIs
it is not only always available when using an immersive session
mode (immersive-vr or immersive-ar), but is always included among the optional features when requesting a new session; thus, every session created by navigator.xr.requestsession() supports the local reference space type.
...consider the
model of a player's avatar standing in the game world's space.
... the compatibility issues that arise may be as fundamental as being unable to support immersive-ar
mode (augmented reality sessions) on a vr-only headset, or may involve a request for one or more required options which cannot be met when attempting to create the xr session.
Lighting a WebXR setting - Web APIs
if you have a virtual room that needs overhead lighting, have a
model of a ceiling lamp at the location of your light source.
... if the viewer's avatar is meant to have physical form, it should have a
model, even if the viewer can never see it, so that light interacts with the avatar correctly.
... minimally, this means the avatar should cast an appropriate shadow; however, depending on factors such as whether or not the avatar can be seen and the materials, texturing, and other attributes of the its
model—including, especially, its reflectivity—the avatar may also need to reflect light, as well as potentially affect the coloration of the light reflected off of it.
Attestation and Assertion - Web APIs
the attestation certificate is built into the authenticator during manufacturing time and is specific to a device
model.
...when registering an authenticator for a new account, typically a trust on first use (tofu)
model applies; and when adding an authenticator to an existing account, a user has already been authenticated and has established a secure session.
...an attestation is signed using the attestation private key and attestation certificate that were burned into all
models of the same device.
Window.fullScreen - Web APIs
the fullscreen property of the window interface indicates whether the window is displayed in full screen
mode or not.
...possible values: true: the window is in full screen
mode.
... false: the window is not in full screen
mode.
Window.scrollY - Web APIs
this value is subpixel precise in
modern browsers, meaning that it isn't necessarily a whole number.
...a fully compatible example: var supportpageoffset = window.pagexoffset !== undefined; var iscss1compat = ((document.compat
mode || "") === "css1compat"); var x = supportpageoffset ?
...document.documentelement.scrolltop : document.body.scrolltop; specification specification status comment css object
model (cssom) view modulethe definition of 'window.scrolly' in that specification.
XRPermissionDescriptor.requiredFeatures - Web APIs
syntax xrpermissiondescriptor = {
mode: xrsession
mode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.requiredfeatures = reqfeaturelist; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the webxr features which must be available for use by the app or site.
... xrreferencespace usage notes examples in this example, permissions are checked to ensure that the user has granted permission for the site or app to use immersive augmented reality
mode with the local-floor reference space (presumably since the user is unlikely to start to fly).
... let xrpermissiondesc = { name: "xr",
mode: "immersive-ar", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status comment webxr device apithe definition of 'xrpermissiondescriptor.requiredfeatures' in that specification.
Accessibility: What users can do to browse more safely - Accessibility
use
modern browers.
... use reader
mode on browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain browsers, enable fonts by choice enable page zoom turn off animated gifs in the browser browsers offer much power to their users; it's just a matter of knowing where to go.
... using firefox as an example, it explains that by changing the value the image.animation_
mode from "normal" to "none", all animated images will be blocked.
An overview of accessible web applications and widgets - Accessibility
this component has a "view"
mode, in which the text is not editable, but is activatable, and an "edit"
mode, in which the text can be edited.
... a developer might be tempted to implement the "view"
mode using a read-only text <input> element and setting its aria role to button, then switching to "edit"
mode by making the element writable and removing the role attribute in "edit"
mode (since <input> elements have their own role semantics).
...instead, implement the "view"
mode using a different element altogether, such as a <div> or <span> with a role of button, and the « edit »
mode using a text <input> element.
Accessibility documentation index - Accessibility
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.
... 60 aria: document role aria, aria role, document, reference generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading
mode: the document role tells assistive technologies with reading or browse
modes to use the document
mode to read the content contained within this element.
...a feed enables screen readers to use the browse
mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
-webkit-border-before - CSS: Cascading Style Sheets
it maps to a physical border depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it relates to the standards-track border-block-start property.
@media - CSS: Cascading Style Sheets
note: in javascript, the rules created using @media can be accessed with the cssmediarule css object
model interface.
... print intended for paged material and documents viewed on a screen in print preview
mode.
... display-
mode the display
mode of the application, as specified in the web app manifest's display member defined in the web app manifest spec.
Using multi-column layouts - CSS: Cascading Style Sheets
the css multi-column layout module extends the block layout
mode to allow the easy definition of multiple columns of text.
...this limitation is solved by adding new css properties to extend the traditional block layout
mode.
...this
mode is also much more efficient for layout.
CSS Display - CSS: Cascading Style Sheets
reference css properties display css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing
modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox displ...
...ay: grid basic concepts of grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing
modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specifications specification status comment css display module level 3the definition of 'display' in that specification.
... recommendation added the table
model values and inline-block.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
alignment and writing
modes remember that with all of these alignment methods, the values of flex-start and flex-end are writing
mode-aware.
... if the value of justify-content is start and the writing
mode is left-to-right as in english, the items will line up starting at the left side of the container.
... however if the writing
mode is right-to-left as in arabic, the items will line up starting at the right side of the container.
CSS Flow Layout - CSS: Cascading Style Sheets
in normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the writing
mode of the document.
... block elements display one after the other, as paragraphs do in the writing
mode of that document.
... guides block and inline layout in normal flow in flow and out of flow formatting contexts explained flow layout and writing
modes flow layout and overflow reference glossary entries block (css) ...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
inside the feature query, we can then write any css we need to apply our
modern layout, and remove anything required for the older layout.
...i have used the vertical-align property on my item when in the inline-block display
mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1e...
... a write-up of the differences between the ie/edge (≤15) grid implementation and the
modern implementation, also covering autoprefixer support, take a look at: should i try to use the ie implementation of css grid layout?
CSS Logical Properties and Values - CSS: Cascading Style Sheets
the physical meaning of these terms depends on the writing
mode.
... block dimension the dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing
modes, and the horizontal dimension in vertical writing
modes.
... inline dimension the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing
modes, and the vertical dimension in vertical writing
modes.
Viewport concepts - CSS: Cascading Style Sheets
the size of the viewport depends on the size of the screen, whether the browser is in fullscreen
mode or not, and whether or not the user zoomed in.
... on most mobile devices and when the browser is in fullscreen
mode, the viewport is the entire screen.
... in fullscreen
mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
align-self - CSS: Cascading Style Sheets
normal the effect of this keyword is dependent of the layout
mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
... safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment
mode were start.
...its behavior depends on the layout
model, as described for justify-self.
border-block-color - CSS: Cascading Style Sheets
the border-block-color css property defines the color of the logical block borders 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 and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
the border-block-end-color css property defines 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.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-end-style - CSS: Cascading Style Sheets
the border-block-end-style css property defines 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.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
the border-block-end-width css property defines 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.
...elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-end - CSS: Cascading Style Sheets
the physical border to which it maps depends on the element's writing
mode, directionality, and text orientation.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
the border-block-start-color css property defines 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.
...'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
the border-block-start-style css property defines 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.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
the border-block-start-width css property defines 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.
...elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-start - CSS: Cascading Style Sheets
the physical border to which it maps depends on the element's writing
mode, directionality, and text orientation.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-block-start' in that specification.
border-block-style - CSS: Cascading Style Sheets
the border-block-style css property defines the style of the logical block borders 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 and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
the border-block-width css property defines the width of the logical block borders 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 and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-
mode, direction, and text-orientation.
...elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-block - CSS: Cascading Style Sheets
the physical borders to which it maps depends on the element's writing
mode, directionality, and text orientation.
... it corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block' in that specification.
border-inline-color - CSS: Cascading Style Sheets
the border-inline-color css property defines the color of the logical inline borders 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 and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-color' in that specification.
border-inline-end-color - CSS: Cascading Style Sheets
the border-inline-end-color css property defines 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.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-style - CSS: Cascading Style Sheets
the border-inline-end-style css property defines 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.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
the border-inline-end-width css property defines 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.
...ntsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-end - CSS: Cascading Style Sheets
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 corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-inline-end: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end' in that specification.
border-inline-start-color - CSS: Cascading Style Sheets
the border-inline-start-color css property defines 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.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-color' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style css property defines 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.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
the border-inline-start-width css property defines 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.
...initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-start - CSS: Cascading Style Sheets
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 orientation.
... it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-inline-start: 5px dashed blue; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start' in that specification.
border-inline-style - CSS: Cascading Style Sheets
the border-inline-style css property defines the style of the logical inline borders 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 and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-style' in that specification.
border-inline-width - CSS: Cascading Style Sheets
the border-inline-width css property defines the width of the logical inline borders 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 and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-
mode, direction, and text-orientation.
...initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-inline - CSS: Cascading Style Sheets
border-inline: 1px; border-inline: 2px dotted; border-inline: medium dashed blue; the physical borders to which border-inline maps depends on the element's writing
mode, directionality, and text orientation.
... it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-
mode, direction, and text-orientation.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline' in that specification.
caption-side - CSS: Cascading Style Sheets
the values are relative to the writing-
mode of the table.
... editor's draft defines the top and bottom values as relative to the writing-
mode value.
... no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support notop and bottom are relative to the writing-
mode valuechrome no support noedge no support nofirefox full support 42ie no support noopera no support nosafari no support nowebview ...
<color> - CSS: Cascading Style Sheets
</div> result rgb colors the rgb color
model defines a given color according to its red, green, and blue components.
... hsl colors the hsl color
model defines a given color according to its hue, saturation, and lightness components.
... system colors in forced colors
mode (detectable with the forced-colors media query), most colors are restricted into a user- and browser-defined palette.
<display-inside> - CSS: Cascading Style Sheets
flex the element behaves like a block element and lays out its content according to the flexbox
model.
... grid the element behaves like a block element and lays out its content according to the grid
model.
... ruby the element behaves like an inline element and lays out its content according to the ruby formatting
model.
<display-legacy> - CSS: Cascading Style Sheets
css 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout
mode.
... inline-flex the element behaves like an inline element and lays out its content according to the flexbox
model.
... inline-grid the element behaves like an inline element and lays out its content according to the grid
model.
inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-
mode, direction, and text-orientation.
...eight of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-
mode, direction, and text-orientation.
...ght of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-
mode, direction, and text-orientation.
...ing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-
mode, direction, and text-orientation.
...width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top, right, bottom, or left property depending on the values defined for writing-
mode, direction, and text-orientation.
...th of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing
mode, directionality, and text orientation.
... it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-
mode, direction, and text-orientation.
...ng blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
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.
... normal the effect of this keyword is dependent of the layout
mode we are in: in block-level layouts, the keyword is a synonym of start.
... safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment
mode were start.
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.
... normal the effect of this keyword is dependent of the layout
mode we are in: in block-level layouts, the keyword is a synonym of start.
... safe if the size of the item overflows the alignment container, the item is instead aligned as if the alignment
mode were start.
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.
...d: 1em; /* relative to the text size */ margin-block-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-end: auto; /* global values */ margin-block-end: inherit; margin-block-end: initial; margin-block-end: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result s...
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.
.../* relative to the text size */ margin-block-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-block-start: auto; /* global values */ margin-block-start: inherit; margin-block-start: initial; margin-block-start: unset; it corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } result ...
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing
mode, directionality, and text orientation.
...% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-
mode, direction, and text-orientation.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; margin-block: 20px 40px; background-color:...
margin-inline-end - CSS: Cascading Style Sheets
the margin-inline-end css property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing
mode, 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.
... formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout
modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mo...
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.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...alue0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
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.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...ition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing
mode, directionality, and text orientation.
...g-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...nition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
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.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...nition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
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.
... description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...tion initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing
mode, directionality, and text orientation.
... description values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-
mode, direction, and text-orientation.
...ition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-
mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
place-content - CSS: Cascading Style Sheets
examples placing content in a flex container html <div id="container"> <div class="small">lorem</div> <div class="small">lorem<br/>ipsum</div> <div class="large">lorem</div> <div class="large">lorem<br/>impsum</div> <div class="large"></div> <div class="large"></div> </div> <code>writing-
mode:</code><select id="writing
mode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> <option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" ...
...ue + " " + document.getelementbyid("justifycontentalignment").value; } var aligncontentalignment = document.getelementbyid("aligncontentalignment"); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener("change", update); var writingm = document.getelementbyid("writing
mode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writing
mode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; f...
...lex-wrap: wrap; background-color: #8c8c8c; writing-
mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } result specifications specification status comment css box alignment module level 3the definition of 'place content' in that specification.
Index - Developer guides
24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents
modern web browsers can handle.
... 36 optimization and performance landing, optimization, performance, web when building
modern web apps and sites, it's important to make your content perform well.
... 42 user input and controls screen orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input
modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
<input type="file"> - HTML: Hypertext Markup Language
if the requested facing
mode isn't available, the user agent may fall back to its preferred default
mode.
... note: you can set as well as get the value of htmlinputelement.files in all
modern browsers; this was most recently added to firefox, in version 57 (see bug 1384030).
...there are some historical reasons for this quirk, but it is supported across all
modern browsers, and in fact is defined in the spec.
Cross-Origin Resource Sharing (CORS) - HTTP
modern browsers use cors in apis such as xmlhttprequest or fetch to mitigate the risks of cross-origin http requests.
...
modern browsers handle the client side of cross-origin sharing, including headers and policy enforcement.
...what values webkit/safari consider “nonstandard” is not documented, except in the following webkit bugs: require preflight for non-standard cors-safelisted request headers accept, accept-language, and content-language allow commas in accept, accept-language, and content-language request headers for simple cors switch to a blacklist
model for restricted accept headers in simple cors requests no other browsers implement these extra restrictions, because they’re not part of the spec.
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials response header tells browsers whether to expose the response to frontend javascript code when the request's credentials
mode (request.credentials) is include.
... when a request's credentials
mode (request.credentials) is include, browsers will only expose the response to frontend javascript code if the access-control-allow-credentials value is true.
...for a cors request with credentials, in order for browsers to expose the response to frontend javascript code, both the server (using the access-control-allow-credentials header) and the client (by setting the credentials
mode for the xhr, fetch, or ajax request) must indicate that they’re opting in to including credentials.
SameSite cookies - HTTP
this is the default value in
modern browsers.
... cookies without samesite default to samesite=lax recent versions of
modern browsers provide a more secure default for samesite to your cookies and so the following message might appear in your console: some cookies are misusing the “samesite“ attribute, so it won’t work as expected.
... the warning appears because the samesite policy for a cookie has not specified explicitly: set-cookie: flavor=choco while you could rely on
modern browsers to apply samesite=lax automatically, you should rather specify it explicitly to clearly communicate your intent which samesite policy applies to your cookie.
An overview of HTTP - HTTP
in reality, there are more computers between a browser and the server handling the request: there are routers,
modems, and more.
...http pipelining has proven difficult to implement in existing networks, where old pieces of software coexist with
modern versions.
...the
modern fetch api provides the same features with a more powerful and flexible feature set.
A typical HTTP session - HTTP
note: the client-server
model does not allow the server to send data to the client without an explicit request for it.
...esponse: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1;
mode=block vary: accept-encoding,cookie age: 7 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>a simple webpage</title> </head> <body> <h1>simple html5 webpage</h1> <p>hello, world!</p> </body> </html> notification that the requested resource has permanently moved: http/1.1 301 moved permanently server: apache/2.4.37 (red hat) content-type: text/html; charset=utf-8 d...
...04 not found content-type: text/html; charset=utf-8 content-length: 38217 connection: keep-alive cache-control: no-cache, no-store, must-revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:35:13 gmt expires: thu, 06 dec 2018 17:35:13 gmt server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1;
mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html...
HTTP
http follows a classical client-server
model, with a client opening a connection to make a request, then waiting until it receives a response.
... evolution of http a brief description of the changes between the early versions of http, to the
modern http/2, the emergent http/3 and beyond.
... connection management in http/1.x describes the three connection management
models available in http/1.x, their strengths, and their weaknesses.
Functions - JavaScript
a non-primitive value, such as array or a user-defined object) as a parameter and the function changes the object's properties, that change is visible outside the function, as shown in the following example: function myfunc(theobject) { theobject.make = 'toyota'; } var mycar = {make: 'honda',
model: 'accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "honda" myfunc(mycar); y = mycar.make; // y gets the value "toyota" // (the make property was changed by the function) function expressions while the function declaration above is syntactically a statement, functions can also be created by a function expression.
...compare: var a = [ 'hydrogen', 'helium', 'lithium', 'beryllium' ]; var a2 = a.map(function(s) { return s.length; }); console.log(a2); // logs [8, 6, 7, 9] var a3 = a.map(s => s.length); console.log(a3); // logs [8, 6, 7, 9] no separate this until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict
mode function calls, the base object if the function is called as an "object method", etc.).
... this.age = 0; setinterval(function growup() { // in nonstrict
mode, the growup() function defines `this` // as the global object, which is different from the `this` // defined by the person() constructor.
Using Promises - JavaScript
here's some code that uses createaudiofileasync(): function successcallback(result) { console.log("audio file ready at url: " + result); } function failurecallback(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcallback, failurecallback);
modern functions return a promise that you can attach your callbacks to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple as this: createaudiofileasync(audiosettings).then(successcallback, failurecallback); that's shorthand for: const promise = createaudiofileasync(audiosettings); promise.then(successcallback, failurecallback); we call this an asyn...
... in the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom: dosomething(function(result) { dosomethingelse(result, function(newresult) { dothirdthing(newresult, function(finalresult) { console.log('got the final result: ' + finalresult); }, failurecallback); }, failurecallback); }, failurecallback); with
modern functions, we attach our callbacks to the returned promises instead, forming a promise chain: dosomething() .then(function(result) { return dosomethingelse(result); }) .then(function(newresult) { return dothirdthing(newresult); }) .then(function(finalresult) { console.log('got the final result: ' + finalresult); }) .catch(failurecallback); the arguments to then are optional, and catch(...
...this is very much
modeled after how synchronous code works: try { const result = syncdosomething(); const newresult = syncdosomethingelse(result); const finalresult = syncdothirdthing(newresult); console.log(`got the final result: ${finalresult}`); } catch(error) { failurecallback(error); } this symmetry with asynchronous code culminates in the async/await syntactic sugar in ecmascript 2017: async functio...
Inheritance and the prototype chain - JavaScript
while this confusion is often considered to be one of javascript's weaknesses, the prototypal inheritance
model itself is, in fact, more powerful than the classic
model.
... it is, for example, fairly trivial to build a classic
model on top of a prototypal
model.
... in conclusion it is essential to understand the prototypal inheritance
model before writing complex code that makes use of it.
TypeError: can't assign to property "x" on "y": not an object - JavaScript
the javascript strict
mode exception "can't assign to property" occurs when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean.
... in strict_
mode, a typeerror is raised when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean.
... examples invalid cases 'use strict'; var foo = "my string"; // the following line does nothing if not in strict
mode.
TypeError: can't define property "x": "obj" is not extensible - JavaScript
examples adding new properties to a non-extensible objects in strict
mode, attempting to add new properties to a non-extensible object throws a typeerror.
... in sloppy
mode, the addition of the "x" property is silently ignored.
... 'use strict'; var obj = {}; object.preventextensions(obj); obj.x = 'foo'; // typeerror: can't define property "x": "obj" is not extensible in both, strict
mode and sloppy
mode, a call to object.defineproperty() throws when adding a new property to a non-extensible object.
TypeError: property "x" is non-configurable and can't be deleted - JavaScript
message typeerror: calling delete on 'x' is not allowed in strict
mode (edge) typeerror: property "x" is non-configurable and can't be deleted.
... (firefox) typeerror: cannot delete property 'x' of #<object> (chrome) error type typeerror in strict
mode only.
... this error happens only in strict
mode code.
SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated - JavaScript
the javascript strict
mode-only exception "0-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead" occurs when deprecated octal literals and octal escape sequences are used.
... message syntaxerror: octal numeric literals and escape characters not allowed in strict
mode (edge) syntaxerror: "0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead error type syntaxerror in strict
mode only.
... octal literals and octal escape sequences are deprecated and will throw a syntaxerror in strict
mode.
TypeError: setting getter-only property "x" - JavaScript
the javascript strict
mode-only exception "setting getter-only property" occurs when there is an attempt to set a new value to a property for which only a getter is specified.
... message typeerror: assignment to read-only properties is not allowed in strict
mode (edge) typeerror: setting getter-only property "x" (firefox) typeerror: cannot set property "prop" of #<object> which has only a getter (chrome) error type typeerror in strict
mode only.
...while this will be silently ignored in non-strict
mode, it will throw a typeerror in strict
mode.
TypeError: "x" is read-only - JavaScript
the javascript strict
mode-only exception "is read-only" occurs when a global variable or object property that was assigned to is a read-only property.
... message typeerror: assignment to read-only properties is not allowed in strict
mode (edge) typeerror: "x" is read-only (firefox) typeerror: 0 is read-only (firefox) typeerror: cannot assign to read only property 'x' of #<object> (chrome) typeerror: cannot assign to read only property '0' of [object array] (chrome) error type typeerror what went wrong?
...(technically, it is a non-writable data property.) this error happens only in strict
mode code.
TypeError: variable "x" redeclares argument - JavaScript
the javascript strict
mode-only exception "variable redeclares argument" occurs when the same variable name occurs as a function parameter and is then redeclared using a var assignment in a function body again.
... message typeerror: variable "x" redeclares argument (firefox) error type typeerror warning in strict
mode only.
... this error occurs as a warning in strict
mode code only.
Object.defineProperty() - JavaScript
var o = {}; // creates a new object object.defineproperty(o, 'a', { value: 37, writable: false }); console.log(o.a); // logs 37 o.a = 25; // no error thrown // (it would throw in strict
mode, // even if the value had been the same) console.log(o.a); // logs 37.
... // strict
mode (function() { 'use strict'; var o = {}; object.defineproperty(o, 'b', { value: 2, writable: false }); o.b = 3; // throws typeerror: "b" is read-only return o.b; // returns 2 without the line above }()); as seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.
... function myclass() { } myclass.prototype.x = 1; object.defineproperty(myclass.prototype, "y", { writable: false, value: 1 }); var a = new myclass(); a.x = 2; console.log(a.x); // 2 console.log(myclass.prototype.x); // 1 a.y = 2; // ignored, throws in strict
mode console.log(a.y); // 1 console.log(myclass.prototype.y); // 1 specifications specification ecmascript (ecma-262)the definition of 'object.defineproperty' in that specification.
in operator - JavaScript
s true 6 in trees // returns false 'bay' in trees // returns false (you must specify the index number, not the value at that index) 'length' in trees // returns true (length is an array property) symbol.iterator in trees // returns true (arrays are iterable, works only in es2015+) // predefined objects 'pi' in math // returns true // custom objects let mycar = {make: 'honda',
model: 'accord', year: 1998} 'make' in mycar // returns true '
model' in mycar // returns true you must specify an object on the right side of the in operator.
... let mycar = {make: 'honda',
model: 'accord', year: 1998} delete mycar.make 'make' in mycar // returns false let trees = new array('redwood', 'bay', 'cedar', 'oak', 'maple') delete trees[3] 3 in trees // returns false if you set a property to undefined but do not delete it, the in operator returns true for that property.
... let mycar = {make: 'honda',
model: 'accord', year: 1998} mycar.make = undefined 'make' in mycar // returns true let trees = new array('redwood', 'bay', 'cedar', 'oak', 'maple') trees[3] = undefined 3 in trees // returns true the in operator will return false for empty array slots.
new operator - JavaScript
you want this type of object to be called car, and you want it to have properties for make,
model, and year.
... to do this, you would write the following function: function car(make,
model, year) { this.make = make; this.
model =
model; this.year = year; } now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 1993); this statement creates mycar and assigns it the specified values for its properties.
...ed person as follows: function person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; } and then instantiate two new person objects as follows: var rand = new person('rand mcnally', 33, 'm'); var ken = new person('ken jones', 39, 'm'); then you can rewrite the definition of car to include an owner property that takes a person object, as follows: function car(make,
model, year, owner) { this.make = make; this.
model =
model; this.year = year; this.owner = owner; } to instantiate the new objects, you then use the following: var car1 = new car('eagle', 'talon tsi', 1993, rand); var car2 = new car('nissan', '300zx', 1992, ken); instead of passing a literal string or integer value when creating the new objects, the above statements pass the objects rand ...
Performance fundamentals - Web Performance
that's why most
modern electronic displays are designed to refresh at that rate.
...
modern cpus can enter a lower-power
mode when mostly idle.
... applications that constantly fire timers or keep unnecessary animations running prevent cpus from entering low-power
mode.
Populating the page: how browsers work - Web Performance
the css object
model is similar to the dom.
...the accessibility object
model (aom) is like a semantic version of the dom.
...taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box
model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image.
Progressive web app structure - Progressive web apps (PWAs)
for example, an offline
mode with the help of service workers is just an extra trait that makes the website experience better, but it's still perfectly usable without it.
... the app shell
model requires all the resources to be available before the website can start rendering.
... in theory, streaming is a better
model, but it's also more complex, and at the time of writing (march 2018) the streams api is still a work-in-progress and not yet fully available in any of the major browsers.
How to turn off form autocompletion - Web security
the autocomplete attribute and login fields
modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user.
... for this reason, many
modern browsers do not support autocomplete="off" for login fields: if a site sets autocomplete="off" for a <form>, and the form includes username and password input fields, then the browser still offers to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
...however
modern browsers have stopped autofilling <input> elements with autocomplete="new-password" for this very reason.
Using custom elements - Web Components
// create a shadow root this.attachshadow({
mode: 'open'}); // sets and returns 'this.shadowroot' // create (nested) span elements const wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); const icon = wrapper.appendchild(document.createelement('span')); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); // insert icon from defined attribute or default icon const img = icon.appendchild(document.
... many
modern browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet.
...the custom element looks like this: <custom-square l="100" c="red"></custom-square> the class constructor is really simple — here we attach a shadow dom to the element, then attach empty <div> and <style> elements to the shadow root: const shadow = this.attachshadow({
mode: 'open'}); const div = document.createelement('div'); const style = document.createelement('style'); shadow.appendchild(style); shadow.appendchild(div); the key function in this example is updatestyle() — this takes an element, gets its shadow root, finds its <style> element, and adds width, height, and background-color to the style.
WebAssembly Concepts - WebAssembly
webassembly is a new type of code that can be run in
modern web browsers and provides new features and major gains in performance.
... webassembly is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages with low-level memory
models such as c++ and rust with a compilation target so that they can run on the web.
... (note that webassembly has the high-level goal of supporting languages with garbage-collected memory
models in the future.) with the advent of webassembly appearing in browsers, the virtual machine that we talked about earlier will now load and run two types of code — javascript and webassembly.
XUL Migration Guide - Archive of obsolete content
if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefox releases and of the sdk's security
model.
...ound-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security
model in which an add-on only gets to access the apis it explicitly imports via require().
tabs - Archive of obsolete content
to convert back the other way, from a xul tab to a high-level tab object, use the
modelfor() function, exported by the
modelfor module.
... here's an example converting from a high-level tab to a xul tab and then back the other way: var {
modelfor } = require("sdk/
model/core"); var { viewfor } = require("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { // get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var browser = tab_utils.getbrowserfortab(lowleveltab); console.log(browser.contentdocument.body.innerhtml); // get the high-level tab back from the xul tab var highleveltab =
modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content ...
windows - Archive of obsolete content
to convert back the other way, from a chrome window to a browserwindow object, use the
modelfor() function, exported by the
modelfor module.
... here's an example converting from a high-level browserwindow to a chrome window, and then back the other way: var {
modelfor } = require("sdk/
model/core"); var { viewfor } = require("sdk/view/core"); var browserwindows = require("sdk/windows").browserwindows; function converttochromeandback(browserwindow) { // get the chrome window for this browserwindow var chromewindow = viewfor(browserwindow); // now we can use the chrome window api console.log(chromewindow.document.location.href); // -> "chrome://browser/content/browser.xul" // convert back to the high-level window var highlevelwindow =
modelfor(chromewindow); // now we can use the sdk's high-level window api console.log(highlevelwindow.title); } browserwindows.on("open", converttochromeandback); note that directl...
File I/O - Archive of obsolete content
it defaults to // fileutils.
mode_wronly | fileutils.
mode_create | fileutils.
mode_truncate; var ostream = fileutils.opensafefileoutputstream(file); var converter = components.classes["@mozilla.org/intl/scriptableunicodeconverter"].
...fostream.init(file, 0x02 | 0x08 | 0x20, 0666, 0); // write, create, truncate // in a c file operation, we have no need to set file
mode with or operation, // directly using "r" or "w" usually.
LookupPrefix - Archive of obsolete content
function lookupprefix (node, namespaceuri) { var html
mode = document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && html
mode !== 'text/html') { // shouldn't use ...
...inalelement.attributes && originalelement.attributes.length) { for (var i=0; i < originalelement.attributes.length; i++) { var att = originalelement.attributes[i]; xmlnspattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie which doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html
mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlnspattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(originalelement, localname) === namespaceuri ) { return localname; } } } if (originalelement.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, originalel...
Miscellaneous - Archive of obsolete content
const nob = 128; // number of bytes var buffer = ''; var prng = components.classes['@mozilla.org/security/random-generator;1']; var bytebucket = prng.getservice(components.interfaces.nsirandomgenerator).generaterandombytes(nob, buffer); detecting full screen
mode on/off it works for that global 'window' object at least.
... window.addeventlistener('fullscreen', function(){ alert('fullscreen
mode on or off') }, false) getting addon install path first one using addon manager: components.utils.import('resource://gre/modules/addonmanager.jsm'); addonmanager.getaddonbyid('example@addon', function(addon) { let path = addon.getresourceuri().path; // something like /home/username/....
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the xul box
model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical.
... <stack> <progressmeter
mode="normal" value="50"/> <hbox align="center"> <label value="in progress…"/> </hbox> </stack> listing 21: overlapping with stack figure 17: progress bar tab use the tab element to divide multiple pages, as used in the properties dialog; use the tabbox element to group related elements.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<window id="main-window"> <toolbox id="navigator-toolbox"> <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarname.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true"
mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main browser window.
... the
mode attribute is set to icons, which is the usual value.
Using content preferences - Archive of obsolete content
because of this, in private browsing
mode, use of the content preference service needed to be avoided while in private browsing
mode; instead, information needed to be stored in memory or preferences had to be avoided.
... starting in gecko 9.0, when in private browsing
mode, the content preference service stores preferences in memory instead of on disk, and automatically forgets them when leaving private browsing
mode.
Modularization techniques - Archive of obsolete content
nsisupports the key interface in our
model is the nsisupports interface, our equivalent to com's iunknown interface.
... links the component object
model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a c...
Remotely debugging Firefox for Metro - Archive of obsolete content
prerequisites you will need: windows 8 (metro-style) firefox running in the touch-friendly "metro"
mode on a windows 8 computer.
... firefox running in classic "desktop"
mode on windows, mac os x, or linux, either on a separate computer or in a separate profile on the same computer.
Space Manager High Level Design - Archive of obsolete content
the primary classes that interact with the space manager are: nsblockreflowstate nsblockframe nsboxtoblockadaptor the general interaction
model is to create a space manager for a block frame in the context of a reflow, and to associate it with the blockreflowstate so it is passed down to child frames' reflow methods.
... data
model class/component diagram nsspacemanager: the central point of management of the space taken up by floats in a block nsbanddata: provides information about the frames occupying a band of occupied or available space nsblockbanddata: a specialization of nsbanddata that is used by nsblockreflowstate to determine the available space, float impacts, and where floats are cleared.
open - Archive of obsolete content
summary opens the file, specifying file
mode and type.
... syntax open(
mode,type) parameters
mode a comma-delimited list describing the method to use to open the file, described in detail here.
Tamarin build documentation - Archive of obsolete content
preparing your eclipse workspace and perspective open the c/c++ perspective open the 'c/c++ projects' view (window >> show view >> c/c++ projects) add view filter 'non-c elements' (in the top-right of the 'c/c++ projects' view, click the down-arrow, click 'filters...', check 'non-c elements') increase the threshold for 'editor scalability
mode' to 20000 lines.
... 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 utils/wmremote/readme.txt) copy release/avmremote.dll to the device in the \windows directory export avm=release/ceremoteshell.exe, the ceremoteshell.exe behaves as a proxy copying and running abc files on the windows mobile device build a windows mobile tamarin shell, copy the shell to the windows mobile device in \program files\shell\avmshell.exe (optional) can sa...
The life of an HTML HTTP request - Archive of obsolete content
nsicontent::appendchild() is used to build the content tree but appendchild takes a "anotify" argument that marks if it should notify the document about the content
model changes or not.
...the content sink tells the document about content
model changes (notifybody()) in places like nshtmlcontentsink::willinterrupt() and nshtmlcontentsink::didbuild
model().
Attribute (XUL) - Archive of obsolete content
ing ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor 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 menuactive min minheight minresultsforpopup minwidth
mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 on...
...parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size size
mode sizetopopup smoothscroll sort sortactive 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 win...
open - Archive of obsolete content
« xul reference home open(
mode ) return type: no return value opens the findbar using the specified
mode, which should be one of find_normal, find_typeahead, or find_links.
... if you don't pass a
mode, the last-used
mode for the same findbar is used.
The Joy of XUL - Archive of obsolete content
applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object
model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0.
... xpcom, which stands for cross platform component object
model, is a framework for writing cross-platform, modular software.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
class="toolbarbutton-1" makes the toolbar button appear correctly in icons and text
mode; it also adjusts padding.
...the dimensions of the icons in various applications for both
modes are summarized in the following table (feel free to add information about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myext...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: #custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1s.png");} /* common style for all custom buttons -
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 ...
...the six parts at the left are for seamonkey's
modern theme, and the three parts at the right are for its classic theme.
Localization - Archive of obsolete content
ion; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> <menuitem label="&type.size;"/> <menuitem label="&type.date;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="search
mode"> <menupopup> <menuitem label="&
mode.is;"/> <menuitem label="&
mode.isnot;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <...
...ommandkey "v"> <!entity opencmdtoolbar.label "open"> <!entity savecmdtoolbar.label "save"> <!entity searchtab "search"> <!entity optionstab "options"> <!entity finddescription "enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.size "size"> <!entity type.date "date modified"> <!entity
mode.is "is"> <!entity
mode.isnot "is not"> <!entity casesensitive "case sensitive search"> <!entity matchfilename "match entire filename"> <!entity results.filename "filename"> <!entity results.location "location"> <!entity results.size "size"> <!entity bytes.before ""> <!entity bytes.after "bytes"> <!entity button.find "find"> <!entity button.cancel "cancel"> now, to add text for a new language al...
Skinning XUL Files by Hand - Archive of obsolete content
it presumes you have at least basic understanding of xul and the application object
model that xul describes.
...also, most of the behavior that buttons exhibit comes from styles and an event
model based on javascript that dynamically switches between these styles.
XPCOM Interfaces - Archive of obsolete content
« previousnext » in this section, we'll take a brief look at xpcom (cross-platform component object
model), which is the object system that mozilla uses.
...mozilla provides such a method which involves using xpcom (cross-platform component object
model).
XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box
model the box
model element positioning box
model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and se...
...lection commands updating commands broadcasters and observers document object
model document object
model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view details tree box objects rdf and templates introduction to rdf templates trees and templates rdf datasources advanced rules persistent data skins and locales adding style sheets styling a tree modifying the default skin creating a skin skinning xul files by hand localization property files bindings introduction to xbl anonymous content xbl attribute inheritance adding properties adding methods adding event handlers xbl inheritance creating reusable content using css and xbl ...
XUL and RDF - Archive of obsolete content
the implementation of the application object
modelpurpose - the purpose of this document is two-fold.
...this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content
model.
editor - Archive of obsolete content
enable the design
mode of the document loaded in the editor.
... attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype, webbrowserfind, webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the design
mode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.design
mode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special formattin...
toolbar - Archive of obsolete content
attributes autohide, currentset, customindex, customizable, defaultset, grippyhidden, grippytooltiptext, height, iconsize,
mode, toolbarname properties accessibletype, currentset, firstpermanentchild, lastpermanentchild, toolbarname, toolboxid methods insertitem style classes chromeclass-toolbar examples <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton id="nav-users" accesskey="u" label="users"/> <toolbarbutton id="nav-groups" accesskey="p" label="groups"/> <toolbarbutton id="nav-even...
...
mode not in seamonkey 1.x type: one of the values below how the toolbarbuttons on the toolbar are displayed.
treecell - Archive of obsolete content
attributes editable, label,
mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">.
...
mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use.
External resources for plugin creation - Archive of obsolete content
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 xcode, visual studio, gcc (and probably any other
modern c++ compiler) browser plugins can be built as npapi (mac/windows), or activex (windows).
NPAPI plugin developer guide - Archive of obsolete content
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime
model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display
modes using the object element for plug-in display nesting rules for html elements ...
...ssage making a plug-in opaque making a plug-in transparent creating pop-up menus and dialog boxes event handling for windowless plug-ins streams receiving a stream telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access
mode sending the stream in file
mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flus...
NPEmbedPrint - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary substructure of npprint that contains platform-specific information used during embedded
mode printing.
...the npembedprint structure is used when the
mode field of npprint is set to np_embed.
NPP_Write - Archive of obsolete content
after a stream is created by a call to npp_newstream, the browser calls npp_write either: if the plug-in requested a normal-
mode stream, the data in the stream is delivered to the plug-in instance in a series of calls to npp_writeready and npp_write.
...in a normal-
mode stream., the parameter value increases as the each buffer is written.
NPPrintCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains information required by the platformprint field of the npembedprint structure during embedded
mode printing on unix systems.
...this information is required by the platformprint field of the npembedprint structure during embedded
mode printing.
Table Reflow Internals - Archive of obsolete content
the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated
mode).
... special height reflow when there is a % height frame inside a cell without a computed height the frame will never get a chance to size based on the final cell height in paginated
mode when there is a height on the table, the table doesn't allocate extra height to rows until after it does a pass 2 reflow and then it is too late this can be fixed by doing a special 3rd pass reflow special reflow example <table border=2 width=300> <tr> <td> this cell's width is constrained by the table and image widths.
Theme changes in Firefox 2 - Archive of obsolete content
ize="small"] #mail-button[disabled="true"] toolbar[iconsize="small"] #mail-button[open="true"] toolbar[iconsize="small"] #new-tab-button:active toolbar[iconsize="small"] #new-window-button:active toolbar[iconsize="small"] #paste-button:active toolbar[iconsize="small"] #print-button:active toolbar[iconsize="small"] #reload-button:active toolbar[iconsize="small"] #stop-button:active toolbar[
mode="icons"] .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-1 > .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-icon the following styles need to be added to your theme to be compatible with firefox 2: #back-button .toolbarbutton-menubutton-dropmarker #back-button:hover #back-button:hover .t...
...] .scrollbutton-down .scrollbutton-down > .toolbarbutton-text .scrollbutton-down[disabled="true"] .scrollbutton-down[orient="horizontal"] .scrollbutton-down[orient="horizontal"][disabled="true"] .scrollbutton-up .scrollbutton-up > .toolbarbutton-text .scrollbutton-up[disabled="true"] .scrollbutton-up[orient="horizontal"] .scrollbutton-up[orient="horizontal"][disabled="true"] toolbar[
mode="icons"] .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-1 > .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-1 > stack > toolbarbutton > .toolbarbutton-text toolbar[
mode="text"] .toolbarbutton-icon you may wish to change other styles as well.
Scratchpad - Archive of obsolete content
as an alternative, starting in firefox 71, you can use the multi-line
mode of the javascript console input.
...this is especially useful in split console
mode: you can use scratchpad for a persistent, multiline editor, and the console to interact with the page.
CSS - Archive of obsolete content
for example, moving a child of the stack far to the right will widen the stack so the child remains visible.-moz-text-blinkthe -moz-text-blink non-standard mozilla css extension specifies the blink
mode.-moz-window-shadowthe -moz-window-shadow css property specifies whether a window will have a shadow.
... source.-ms-flow-intothe -ms-flow-into css property is a microsoft extension that gets or sets a value identifying an iframe container in the document that serves as the region's data source.-ms-high-contrast-adjustthe -ms-high-contrast-adjust css property is a microsoft extension that gets or sets a value indicating whether to override any css properties that would have been set in high contrast
mode.-ms-hyphenate-limit-charsthe -ms-hyphenate-limit-chars css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word.
ActiveXObject - Archive of obsolete content
excelsheet.application.quit(); requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
... note: creating an activexobject on a remote server is not supported in internet explorer 9 standards
mode, internet explorer 10 standards
mode, internet explorer 11 standards
mode, and windows store apps or later.
Debug.debuggerEnabled - Archive of obsolete content
syntax var dbgenabled = debug.debuggerenabled; requirements supported in the following document
modes: internet explorer 10 standards and internet explorer 11 standards.
... not supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards.
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
}, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } asyncwrapperfunction(); requirements supported in the internet explorer 11 standards document
mode.
... not supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
}, function (error) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_error); debug.mstraceasynccallbackstarting(opid); }); debug.mstraceasynccallbackcompleted(); } function dosomethingasync() { return winjs.promise.as(true); } asyncwrapperfunction(); requirements supported in the internet explorer 11 standards document
mode.
... not supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
requirements supported in the internet explorer 11 standards document
mode.
... not supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards.
Debug.setNonUserCodeExceptions - Archive of obsolete content
} })(); requirements supported in the following document
modes: internet explorer 10 standards and internet explorer 11 standards.
... not supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards.
Debug.write - Archive of obsolete content
note: to run this example, you must have a script debugger installed and the script must run in debug
mode.
... var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Debug.writeln - Archive of obsolete content
note: to run this example, you must have a script debugger installed and the script must run in debug
mode.
... var counter = 42; debug.writeln("the value of counter is " + counter); requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Debug - Archive of obsolete content
to debug internet explorer scripts, you must have a script debugger installed and the script must run in debug
mode.
... var counter = 42; debug.write("the value of counter is " + counter); requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
@cc_on - Archive of obsolete content
warning: conditional compilation is not supported in internet explorer 11 standards
mode and windows 8.x store apps.
... conditional compilation is supported in internet explorer 10 standards
mode and in all earlier versions.
@if - Archive of obsolete content
warning: conditional compilation is not supported in internet explorer 11 standards
mode and windows 8.x store apps.
... conditional compilation is supported in internet explorer 10 standards
mode and in all earlier versions.
@set - Archive of obsolete content
warning: conditional compilation is not supported in internet explorer 11 standards
mode and windows 8.x store apps.
... conditional compilation is supported in internet explorer 10 standards
mode and in all earlier versions.
Old Proxy API - Archive of obsolete content
the this-binding of the constructtrap is either undefined (in strict
mode) or the global object (in non-strict
mode).
...a typeerror to be thrown }, // derived traps has: function(name) { return name in obj; }, hasown: function(name) { return object.prototype.hasownproperty.call(obj, name); }, get: function(receiver, name) { return obj[name]; }, set: function(receiver, name, val) { obj[name] = val; return true; }, // bad behavior when set fails in non-strict
mode enumerate: function() { var result = []; for (name in obj) { result.push(name); }; return result; }, keys: function() { return object.keys(obj) } }; } // ...
RDF: Resource Description Framework for metadata - Archive of obsolete content
resource description framework (rdf) is a family of specifications for a metadata
model that is often implemented as an application of xml.
... the rdf metadata
model is based upon the idea of making statements about resources in the form of a subject-predicate-object expression, called a triple in rdf terminology.
XForms Alert Element - Archive of obsolete content
representations can be represented in two ways:
modeless window that contains the alert element's message (default representation).
... examples <xforms:
model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:
model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value!
XForms Select Element - Archive of obsolete content
the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms
model.
...characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:
model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:
model> <xf:select ref="/data/values" appearance="full"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </...
XForms Select1 Element - Archive of obsolete content
the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an xforms
model.
...characteristics appearance attribute contains the value full there are no analogue widgets in xhtml or in xul visual grouping by choices element is supported selection="open" attribute isn't supported if incremental attribute value is false then bound node is updated when item is blurred examples <xf:
model> <xf:instance> <data xmlns=""> <values>g</values> </data> </xf:instance> </xf:
model> <xf:select1 ref="/data/values"> <xf:choices> <xf:label>green colors</xf:label> <xf:item> <xf:label>pale green</xf:label> <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf...
Common causes of memory leaks in extensions - Extensions
for example: function implicitdeclarationleak(window) { // implicit variable declaration in the js global, holding a strong ref to the document doc = window.document; } implicitly declared variables can be avoided by using ecmascript 5's strict
mode.
... strict
mode also excludes several other error-prone code patterns.
Game monetization - Game development
licensing there's an approach that can work as a monetization
model on it's own, and that's selling licenses for distribution of your game.
...prices in this
model vary greatly depending on the brand, client, and amount of work you put in.
Explaining basic 3D theory - Game development
there are four stages to this processing: the first one involves arranging the objects in the world, and is called
model transformation.
...the standard phong lighting
model implemented in webgl has four basic types of lighting: diffuse: a distant directional light, like the sun.
Building up a basic demo with PlayCanvas editor - Game development
there are starter kits available, but we don't want to load
models or start a platform game.
... animating our scene animating 3d
models might be considered an advanced thing to do, but all we want to do is to control a few properties of a given object — we can use a script component to do that.
3D games on the Web - Game development
support on
modern browsers is very good, even on mobile, so you don't have to worry about that too much.
... there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help developers build games for the
modern web using current, powerful hardware.
Gecko FAQ - Gecko Redirect 1
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.
... gecko includes the following components: document parser (handles html and xml) layout engine with content
model style system (handles css, etc.) javascript runtime (spidermonkey) image library networking library (necko) platform-specific graphics rendering and widget sets for win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) origina...
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a browser from switching into so-called “quirks
mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering
mode that is incompatible with some specifications.
... learn more general knowledge definition of the doctype in the html specification quirks
mode and standards
mode technical reference document.doctype, a javascript method that returns the doctype ...
Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the physical direction of these axes can change according to the writing
mode of the document.
... learn more further reading css grid layout guide: basic concepts of grid layout css grid layout guide: box alignment in grid layout css grid layout guide: grids, logical values and writing
modes ...
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
lines numbers respect the writing
mode of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid.
...operty reference grid-template-columns grid-template-rows grid-column-start grid-column-end grid-column grid-row-start grid-row-end grid-row further reading css grid layout guide: basic concepts of grid layout css grid layout guide: line-based placement with css grid css grid layout guide: layout using named grid lines css grid layout guide: css grids, logical values and writing
modes definition of grid lines in the css grid layout specification ...
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
a polyfill is a piece of code (usually javascript on the web) used to provide
modern functionality on older browsers that do not natively support it.
...using a polyfill to handle browser-specific implementations is practically non-existent today because
modern browsers mostly implement a broad set of apis according to standard semantics.
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most
modern browsers that can run all the required code.
... feature detection is generally used to determine whether browsers can handle more
modern functionality, while polyfills are often used to add missing features with javascript.
Progressive web apps - MDN Web Docs Glossary: Definitions of Web-related terms
progressive web apps is a term used to describe the
modern state of web app development.
... this involves taking standard web sites/apps that enjoy all the best parts of the web — such as discoverability via search engines, being linkable via urls, and working across multiple form factors — and supercharging them with
modern apis (such as service workers and push) and features that confer other benefits more commonly attributed to native apps.
RGB - MDN Web Docs Glossary: Definitions of Web-related terms
red green blue (rgb) is a color
model that represents colors as mixtures of three underlying components (or channels), namely, red, green, and blue.
... learn more general knowledge rgb color
model on wikipedia learn about it css data type: <color> ...
Brotli - MDN Web Docs Glossary: Definitions of Web-related terms
it compresses data using a combination of a
modern variant of the lz77 algorithm, huffman coding, and second-order context
modeling, providing a compression ratio comparable to the best currently available general-purpose compression methods.
... brotli is compatible with most
modern browsers, but you may want to consider a fallback.
Viewport - MDN Web Docs Glossary: Definitions of Web-related terms
in web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen
mode).
... learn more general knowledge visual viewport api viewport on wikipedia a tale of two viewports (quirks
mode) visual viewport in the mdn glossary layout viewport in the mdn glossary ...
HTML: A good basis for accessibility - Learn web development
you can verify these claims by comparing your previous experience with a more
modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>related</h2> <!-- aside content in here --> ...
... </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more
modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout.
HTML: A good basis for accessibility - Learn web development
you can verify these claims by comparing your previous experience with a more
modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>related</h2> <!-- aside content in here --> ...
... </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more
modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout.
WAI-ARIA basics - Learn web development
let's look at an example — our website-no-roles example (see it live) has the following structure: <header> <h1>...</h1> <nav> <ul>...</ul> <form> <!-- search form --> </form> </nav> </header> <main> <article>...</article> <aside>...</aside> </main> <footer>...</footer> if you try testing the example with a screenreader in a
modern browser, you'll already get some useful information.
... the problem is that
modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e.
Images, media, and form elements - Learn web development
you learned about the box-sizing property in our box
model lesson and you can use this knowledge when styling forms to ensure a consistent experience when setting widths and heights on form elements.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Overflowing content - Learn web development
unwanted overflow in web design
modern layout methods (described in css layout) manage overflow.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
next we will move on to another important part of css — the css box
model.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Pseudo-classes and pseudo-elements - Learn web development
modern browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Flexbox - Learn web development
to get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a
modern browser (like firefox or chrome), and have a look at the code in your code editor.
... the flex
model when elements are laid out as flex items, they are laid out along two axes: the main axis is the axis running in the direction the flex items are being laid out in (e.g.
Floats - Learn web development
display: flow-root the
modern way of solving this problem is to use the value flow-root of the display property.
... summary you now know all there is to know about floats in
modern web development.
Legacy layout methods - Learn web development
for new projects, in most cases css grid layout will be used in combination with one or more other
modern layout methods to form the basis for any layout.
...this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box
model completely for more explanation).
CSS layout - Learn web development
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings,
modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
...this article explains how to use
modern web techniques without locking out users of older technology.
Use CSS to solve common problems - Learn web development
how to change the box
model completely using box-sizing how to control backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques css allows some advanced design techniques.
... general how to calculate specificity of a css selector how to control inheritance in css advanced effects how to use filters in css how to use blend
modes in css layout using css flexible boxes using css multi-column layouts using css generated content ...
Fundamental text and font styling - Learn web development
note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box
model article, to brush up on the box
model theory, before carrying on.
... writing-
mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.
What are browser developer tools? - Learn web development
every
modern web browser includes a powerful suite of developer tools.
... layout: in firefox, this area includes two sections: box
model: represents visually the current element's box
model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
The HTML5 input types - Learn web development
another feature worth noting is that the values of a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same website; this tends to happen automatically in most
modern browsers.
...most
modern frameworks have good components available to provide this functionality, and there are standalone libraries available too (see top date picker javascript plugins and libraries for some suggestions).
Sending forms through JavaScript - Learn web development
many
modern uis only use html forms to collect input from the user, and not for data submission.
... note: the fetch api is often used in place of xhr these days — it is a
modern, updated version of xhr, which works in a similar fashion but has some advantages.
Styling web forms - Learn web development
this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and
modern browsers give us more features to use.
... box sizing all text fields have complete support for every property related to the css box
model, such as width, height, padding, margin, and border.
UI pseudo-classes - Learn web development
in this article, we will explore in detail the different ui pseudo-classes available to us in
modern browsers for styling forms in different states.
... the following are fairly well-supported in
modern browsers: the :focus-within pseudo-class matches an element that has received focus or contains an element that has received focus.
JavaScript basics - Learn web development
example javascript is one of the most popular
modern web technologies!
... note: both of the features you used in this exercise are parts of the document object
model (dom) api, which has the capability to manipulate documents.
What’s in the head? Metadata in HTML - Learn web development
applying css and javascript to html just about all websites you'll use in the
modern day will employ css to make them look cool, and javascript to power interactive functionality, such as video players, maps, games, and more.
...there are actually a number of ways to handle loading javascript on your page, but this is the most foolproof one to use for
modern browsers (for others, read script loading strategies).
From object to iframe — other embedding technologies - Learn web development
om/docs/glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allowfullscreen if set, the <iframe> is able to be placed in fullscreen
mode using the full screen api (somewhat beyond scope for this article.) frameborder if set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour.
... sandbox this attribute, which works in slightly more
modern browsers than the rest of the <iframe> features (e.g.
Responsive images - Learn web development
note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of
modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images?
... use
modern image formats boldly there are several exciting new image formats (such as webp and jpeg-2000) that can maintain a low file size and high quality at the same time.
Build your own function - Learn web development
note: this example should work in all
modern browsers fine, but the styling might look a bit funny in slightly older browsers.
... we'd recommend you doing this exercise in a
modern browser like firefox, opera, or chrome.
JavaScript object basics - Learn web development
when you accessed the document object
model using lines like this: const mydiv = document.createelement('div'); const myvideo = document.queryselector('video'); you were using methods available on an instance of the document class.
...as an example, the notifications api — which allows
modern browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire.
Object prototypes - Learn web development
in the next article, we talk about the
modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes.
... most
modern browsers, however, do offer property available called __proto__ (that's 2 underscores either side), which contains the object's constructor's prototype object.
Aprender y obtener ayuda - Learn web development
some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box
model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't rememb...
...for example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this: a nav menu is usually created from a list of links, something like: <ul> <li>first menu item</li> <li>second menu item</li> <li>third menu item</li> <li>etc.</li> </ul> to make all the items sit horizontally on a line, the easiest
modern way is to use flexbox: ul { display: flex; } to remove unneeded spacing and bullet points, we can do this: ul { list-style-type: none; padding: 0; } etc.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Ember interactivity: Events, classes and state - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Ember app structure and componentization - Learn web development
a deeper understanding of
modern javascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Using Vue computed properties - Learn web development
since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-
model.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Creating our first Vue component - Learn web development
note: prop validation only happens in development
mode, so you can't strictly rely on it in production.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Focus management with Vue refs - Learn web development
in todoitemeditform.vue, attach ref="labelinput" to the <input> element, like so: <input :id="id" ref="labelinput" type="text" autocomplete="off" v-
model.lazy.trim="newname" /> next, add a mounted() property just inside your component object — note that this should not be put inside the methods property, but rather at the same hierarchy level as props, data(), and methods.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Rendering a list of Vue components - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a
model to control the data.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Styling Vue components with CSS - Learn web development
</label> </h2> <input type="text" id="new-todo-input" name="new-todo" autocomplete="off" v-
model.lazy.trim="label" class="input__lg" /> <button type="submit" class="btn btn__primary btn__lg"> add </button> </form> </template> let's also add the stack-large class to the <ul> tag in our app.vue file.
... with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Introduction to cross browser testing - Learn web development
on
modern browsers you might get something animated, 3d and shiny, whereas on older browsers you might just get a flat graphic representing the same information.
...for example: try to test the latest change on all the
modern desktop browsers you can — including firefox, chrome, opera, ie, edge, and safari on desktop (mac, windows, and linux, ideally).
Tools and testing - Learn web development
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, interactive web applications.
... many
modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.
Debugging OpenGL
opengl debug
mode when running a debug build, you can enable the opengl debug
mode by defining the environment variable moz_gl_debug.
... if you need more verbose debug output, you can enable the verbose debug
mode by defining the environment variable moz_gl_debug_verbose.
mach
mach will invoke make in silent
mode.
...here is a minimal mach command module: from __future__ import print_function, unicode_literals from mach.decorators import ( commandargument, commandprovider, command, ) @commandprovider class machcommands(object): @command('doit', description='run it!') @commandargument('--debug', '-d', action='store_true', help='do it in debug
mode.') def doit(self, debug=false): print('i did it!') from mach.decorators we import some python decorators which are used to define what python code corresponds to mach commands.
Embedding the editor
they should need to do as little work as possible to get basic editing functionality, be able to have any number of <editor>s per window, and control whether those <editor>s are in html or plain text
mode.
...the problem with this ownership
model is that there can be only one editor per <editor> tag, yet the document loaded in the <iframe> may itself contain multiple <iframe>s (consider a frameset document, or a document itself containing an <html:iframe>).
How Mozilla determines MIME Types
(for this specific example, the server override only happens in standards-compliant
mode.
... see mozilla's quirks
mode or web author faq).
WebRequest.jsm
the webrequest api is
modeled on chrome's webrequest extension api, which makes it easier to write cross-browser add-on code.
... "script" "image" "object" "xmlhttprequest" http headers https headers are represented as objects with two properties, name and value: name type description name string header name, for example "content-type" value string header value, for example "image/png" chrome incompatibilities although this api is
modeled on chrome's webrequest extension api, there are some differences.
Localizing with Pontoon
in-context pontoon's in-context translation
mode is what puts it above others.
...click on it to enable the translate
mode.
Preference reference
the xul cache is serialized and saved between mozilla sessions in the xul fastload file, which saves a “compiled” version of the xul and javascript in a document to disk for faster startup the next time the application runs.reader.parse-on-load.force-enabledthe 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.ui.alertnotificationoriginui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in.ui.spellcheckerunderlineui.spellcheckerunderline holds the colour which is used to underline words not recognized by the spellchecker.ui.spellcheckerunderlinestyleui.spellcheckerunderlinestyle holds the style which is used to underline words not recognized by the spellchecker.ui.textselectbackgroundui.textselectbackground saves the color in which the background of a text selection in the user interface or in content will be styled.ui.textselectforegroundui.textselectforeground saves the color in which the text of a text selection in the...
About NSPR
i/o nspr's i/o is a slightly augmented bsd sockets
model that allows arbitrary layering.
... nspr is functionally complete and has entered a
mode of sustaining engineering.
PR ImportTCPSocket
for example, on posix systems, nspr will put the native file descriptor (an int) in non-blocking
mode by calling fcntl to set the o_nonblock file status flag on the native file descriptor, and then nspr will call socket functions such as recv, send, and poll on the native file descriptor.
... the caller must not do anything to the native file descriptor before the pr_importtcpsocket call that will prevent the native file descriptor from working in non-blocking
mode.
PR_OpenSharedMemory
syntax #include <prshm.h> nspr_api( prsharedmemory * ) pr_opensharedmemory( const char *name, prsize size, printn flags, printn
mode ); /* define values for pr_opensharememory(...,create) */ #define pr_shm_create 0x1 /* create if not exist */ #define pr_shm_excl 0x2 /* fail if already exists */ parameters the function has the following parameters: name the name of the shared memory segment.
...
mode same as passed to pr_open.
Introduction to Network Security Services
these hp and solaris platforms allow programs that use the ilp32 program
model to run on both 32-bit cpus and 64-bit cpus.
... note that nss 3.x is also available in the lp64
model for these platforms, but the lp64
model of nss 3.x does not have these two extra shared libraries.
4.3.1 Release Notes
this default setting can also be changed within the application by using the following jss methods: sslserversocket.enablerenegotiation(int
mode) sslsocket.enablerenegotiation(int
mode) sslsocket.enablerenegotiationdefault(int
mode) the
mode of renegotiation that the peer must use can be set to the following: sslsocket.ssl_renegotiate_never - never renegotiate at all.
...jss only supports the native threading
model (no green threads).
JSS FAQ
jss only supports the native threading
model (no green threads).
...as well you must use the java flag -d64 to specify the 64-bit data
model.
JSS Provider Notes
); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature what's not supported the following classes don't work very well: keystore: there are many serious problems mapping the jca keystore interface onto nss's
model of pkcs #11 modules.
... cipher supported algorithms notes aes des desede (des3 ) rc2 rc4 rsa the following
modes and padding schemes are supported: algorithm
mode padding des ecb nopadding cbc nopadding pkcs5 padding desede des...
Mozilla-JSS JCA Provider notes
dsakpg.initialize(1024); keypair dsapair = dsakpg.generatekeypair(); supported classes cipher dsaprivatekey dsapublickey keyfactory keygenerator keypairgenerator mac messagedigest rsaprivatekey rsapublickey secretkeyfactory secretkey securerandom signature cipher supported algorithms notes aes des desede (des3) rc2 rc4 rsa the following
modes and padding schemes are supported: algorithm
mode padding des ecb nopadding cbc nopadding pkcs5 padding desede des3 ecb nopadding cbc nopadding pkcs5 padding aes ...
... what's not supported the following classes don't work very well: keystore: there are many serious problems mapping the jca keystore interface onto nss's
model of pkcs #11 modules.
NSS 3.35 release notes
if nss is initialized, in read-write
mode with a database directory provided, it uses database files to store certificates, key, trust, and other information.
... an option to enable tls 1.3 compatibility
mode, ssl_enable_tls13_compat_
mode, was added.
NSS 3.52 release notes
bug 1629663 - add ikev1 quick
mode kdf.
... bug 1561637 - tls 1.3 does not work in fips
mode.
NSS Sample Code sample2
* note: iv is only needed if cipher blocking chaining (cbc)
mode of encryption * is used * * the recommended approach is to store and transport wrapped (encrypted) * des keys (ivs can be in the clear).
... * when not using cbc
mode, ivitem.data and ivitem.len can be 0, or you * can simply pass null for the iv parameter in pk11_paramfromiv func */ ivitem.type = sibuffer; ivitem.data = giv; ivitem.len = sizeof(giv); secparam = pk11_paramfromiv(ciphermech, &ivitem); if (secparam == null) { fprintf(stderr, "failure to set up pkcs11 param (err %d)\n", pr_geterror()); goto out; } /* samp...
NSS Tools sslstrength
step-up step up is a
mode where the connection starts out with 40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption.
... this is only done in 'export
mode', with servers with a special certificate.
FC_GetFunctionList
name fc_getfunctionlist - get a pointer to the list of function pointers in the fips
mode of operation.
... description fc_getfunctionlist stores in *ppfunctionlist a pointer to the nss cryptographic module's list of function pointers in the fips
mode of operation.
FC_GetTokenInfo
model:
model of the device, "nss 3", padded with spaces to 16 characters and not null-terminated.
...if login is required (which is true for the fips
mode of operation), this flag means the user's password has been initialized.
NSS tools : ssltab
when used with looping
mode, the different connections are separated with horizontal lines.
...to make the tool continue to accept connections, switch on looping
mode with the -l option.
NSS tools : ssltap
when used with looping
mode, the different connections are separated with horizontal lines.
...to make the tool continue to accept connections, switch on looping
mode with the -l option.
sslerr.html
sec_error_pkcs12_unsupported_transport_
mode -8111 unable to import.
... only password integrity and privacy
modes supported.
sslintro.html
you can pass this function a
model file descriptor to create the new ssl socket with the same configuration state as the
model.
...in this case, initial configuration takes place in the same way: pass the existing nspr file descriptor to ssl_importfd and perform any additional configuration that has not already been determined by the
model file descriptor.
NSS_3.12.3_release_notes.html
backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11
mode in non fips
mode failed.
... bug 472749: softoken permits aes keys of any length to be created bug 473147: pk11
mode tests fails on aix when using shareable dbs.
NSS Tools dbck-tasks
nss security tools: dbck tasks newsgroup: mozilla.dev.tech.crypto task list in analyze
mode, there should be an option to create a file containing a graph of the certificate database without any information about the user's certificates (no common names, email addresses, etc.).
...there should be command-line options and, perhaps, an interactive
mode to allow determine which certificates to keep.
NSS Tools pk12util
for historical export control reasons "pkcs12 v2 pbe with sha1 and 40 bit rc4" is the default for the overall package encryption when not in fips
mode and no package encryption when in fips
mode.
...llia-192-cbc" "camellia-256-cbc" pkcs #12 pbe ciphers: "pkcs #12 pbe with sha1 and 128 bit rc4" "pkcs #12 pbe with sha1 and 40 bit rc4" "pkcs #12 pbe with sha1 and triple des cbc" "pkcs #12 pbe with sha1 and 128 bit rc2 cbc" "pkcs #12 pbe with sha1 and 40 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc4" "pkcs12 v2 pbe with sha1 and 40 bit rc4" --- default for pfx encryption in non-fips
mode, no encryption on fips
mode "pkcs12 v2 pbe with sha1 and 3key triple des-cbc" "pkcs12 v2 pbe with sha1 and 2key triple des-cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 40 bit rc2 cbc" pkcs #5 pbe ciphers: "pkcs #5 password based encryption with md2 and des cbc" "pkcs #5 password based encryption with md5 and des cbc" "pkcs #5 password based encryption with ...
NSS Tools sslstrength
step-up step up is a
mode where the connection starts out with 40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption.
... this is only done in 'export
mode', with servers with a special certificate.
NSS Tools ssltap
when used with looping
mode, the different connections are separated with horizontal lines.
...to make the tool continue to accept connections, switch on looping
mode with the -l option.
NSS tools : signtool
for information on using the -m option to verify fips-140-1 validated
mode, see "netscape signing tool and fips-140-1".
...you use this name with the -k argument as follows: signtool -k "mycard:my signing cert" directory verifying fips
mode use the -m option to verify that you are using the fips-140-1 module.
NSS tools : ssltap
when used with looping
mode, the different connections are separated with horizontal lines.
...to make the tool continue to accept connections, switch on looping
mode with the -l option.
The JavaScript Runtime
interpretation beginning with rhino 1.4 release 2, an interpretive
mode is supported.
... when scripts are compiled in interpretive
mode, an internal representation of the compiled form is created and stored rather than generating a java class.
Rhino serialization
however, serialization of code in compilation
mode has some significant limitations.
...rhino serialization in compilation
mode serialization works well with objects and with functions and scripts in interpretive
mode.
SpiderMonkey compartments
in the old
model, javascript objects could be co-located with arbitrary other javascript objects from other origins.
...in the new
model most objects touched by a website are tightly packed next to each other in memory, with no cross-origin objects in between.
Hacking Tips
since there isn't debug info for the jitted code, you will need to tell gdb that you are looking at arm code: (gdb) set arm force-
mode arm or you can wrap the x command in your own command: def xi set arm force-
mode arm eval "x/%di %d", $arg0, $arg1 set arm force-
mode auto end printing asm.js/wasm generated assembly code (from gdb) set a breakpoint on js::wasm::instance::callexport (defined in wasminstance.cpp as of november 18th 2016).
... if (getenv("inst_dump")) { char buf[4096]; sprintf(buf, "gdb /proc/%d/exe %d -batch -ex 'set pagination off' -ex 'set arm force-
mode arm' -ex 'x/%di %p' -ex 'set arm force-
mode auto'", getpid(), getpid(), m_buffer.size() / 4, buffer); system(buf); } if you aren't running on arm, you should omit the -ex 'set arm force-
mode arm' and -ex 'set arm force-
mode auto'.
Index
89 jscheckaccessop jsapi reference, obsolete, reference, référence(2), spidermonkey check whether obj[id] may be accessed per
mode, returning js_false on error/exception, js_true on success with obj[id]'s stored value in *vp.
... 532 garbage collection guide, needscontent, spidermonkey spidermonkey has a mark-sweep garbage collection (gc) with incremental marking
mode, generational collection, and compaction.
Invariants
the same slot being allocated to more than one property would be a problem for obvious reasons.) all jsshapes in dictionary-
mode objects have the in_dictionary flag set.
...in particular, native objects' fields are protected by property locking (below); and several things are protected by the request
model, such that there may be either one writer (in gc) or many readers (in requests).
SpiderMonkey Internals
this code is compiled in a special compilation
mode that gives it access to functionality that's not normally exposed to js code, but that's required for safe and specification-conformant implementation of built-in functions.
... jscpucfg.cpp this standalone program generates jscpucfg.h, a header file containing bytes per word and other constants that depend on cpu architecture and c compiler type
model.
JIT Optimization Strategies
consider the following constructor: function point(x, y) { this.x = x; this.y = y; } if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed"
mode - with the property values stored as raw 4-byte values within the object.
... consider the following constructor: function point(x, y) { this.x = x; this.y = y; } if only integers are ever stored in the x and y properties, then the instances of point will be represented in an "unboxed"
mode - with the property values stored as raw 4-byte values within the object.
JS_PreventExtensions
the failure-
mode information below is new as of spidermonkey 36.
... there are instead two
modes of failure: through internal error, and because the object denied the attempt.
SpiderMonkey 1.8.7
new javascript language features xxx needs updating javascript 1.8.5 adds support for ecmascript edition 5, including es5 strict
mode.
... jsxdrapi changes were missed jsstrictpropertyop for setters (affects jsclass) - maybe general notes about es5 strict
mode changes in jsapi tricks like argv[-2] not guaranteed to work any more; is js_callee or similar instead ...
Web Replay
open a new tab in recording
mode click the 'tools -> web developer -> web replay -> reload and record tab' menu item.
...logpoints cannot have side-effects or diverge from the recording in any othe way in this
mode.
Gecko events
is supported: no event_movesize_end the movement or resizing of a window has finished is supported: no event_contexthelp_start a window has entered context-sensitive help
mode is supported: no event_contexthelp_end a window has exited context-sensitive help
mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop
mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop
mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dialog_end a dialog box has been ...
...event_table_
model_changed a table's data changed.
XForms Accessibility
he wrote: navindex was in xforms - it was stripped out as it was believed the focus
model was dependent on the content which used it.
... state it is formed as well from
model item properties (mips) of instance node that xforms element is bound to as from valid/invalid or in-range/out-of-range states of instance node.
Querying Places
odified_ascending = 13 const unsigned short sort_by_lastmodified_descending = 14 const unsigned short sort_by_annotation_ascending = 15 const unsigned short sort_by_annotation_descending = 16 const unsigned short results_as_uri = 0 const unsigned short results_as_visit = 1 const unsigned short results_as_full_visit = 2 (not yet implemented -- see bug 320831) attribute unsigned short sorting
mode attribute autf8string sortingannotation attribute unsigned short resulttype attribute boolean excludeitems attribute boolean excludequeries attribute boolean excludereadonlyfolders attribute boolean expandqueries attribute boolean includehidden attribute boolean showsessions attribute unsigned long maxresults const unsigned short query_type_history = 0 const unsigned short query_type_b...
...ordering
mode and sorting
mode...) // see : https://developer.mozilla.org/en/nsinavhistoryqueryoptions var options = placesutils.history.getnewqueryoptions(); // execute the query // see : https://developer.mozilla.org/en/nsinavhistoryservice#executequery() var result = placesutils.history.executequery(query, options); // using the results by traversing a container // see : https://developer.mozilla.org/en/n...
An Overview of XPCOM
the book is presented as a tutorial about creating xpcom components, but it covers all major aspects, concepts, and terminology of the xpcom component
model along the way.
...the best way to tackle a project of this size is to divide it into smaller, more manageable pieces, use a component programming
model, and to organize related sets of components into modules.
Components.utils
strict boolean strict
mode is enabled.
... strict_
mode boolean read only.
mozIPlacesAutoComplete
note: pages will not be automatically unregistered when private browsing
mode is entered or exited.
...note: pages will not be automatically unregistered when private browsing
mode is entered or exited.
nsICache
if a cache entry is waiting to be validated by another cache descriptor (so no new cache descriptors for that key can be created), opencacheentry() will return ns_error_cache_wait_for_validation in non-blocking
mode.
...in blocking
mode, it will wait until the cache entry for the key has been validated or doomed.
nsICacheEntryDescriptor
putstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccess
mode get the access granted to this descriptor.
... see nsicache for the definitions of the access
modes and a thorough description of their corresponding meanings.
nsIContentSecurityPolicy
content/base/public/nsicontentsecuritypolicy.idlscriptable describes an xpcom component used to
model and enforce content security policies.
... reportonly
mode boolean when set to true, content load-blocking and fail-closed are disabled: content security policy will only send reports, and not modify behavior.
nsIContentViewer
[noscript,notxpcom,nostdcall] void setnavigationtiming(in nsdomnavigationtimingptr atiming); void setpage
mode(in boolean apage
mode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type description container nsisupports domdocument nsidomdocument enablerendering boolean obsolete since gecko 2.0 historyentry nsishentry g...
...[noscript,notxpcom,nostdcall] void setnavigationtiming( in nsdomnavigationtimingptr atiming ); parameters atiming missing description return value missing description setpage
mode() void setpage
mode( in boolean apage
mode, in nsiprintsettings aprintsettings ); parameters apage
mode missing description aprintsettings missing description show() void show(); parameters none.
nsIDOMEventGroup
dom/interfaces/events/nsidomeventgroup.idlscriptable this interface is the interface implemented by all event targets in the document object
model.
...see also document object
model (dom) level 3 events specification ...
nsIDOMNSHTMLDocument
n domstring commandid); void releaseevents(in long eventflags); void routeevent(in nsidomevent evt); void write(); obsolete since gecko 2.0 void writeln(); obsolete since gecko 2.0 attributes attribute type description alinkcolor domstring same as body.alink bgcolor domstring same as body.bgcolor compat
mode domstring returns "backcompat" if the document is in quirks
mode or "css1compat" if the document is in full standards or almost standards
mode.
... design
mode domstring set to "on" or "off" to enable or disable editing for the entire document at once.
nsIDOMNode
dom/interfaces/core/nsidomnode.idlscriptable this interface is the primary datatype for the entire document object
model.
...removechild() nsidomnode removechild( in nsidomnode oldchild ); parameters oldchild return value replacechild() nsidomnode replacechild( in nsidomnode newchild, in nsidomnode oldchild ); parameters newchild oldchild return value see also document object
model (dom) level 2 core specificationrec ...
nsIEventTarget
obsolete since gecko 1.9 constants dispatch flags constant value description dispatch_normal 0 this flag specifies the default
mode of event dispatch, whereby the event is simply queued for later processing.
... dispatch_sync 1 this flag specifies the synchronous
mode of event dispatch, in which the dispatch() method does not return until the event has been processed.
nsIFileInputStream
if set to -1 the file will be opened in default
mode (pr_rdonly).
... perm file
mode bits are described in the pr_open documentation.
nsIFileOutputStream
use -1 to open the file in default
mode (pr_wronly | pr_create_file | pr_truncate).
... perm file
mode bits are described in the pr_open documentation.
nsIFileStreams
ioflags file open flags listed in prio.h (see pr_open documentation) or -1 to open the file in default
mode (pr_rdonly).
... perm file
mode bits listed in prio.h or -1 to use the default value (0).
nsIIOService
incipal aloadingprincipal, in nsiprincipal atriggeringprincipal, in uint32_t asecurityflags, in uint32_t acontentpolicytype); nsiuri newfileuri(in nsifile afile); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description offline boolean returns true if networking is in "offline"
mode.
... when in offline
mode, attempts to access the network will fail (although this does not necessarily correlate with whether there is actually a network available -- that's hard to detect without causing the dialer to come up).
nsISelectionController
getdisplayselection() will get the display
mode for the selection.
... setdisplayselection() will set the display
mode for the selection.
nsISound
inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) warning: this interface should not be used to play custom sounds in
modern code.
... warning: this method should not be used in
modern code.
nsITransport
in addition, in non-blocking
mode, the stream is guaranteed to support nsiasyncinputstream.
...in addition, in non- blocking
mode, the stream is guaranteed to support nsiasyncoutputstream.
nsIXFormsNSInstanceElement
essentially it is just a shortcut to nsixforms
modelelement::getinstancedocument() for the given instance element.
... related interfaces nsixforms
modelelement example code none.
nsIXPCScriptable
sval id, in pruint32 flags, out jsobjectptr objp); prbool convert(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 type, in jsvalptr vp); void finalize(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool checkaccess(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint32
mode, in jsvalptr vp); prbool call(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr vp); prbool construct(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr vp); prbool hasinstance(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsob...
...2 type, in jsvalptr vp ); parameters wrapper cx obj type vp return value finalize() void finalize( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj ); parameters wrapper cx obj checkaccess() prbool checkaccess( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in jsval id, in pruint32
mode, in jsvalptr vp ); parameters wrapper cx obj id
mode vp return value call() prbool call( in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj, in pruint32 argc, in jsvalptr argv, in jsvalptr vp ); parameters wrapper cx obj argc argv vp return value construct() prbool construct( in nsixpconnectwrappednative...
XPCOM
xpcom is a cross platform component object
model, similar to microsoft com.
...xpcom is mozilla’s cross platform component object
model, similar to microsoft’s com technology.
pyxpidl
xpidl option description pyxpidl equivalent -a emit annotations to typelib n/a (feature removed) -w turn on warnings n/a (this is now the default and can't be turned off) -v verbose
mode (nyi) n/a (feature removed) -t creates a typelib of a specific version number n/a (feature removed, and probably never actually worked) -i add an entry to start of include path for #include "nsifoo.idl" -i (unchanged) -o specify the base name for output (-o /tmp/nsifoo for example) -o outputfile (this isn't just the base name, but needs to include t...
...he extension; for example -o /tmp/nsifoo.idl) -e specify an explicit output file name (-e /tmp/nsifoo.idl for example) n/a (this is subsumed by -o now) -d write dependencies (requires -e) -d (unchanged) -m specify output
mode n/a (feature removed; use header.py or typelib.py specifically) it's worth noting that the old output
mode options for generating documentation and java interfaces (-m doc and -m java) have no equivalents in pyxpidl.
xpidl
for testing purposes, or one-off interface compilation, xpidl can be run from the command line: usage: ./xpidl -m
mode [-w] [-v] [-t version number] [-d filename.pp] [-i path] [-o basename | -e filename.ext] filename.idl -a emit annotations to typelib -w turn on warnings (recommended) -v verbose
mode (nyi) -t create a typelib of a specific version number -i add entry to start of include path for ``#include "nsithing.idl" -o use basename (e.g.
... ``/tmp/nsithing) for output -e use explicit output filename -d write dependencies (requires -e) -m specify output
mode: header generate c++ header (.h) typelib generate xpconnect typelib (.xpt) doc generate html documentation (.html) java generate java interface (.java) ...
XPIDL
y y optional_argc y n adds an additional uint8_t _argc parameter to the c++ implementation y y infallible n y generates an infallible c++ getter for the attribute n n must_use y y adds moz_must_use to the generated function declarations n n method parameters each method parameter can be specified in one of three
modes: in, out, or inout.
... an out parameter is essentially an auxiliary return value, although these are
moderately cumbersome to use from script contexts and should therefore be avoided if reasonable.
Initialization and Destruction - Plugins
nperror npp_new(npmimetype plugintype, npp instance, uint16
mode, int16 argc, char *argn[], char *argv[], npsaveddata *saved); the plugintype parameter represents the mime type of this instance of the plug-in.
... the
mode parameter identifies the display
mode in which the plug-in was invoked, either np_embed or np_full.
Debugger.Frame - Firefox Developer Tools
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.
Debugger.Memory - Firefox Developer Tools
known values include the following: “gc
mode” “malloc bytes trigger” “allocation trigger” “requested” gccyclenumber the gc cycle’s “number”.
... objects spidermonkey objects usually use less memory than the naïve “table of properties with attributes”
model would suggest.
Debugger.Object - Firefox Developer Tools
codeis interpreted as strict
mode code when it contains a use strict directive.
...regardless ofcode being strict
mode code, variable declarations incode affect the referent global object.
Deprecated tools - Firefox Developer Tools
alternatives in firefox 71+, you can write multi-line javascript code in the web console editor
mode, making it similar to the scratchpad.
... the editor
mode can be triggered clicking on the icon on the right of the console input, or with ctrl + b (cmd + b on macos) when in editor
mode, the enter key adds a new line in the input, and you can evaluate the expression using ctrl + enter (cmd + enter on macos).
Examine and edit CSS - Firefox Developer Tools
this makes it easy to see which rule is overriding the declaration: view @media rules for print you can toggle the display into a
mode that emulates @media rules for print.
... when on, any rules defined for printing the page will be displayed similar to the "print preview"
mode that many word processing applications provide.
Page Inspector - Firefox Developer Tools
you can split the rules view out into its own pane, separate from the other tabs on the css pane — this is called 3-pane
mode.
... how to to find out what you can do with the inspector, see the following how to guides: open the inspector examine and edit html examine and edit the box
model inspect and select colors reposition elements in the page edit fonts visualize transforms use the inspector api select an element examine and edit css examine event listeners work with animations edit css filters edit css shapes view background images use the inspector from the web console examine css grid layouts examine css flexbox layouts reference keyboard shortcuts settings ...
AudioListener.forwardX - Web APIs
note: the parameter is a-rate when used with a pannernode whose panning
model is set to equalpower, or k-rate otherwise.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.forwardY - Web APIs
note: the parameter is a-rate when used with a pannernode whose panning
model is set to equalpower, or k-rate otherwise.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.forwardZ - Web APIs
note: the parameter is a-rate when used with a pannernode whose panning
model is set to equalpower, or k-rate otherwise.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioNode - Web APIs
its usage and precise definition depend on the value of audionode.channelcount
mode.
... audionode.channelcount
mode represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
CSSMediaRule - Web APIs
css object
model (cssom)the definition of 'cssmediarule' in that specification.
... working draft no changes from document object
model (dom) level 2 style specification document object
model (dom) level 2 style specificationthe definition of 'cssmediarule' in that specification.
CSSPageRule - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'csspagerule' in that specification.
... working draft no changes from document object
model (dom) level 2 style specification document object
model (dom) level 2 style specificationthe definition of 'csspagerule' in that specification.
CSSRule - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'cssrule' in that specification.
...(document_rule has been pushed to css conditional rules level 4) document object
model (dom) level 2 style specificationthe definition of 'cssrule' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.getpropertypriority()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.item() - Web APIs
javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.item()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.length - Web APIs
example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.parentRule - Web APIs
example the following javascript code gets the parent css style rule from a cssstyledeclaration: var declaration = document.stylesheets[0].rules[0].style; var rule = declaration.parentrule; specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.parentrule' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
example the following javascript code removes the background-color css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.setProperty() - Web APIs
d-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration - Web APIs
example var styleobj = document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration' in that specification.
... document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleRule - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'cssstylerule' in that specification.
... working draft no changes document object
model (dom) level 2 style specificationthe definition of 'cssrule' in that specification.
CSSStyleSheet - Web APIs
yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'cssstylesheet' in that specification.
Using dynamic styling information - Web APIs
the css object
model (cssom), part of the dom, exposes specific interfaces allowing manipulation of a wide amount of information regarding css.
... initially defined in the dom level 2 style recommendation, these interfaces forms now a specification, css object
model (cssom) which aims at superseding it.
Using the CSS Painting API - Web APIs
it would be better if the background image was relative to the size of the element — we can use the element's paintsize property to ensure the background image is proportional to the size of the element's box
model size.
... 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item</li> </ul> in our <script> we register the worklet: css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hollow.js'); see also css painting api css typed object
model api ...
ChannelSplitterNode - Web APIs
channel count
mode "explicit" older implementations, as per earlier versions of the spec use "max".
...older implementations, as per earlier versions of the spec use 2 (not used in the default count
mode).
Using channel messaging - Web APIs
such things are not so easy using conventional web technology, because of the security
models the web uses.
... note: for more information and ideas, the ports as the basis of an object-capability
model on the web section of the spec is a useful read.
ConvolverNode.buffer - Web APIs
this is normally a simple recording of as-close-to-an-impulse as can be found in the space you want to
model.
... for example, if you want to
model the reverb in your bathroom, you might set up a microphone near the door to record the sound of a balloon pop or synthesized impulse from the sink.
CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({
mode: 'open'}); // create spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and put it inside the info span...
...ructor() { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({
mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define ...
DOMImplementation.createDocument() - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'domimplementation.createdocument' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'domimplementation.createdocument' in that specification.
DOMImplementation.createDocumentType() - Web APIs
living standard no change from document object
model (dom) level 3 core specification document object
model (dom) level 3 core specificationthe definition of 'domimplementation.createdocumenttype' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'domimplementation.createdocumenttype' in that specification.
Document.cookie - Web APIs
this is the default value in
modern browsers.
...value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status comment document object
model (dom) level 2 html specificationthe definition of 'document.cookie' in that specification.
Document.execCommand() - Web APIs
when an html document has been switched to design
mode, its document object exposes an execcommand method to run commands that manipulate the current editable region, such as form inputs or contenteditable elements.
...in stylewithcss
mode, it affects the background color of the containing block instead.
Document.onfullscreenerror - Web APIs
the document.onfullscreenerror property is an event handler for the fullscreenerror event that is sent to the document when it fails to transition into full-screen
mode after a prior call to element.requestfullscreen().
... document.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen
mode."); }; //....
Document.write() - Web APIs
example <html> <head> <title>write example</title> <script> function newcontent() { document.open(); document.write("<h1>out with the old, in with the new!</h1>"); document.close(); } </script> </head> <body onload="newcontent();"> <p>some original document content.</p> </body> </html> notes the text you write is parsed into the document's structure
model.
... living standard document object
model (dom) level 2 html specificationthe definition of 'document.write(...)' in that specification.
Events and the DOM - Web APIs
introduction this chapter describes the dom event
model.
... eventtarget.addeventlistener // assuming mybutton is a button element mybutton.addeventlistener('click', greet, false) function greet(event){ // print and have a look at the event object // always print arguments in case of overlooking any other arguments console.log('greet:', arguments) alert('hello world') } this is the method you should use in
modern web pages.
Element.attachShadow() - Web APIs
s you can attach a shadow root to: any autonomous custom element with a valid name <article> <aside> <blockquote> <body> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields:
mode a string specifying the encapsulation
mode for the shadow dom tree.
...) { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.trim().split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({
mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define th...
Element: click event - Web APIs
specifications specification status ui events working draft document object
model (dom) level 3 events specificationthe definition of 'click' in that specification.
... obsolete document object
model (dom) level 2 events specificationthe definition of 'click' in that specification.
Element.clientTop - Web APIs
padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom notes clienttop was first introduced in the ms ie dhtml object
model.
... specifications specification status comment css object
model (cssom) view modulethe definition of 'clienttop' in that specification.
Element.getAttributeNS() - Web APIs
living standard document object
model (dom) level 3 core specificationthe definition of 'element.getattributens()' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'element.getattributens()' in that specification.
Element.getClientRects() - Web APIs
erectdiv); } } (function() { /* call function addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt = document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.length; i++) { addclientrectsoverlay(elt[i]); } })(); result specifications specification status comment css object
model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
... working draft initial definition notes getclientrects() was first introduced in the ms ie dhtml object
model.
Element.hasAttribute() - Web APIs
living standard from document object
model (dom) level 3 core specification, moved from node to element document object
model (dom) level 3 core specificationthe definition of 'element.hasattribute()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'element.hasattribute()' in that specification.
Element.hasAttributes() - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'hasattributes()' in that specification.
... obsolete no change from document object
model (dom) level 2 core specification document object
model (dom) level 2 core specificationthe definition of 'hasattributes()' in that specification.
Element.openOrClosedShadowRoot - Web APIs
the element.openorcloseshadowroot read-only property represents the shadow root hosted by the element, regardless if its
mode is open or closed.
... syntax var shadowroot = element.shadowroot; value a shadowroot object instance, regardless if its
mode is set to open or closed, or null if no shadow root is present.
Event.composed - Web APIs
the only difference between the two is that their shadow roots are attached with their
modes set to open and closed respectively.
... the first definition looks like this, for example: customelements.define('open-shadow', class extends htmlelement { constructor() { super(); let pelem = document.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <html> element: document.queryselector('html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> e...
Event.currentTarget - Web APIs
obsolete document object
model (dom) level 3 events specificationthe definition of 'current event target' in that specification.
... obsolete document object
model (dom) level 2 events specificationthe definition of 'event.currenttarget' in that specification.
Event.initEvent() - Web APIs
living standard from document object
model (dom) level 2 events specification, deprecated it, superseded by event constructors.
... document object
model (dom) level 2 events specificationthe definition of 'event.initevent()' in that specification.
EventTarget - Web APIs
document object
model (dom) level 3 events specificationthe definition of 'eventtarget' in that specification.
... document object
model (dom) level 2 events specificationthe definition of 'eventtarget' in that specification.
FullscreenOptions - Web APIs
the fullscreenoptions dictionary is used to provide configuration options when calling requestfullscreen() on an element to place that element into full-screen
mode.
... properties navigationuioptional a string controlling whether or not to keep browser user interface elements visible while the element is in full-screen
mode.
HTMLAnchorElement.rel - Web APIs
living standard no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specificationthe definition of 'rel' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'rel' in that specification.
HTMLBaseFontElement - Web APIs
specifications specification status comment document object
model (dom) level 2 html specificationthe definition of 'htmlbasefontelement' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'htmlbasefontelement' in that specification.
HTMLDocument - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmldocument' in that specification.
... obsolete supersedes dom 1 document object
model (dom) level 1 specificationthe definition of 'htmldocument' in that specification.
HTMLElement: beforeinput event - Web APIs
the event also applies to elements with contenteditable enabled, and to any element when design
mode is turned on.
... in the case of contenteditable and design
mode, the event target is the editing host.
HTMLElement.offsetHeight - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'offsetheight' in that specification.
... working draft notes offsetheight is a property of the dhtml object
model which was first introduced by msie.
HTMLElement.offsetWidth - Web APIs
example specification specification status comment css object
model (cssom) view modulethe definition of 'offsetwidth' in that specification.
... working draft notes offsetwidth is a property of the dhtml object
model which was first introduced by msie.
HTMLFieldSetElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlfieldsetelement' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'htmlfieldsetelement' in that specification.
HTMLHeadElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlheadelement' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'htmlheadelement' in that specification.
HTMLHeadingElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlheadingelement' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'htmlheadingelement' in that specification.
HTMLHtmlElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlhtmlelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlhtmlelement' in that specification.
HTMLInputElement.setRangeText() - Web APIs
syntax element.setrangetext(replacement); element.setrangetext(replacement, start, end [, select
mode]); parameters replacement the string to insert.
... select
mode optional a string defining how the selection should be set after the text has been replaced.
HTMLIsIndexElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlisindexelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'htmlisindexelement' in that specification.
HTMLLinkElement.rel - Web APIs
living standard no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specificationthe definition of 'rel' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'rel' in that specification.
HTMLLinkElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmllinkelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmllinkelement' in that specification.
HTMLObjectElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlobjectelement' in that specification.
HTMLOptionElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmloptionelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmloptionelement' in that specification.
HTMLElement.focus() - Web APIs
recommendation document object
model (dom) level 2 html specificationthe definition of 'focus' in that specification.
... obsolete document object
model (dom) level 1 specificationthe definition of 'focus' in that specification.
HTMLSelectElement.add() - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlselectelement.add()' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlselectelement.add()' in that specification.
HTMLSelectElement.remove() - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlselectelement.remove()' in that specification.
... obsolete document object
model (dom) level 1 specificationthe definition of 'htmlselectelement.remove()' in that specification.
HTMLSelectElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlselectelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlselectelement' in that specification.
HTMLStyleElement.media - Web APIs
recommendation document object
model (dom) level 2 html specificationthe definition of 'htmlstyleelement' in that specification.
... obsolete document object
model (dom) level 1 specificationthe definition of 'htmlstyleelement' in that specification.
HTMLStyleElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmlstyleelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmlstyleelement' in that specification.
HTMLTableCellElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmltablecellelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltablecellelement' in that specification.
HTMLTableColElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmltablecolelement' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'htmltablecolelement' in that specification.
HTMLTableElement.caption - Web APIs
recommendation no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specificationthe definition of 'htmltableelement.caption' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'htmltableelement.caption' in that specification.
HTMLTableElement.insertRow() - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'htmltableelement.insertrow()' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltableelement.insertrow()' in that specification.
HTMLTableElement.tFoot - Web APIs
recommendation no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specificationthe definition of 'htmltableelement.tfoot' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'htmltableelement.tfoot' in that specification.
HTMLTableElement.tHead - Web APIs
recommendation no change from document object
model (dom) level 2 html specification document object
model (dom) level 2 html specificationthe definition of 'htmltableelement.thead' in that specification.
... obsolete no change from document object
model (dom) level 1 specification document object
model (dom) level 1 specificationthe definition of 'htmltableelement.thead' in that specification.
HTMLTableElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmltableelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltableelement' in that specification.
HTMLTableRowElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmltablerowelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltablerowelement' in that specification.
HTMLTableSectionElement - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'htmltablesectionelement' in that specification.
... document object
model (dom) level 1 specificationthe definition of 'htmltablesectionelement' in that specification.
HTML Drag and Drop API - Web APIs
drag events html drag-and-drop uses the dom event
model and drag events inherited from mouse events.
... gecko-specific interfaces mozilla and firefox support some features not in the standard drag-and-drop
model.
Ajax navigation example - Web APIs
msg); break; case 5: /* server error 5xx */ alert("server error #" + vmsg); break; default: /* unknown status */ ajaxerror(); } } closereq(); } function filterurl (surl, sview
mode) { return surl.replace(rsearch, "") + ("?" + surl.replace(rhost, "&").replace(rview, sview
mode ?
... "&" + sviewkey + "=" + sview
mode : "").slice(1)).replace(rendqstmark, ""); } function getpage (spage) { if (bisloading) { return; } oreq = new xmlhttprequest(); bisloading = true; oreq.onload = ajaxload; oreq.onerror = ajaxerror; if (spage) { opageinfo.url = filterurl(spage, null); } oreq.open("get", filterurl(opageinfo.url, "json"), true); oreq.send(); oloadingbox.parentnode || document.body.appendchild(oloadingbox); } function requestpage (surl) { if (history.pushstate) { bupdateurl = true; getpage(surl); } else { /* ajax navigation is not supported */ location.assign(surl); } } function processlink () { if (this.c...
IDBCursorSync - Web APIs
not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read
mode, or if an index record cannot be changed because the underlying index is auto-populated.
... remove() deletes the record at the cursor's position, without changing the cursor's position void delete ( ) raises (databaseexception); exceptions this method can raise an idbdatabaseexception with the following code: not_allowed_err if the underlying index or object store does not support updating the record because it is open in the read_only or snapshot_read
mode.
IDBObjectStore.createIndex() - Web APIs
note that this method must be called only from a versionchange transaction
mode callback.
... invalidstateerror occurs if either: the method was not called from a versionchange transaction
mode callback, i.e.
IDBObjectStore.deleteIndex() - Web APIs
note that this method must be called only from a versionchange transaction
mode callback.
... 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.
IDBObjectStore.put() - Web APIs
this is for adding new records, or updating existing records in an object store when the transaction's
mode is readwrite.
... 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.
IDBRequest.transaction - Web APIs
if a version upgrade is needed when opening a database then during the upgradeneeded event handler the transaction property will be an idbtransaction with
mode equal to "versionchange", and can be used to access existing object stores and indexes, or abort the the upgrade.
... openrequest.onupgradeneeded = function(event) { console.log(openrequest.transaction.
mode); // will log "versionchange".
KeyboardEvent.initKeyEvent() - Web APIs
this method is based on early drafts of document object
model (dom) level 2 events specification and is implemented in gecko-based browsers; other browsers implemented keyboardevent.initkeyboardevent based on early drafts of document object
model (dom) level 3 events specification.
... favor the
modern constructor structure as the only cross-browser way of building events.
LinkStyle - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'linkstyle' in that specification.
... working draft linkstyle.sheet returns more specialized cssstylesheet instead of stylesheet document object
model (dom) level 2 style specificationthe definition of 'linkstyle' in that specification.
MediaStreamTrack.getConstraints() - Web APIs
example this example obtains the current constraints for a track, sets the facing
mode, and applies the updated constraints.
... function switchcameras(track, camera) { const constraints = track.getconstraints(); constraints.facing
mode = camera; track.applyconstraints(constraints); } specifications specification status comment media capture and streamsthe definition of 'getconstraints()' in that specification.
MediaTrackSupportedConstraints - Web APIs
facing
mode a boolean value whose value is true if the facing
mode constraint is supported in the current environment.
... resize
mode a boolean value whose value is true if the resize
mode constraint is supported in the current environment.
MouseEvent() - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent' in that specification.
... document object
model (dom) level 3 events specificationthe definition of 'mouseevent()' in that specification.
Navigator - Web APIs
in
modern browsers this property now returns a fixed timestamp as a privacy measure, e.g.
... navigator.standalone returns a boolean indicating whether the browser is running in standalone
mode.
Node.cloneNode() - Web APIs
living standard document object
model (dom) level 3 core specificationthe definition of 'node.clonenode()' in that specification.
... obsolete document object
model (dom) level 2 core specificationthe definition of 'node.clonenode()' in that specification.
Node.localName - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.localname' in that specification.
... obsolete document object
model (dom) level 2 core specificationthe definition of 'node.localname' in that specification.
Node.nextSibling - Web APIs
living standard no change document object
model (dom) level 2 core specificationthe definition of 'node.nextsibling' in that specification.
... obsolete no change document object
model (dom) level 1 specificationthe definition of 'node.nextsibling' in that specification.
Node.prefix - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.prefix' in that specification.
... document object
model (dom) level 2 core specificationthe definition of 'initial definition' in that specification.
NodeIterator.filter - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification.
... document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.filter' in that specification.
NodeIterator.root - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification.
... document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.root' in that specification.
NodeIterator.whatToShow - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification.
... document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.whattoshow' in that specification.
Using the Notifications API - Web APIs
most
modern browsers dismiss notifications automatically after a few moments (around four seconds) but this isn't something you should generally be concerned about as it's up to the user and user agent.
... n.close(); } }); note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay (on
modern browsers) since this method will also remove the notification from any notification tray, preventing users from interacting with it after it was initially shown.
PannerNode.maxDistance - Web APIs
this value is used only by the linear distance
model.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
PannerNode.rolloffFactor - Web APIs
this value is used by all distance
models.the rollofffactor property's default value is 1.
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.rollofffactor = 1; value a number whose range depends on the distance
model of the panner as follows (negative values are not allowed): "linear" the range is 0 to 1.
PhotoCapabilities - Web APIs
photocapabilities.filllight
mode read only returns an array of available fill light options.
... samsung internet android full support 7.0filllight
mode experimentalchrome full support 59edge full support ≤79firefox ?
Multi-touch interaction - Web APIs
having a single event
model for pointers can simplify creating web sites, applications and provide a good user experience regardless of the user's hardware.
...this additional feature can be used to provide richer user interaction
models but at the cost of additional complexity in the multi-touch interaction handling.
RTCDtlsTransport - Web APIs
the number of dtls transports created and how they're used depends on the bundling
mode used when creating the rtcpeerconnection.
...if the connection was created using max-compat
mode, each transport is responsible for handling all of the communications for a given type of media (audio, video, or data channel).
RTCPeerConnection.createDataChannel() - Web APIs
maxpacketlifetime optional the maximum number of milliseconds that attempts to transfer a message may take in unreliable
mode.
... maxretransmits optional the maximum number of times the user agent should attempt to retransmit a message which fails the first time in unreliable
mode.
Range - Web APIs
css object
model (cssom) view modulethe definition of 'extensions to range' in that specification.
... document object
model (dom) level 2 traversal and range specificationthe definition of 'range' in that specification.
Request - Web APIs
properties request.cache read only contains the cache
mode of the request (e.g., default, reload, no-cache).
... request.method read only contains the request's method (get, post, etc.) request.
mode read only contains the
mode of the request (e.g., cors, no-cors, same-origin, navigate.) request.redirect read only contains the
mode for how redirects are handled.
Resource Timing API - Web APIs
for a graphical representation of the resource timing processing
model see the resource timing phases figure.
...the first property in the processing
model is starttime which returns the timestamp immediately before the resource loading process begins.
Screen Wake Lock API - Web APIs
modern devices do this to save on battery power.
...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.
Using Service Workers - Web APIs
in firefox, service worker apis are hidden and cannot be used when the user is in private browsing
mode.
...in the future they will have throttling/offline
modes to simulate bad or non-existent connections, which will be a really good thing.
Service Worker API - Web APIs
in firefox, service worker apis are also hidden and cannot be used when the user is in private browsing
mode.
...note that this interface is deprecated in
modern browsers.
ShadowRoot - Web APIs
you can retrieve a reference to an element's shadow root using its element.shadowroot property, provided it was created using element.attachshadow() with the
mode option set to open.
... shadowroot.
mode read only the
mode of the shadowroot — either open or closed.
Storage.setItem() - Web APIs
particularly, in mobile safari (since ios 5) it always throws when the user enters private
mode.
... (safari sets the quota to 0 bytes in private
mode, unlike other browsers, which allow storage in private
mode using separate data containers.) hence developers should make sure to always catch possible exceptions from setitem().
Using readable streams - Web APIs
consuming a fetch as a stream the fetch api allows you to fetch resources across the network, providing a
modern alternative to xhr.
...the first object is required, and creates a
model in javascript of the underlying source the data is being read from.
Using Touch Events - Web APIs
that is, the abstract pointer creates a unified input
model that can represent a contact point for a finger, pen/stylus or mouse.
... the pointer event
model can simplify an application's input processing since a pointer represents input from any input device.
UIEvent.detail - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'uievent.detail' in that specification.
... obsolete document object
model (dom) level 2 events specificationthe definition of 'uievent.detail' in that specification.
UIEvent - Web APIs
ui events working draft extend dom3 document object
model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
... document object
model (dom) level 2 events specificationthe definition of 'uievent' in that specification.
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
syntax void gl.drawelementsinstanced(
mode, count, type, offset, instancecount); parameters
mode a glenum specifying the type primitive to render.
... exceptions if
mode is not one of the accepted values, a gl.invalid_enum error is thrown.
WebGL2RenderingContext.drawRangeElements() - Web APIs
syntax void gl.drawrangeelements(
mode, start, end, count, type, offset); parameters
mode a glenum specifying the type primitive to render.
... exceptions if
mode is not one of the accepted values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.blendEquation() - Web APIs
syntax void gl.blendequation(
mode); parameters
mode a glenum specifying how source and destination colors are combined.
... default value: gl.func_add exception if
mode is not one of the three possible values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.drawArrays() - Web APIs
syntax void gl.drawarrays(
mode, first, count); parameters
mode a glenum specifying the type primitive to render.
... exceptions if
mode is not one of the accepted values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.drawElements() - Web APIs
syntax void gl.drawelements(
mode, count, type, offset); parameters
mode a glenum specifying the type primitive to render.
... exceptions if
mode is not one of the accepted values, a gl.invalid_enum error is thrown.
WebGLRenderingContext.hint() - Web APIs
syntax void gl.hint(target,
mode); parameters target sets which behavior to be controlled.
... when using a webgl 2 context, the following values are available additionally: gl.fragment_shader_derivative_hint: same as ext.fragment_shader_derivative_hint_oes
mode sets the behavior.
WebGLRenderingContext.pixelStorei() - Web APIs
the webglrenderingcontext.pixelstorei() method of the webgl api specifies the pixel storage
modes.
...0 0 to infinity opengl es 3.0 gl.unpack_skip_rows number of rows of pixel locations skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 gl.unpack_skip_images number of pixel images skipped before the first pixel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage
mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures with the webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d() methods.
WebGLRenderingContext - Web APIs
this can be used to start an application using standard 2d presentation, then transition to using a vr or ar
mode later.
... webglrenderingcontext.pixelstorei() specifies the pixel storage
modes webglrenderingcontext.polygonoffset() specifies the scale factors and units to calculate depth values.
WebGL best practices - Web APIs
in some cases, especially with simple
models or dense vertices, this looks good enough.
... the inversion of this is if a
model has more vertices than pixels in the rendered output.
A simple RTCDataChannel sample - Web APIs
the api is intentionally similar to the websocket api, so that the same programming
model can be used for each.
... <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" input
mode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
WebRTC API - Web APIs
the api is intentionally similar to the websocket api, so that the same programming
model can be used for each.
...itecture transports for rtcweb related supporting protocols interactive connectivity establishment (ice): a protocol for network address translator (nat) traversal for offer/answer protocol session traversal utilities for nat (stun) uri scheme for the session traversal utilities for nat (stun) protocol traversal using relays around nat (turn) uniform resource identifiers an offer/answer
model with session description protocol (sdp) session traversal utilities for nat (stun) extension for third party authorization webrtc statistics webrtc statistics api specifications specification status comment webrtc 1.0: real-time communication between browsers candidate recommendation the initial definition of the api of webrtc.
Using bounded reference spaces - Web APIs
there are many uses for bounded reference spaces, including projects such as virtual paint studios or 3d construction,
modeling, or sculpting systems; training simulations or lesson scenarios; dance or other performance-based games; or the preview of 3d objects in the real world using augmented reality.
...immersive-vr"), { requiredfeatures: ["local-floor"], optionalfeatures: ["bounded-floor"] }).then((session) => { xrsession = session; startsessionanimation(); }); } } this function, called when the user clicks on a button to start the xr experience, works as usual, exiting at once if a session is already in place, then requesting a new session using immersive-vr
mode.
WebXR performance guide - Web APIs
let normalmatrix = mat4.create(); let
modelviewmatrix = mat4.create(); let objectmatrix = mat4.
...const normalmatrix = mat4.create(); const
modelviewmatrix = mat4.create(); function drawscene(gl, view, programinfo, buffers, texture, deltatime) { ...
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
you can then apply controlpose's transform to the vertices in the object
model representing the controller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer.
...this commonly happens when your user interface provides a way to preview the scene inline within the context of a web page, with a button or other control to switch to immersive
mode.
Web Audio API - Web APIs
using a system based on a source-listener
model, it allows control of the panning
model and deals with distance-induced attenuation induced by a moving source (or moving listener).
...this example makes use of the following web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode.migrating from webkitaudiocontextin this article, we cover the differences in web audio api since it was first implemented in webkit and how to update your code to use the
modern web audio api.
WheelEvent.deltaX - Web APIs
the wheelevent.deltax read-only property is a double representing the horizontal scroll amount in the wheelevent.delta
mode unit.
... syntax var dx = event.deltax; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "delta
mode": 0}); console.log(syntheticevent.deltax); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'wheelevent.deltax' in that specification.
WheelEvent.deltaY - Web APIs
the wheelevent.deltay read-only property is a double representing the vertical scroll amount in the wheelevent.delta
mode unit.
... syntax var dy = event.deltay; example var syntheticevent = new wheelevent("syntheticwheel", {"deltay": 4, "delta
mode": 0}); console.log(syntheticevent.deltay); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'wheelevent.deltay' in that specification.
WheelEvent.deltaZ - Web APIs
the wheelevent.deltaz read-only property is a double representing the scroll amount along the z-axis, in the wheelevent.delta
mode unit.
... syntax var dz = event.deltaz; example var syntheticevent = new wheelevent("syntheticwheel", {"deltaz": 4, "delta
mode": 0}); console.log(syntheticevent.deltaz); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'wheelevent.deltaz' in that specification.
WheelEvent - Web APIs
wheelevent.delta
moderead only returns an unsigned long representing the unit of the delta* values' scroll amount.
... working draft document object
model (dom) level 3 events specificationthe definition of 'wheelevent' in that specification.
Window.getComputedStyle() - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'getcomputedstyle()' in that specification.
... working draft document object
model (dom) level 2 style specificationthe definition of 'getcomputedstyle()' in that specification.
Window: resize event - Web APIs
function reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the event handler using the addeventlistener() method: window.addeventlistener('resize', reportwindowsize); specifications specification status document object
model (dom) level 3 events specificationthe definition of 'resize' in that specification.
... obsolete css object
model (cssom) view modulethe definition of 'resize' in that specification.
Window.screenX - Web APIs
note: an alias of screenx was implemented across
modern browsers in more recent times — window.screenleft.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment css object
model (cssom) view modulethe definition of 'window.screenx' in that specification.
Window.screenY - Web APIs
note: an alias of screeny was implemented across
modern browsers in more recent times — window.screentop.
... if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment css object
model (cssom) view modulethe definition of 'window.screeny' in that specification.
Window.scrollX - Web APIs
this value is subpixel precise in
modern browsers, meaning that it isn't necessarily a whole number.
...window.pageyoffset : (document.documentelement || document.body.parentnode || document.body).scrolltop; specification specification status comment css object
model (cssom) view modulethe definition of 'window.scrollx' in that specification.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
timeouts throttled to ≥ 4ms in
modern browsers, settimeout()/setinterval() calls are throttled to a minimum of once every 4 ms when successive calls are triggered due to callback nesting (where the nesting level is at least a certain depth), or after certain number of successive intervals.
... to implement a 0 ms timeout in a
modern browser, you can use window.postmessage() as described here.
Using XMLHttpRequest - Web APIs
*/ however, more
modern techniques are available, since the responsetype attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.
... cross-site xmlhttprequest
modern browsers support cross-site requests by implementing the cross-origin resource sharing (cors) standard.
XMLHttpRequest.getAllResponseHeaders() - Web APIs
mple of what a raw header string looks like: date: fri, 08 dec 2017 21:04:30 gmt\r\n content-encoding: gzip\r\n x-content-type-options: nosniff\r\n server: meinheld/0.6.1\r\n x-frame-options: deny\r\n content-type: text/html; charset=utf-8\r\n connection: keep-alive\r\n strict-transport-security: max-age=63072000\r\n vary: cookie, accept-encoding\r\n content-length: 6502\r\n x-xss-protection: 1;
mode=block\r\n each line is terminated by both carriage return and line feed characters (\r\n).
... note: in
modern browsers, the header names are returned in all lower case, as per the latest spec.
XMLHttpRequest.responseType - Web APIs
exceptions invalidaccesserror an attempt was made to change the value of responsetype on anxmlhttprequest which is in synchronous
mode but not in a worker.
... xmlhttprequests are asynchronous by default; they are only placed in synchronous
mode by passing false as the value of the optional async parameter when calling open().
XRInputSource - Web APIs
targetray
moderead only a domstring indicating the methodology used to produce the target ray: gaze, tracked-pointer, or screen.
...this space is established using the method defined by targetray
mode.
XRInputSourceEvent.inputSource - Web APIs
the device type is identified by looking at the xrinputsource in inputsource and its targetray
mode property.
... xrsession.onselect = event => { let source = event.inputsource; if (source.targetray
mode == "gaze") { /* handle selection using a gaze input */ } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.inputsource' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
it looks for new and removed devices whose targetray
mode is tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetray
mode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetray
mode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
it looks for new and removed devices whose targetray
mode is tracked-pointer.
... xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetray
mode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetray
mode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRInputSourcesChangeEvent - Web APIs
examples the following example shows how to set up an event handler which uses inputsourceschange events to detect newly-available pointing devices and to load their
models in preparation to display them in the next animation frame.
... xrsession.addeventlistener("inputsourceschange", oninputsourceschange); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetray
mode == "tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specifications specification status comment webxr device apithe definition of 'xrinputsourceschangeevent' in that specification.
XRPermissionDescriptor.optionalFeatures - Web APIs
syntax xrpermissiondescriptor = {
mode: xrsession
mode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.optionalfeatures = optfeaturelist; optfeaturelist = xrpermissiondescriptor.optionalfeatures; value an array of strings taken from the xrreferencespacetype enumerated type, indicating set of features that your app would like to use, but can operate without if permission to use them isn't available.
... xrreferencespace usage notes examples let xrpermissiondesc = { name: "xr",
mode: "immersive-vr", optionalfeatures: [ "bounded-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(e...
XRPermissionDescriptor - Web APIs
mode an xrsession
mode value indicating the xr
mode (inline, immersive-vr, or immersive-ar) for which the permissions are requested.
... let xrpermissiondesc = { name: "xr",
mode: "immersive-vr", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err...
XRPose.emulatedPosition - Web APIs
if its position is computed as an offset from another object (such as by basing it off the
model representing the user's body), then this value is true.
...this is because emulating a position based on accelerometer inputs and
models tends to introduce minor errors which accumulate over time.
XRSession: select event - Web APIs
xrsession.addeventlistener("select", event => { if (event.inputsource.targetray
mode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the even...
...t: xrsession.onselect = event => { if (event.inputsource.targetray
mode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'select event' in that specification.
XRSession: squeeze event - Web APIs
xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetray
mode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the e...
...vent: xrsession.onsqueeze = event => { if (event.inputsource.targetray
mode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.
XRSystem: devicechange event - Web APIs
you can use this event to, for example, monitor for the availability of a webxr-compatible device so that you can enable a ui element which the user can use to activate immersive
mode.
...if there is, the button to enter xr
mode is enabled; otherwise it's disabled.
msthumbnailclick - Web APIs
example function thumbnailclickhandler(evt) { alert ("clicked button: " + evt.buttonid); } document.addeventlistener('msthumbnailclick', thumbnailclickhandler); example 2 // adds an overlay icon on your app pinned to the taskbar window.external.mssite
modeseticonoverlay(iconuri, tooltip); // removes an overlay icon window.external.mssite
modecleariconoverlay(); // pinned icons on your taskbar can be instructed to trigger specific events on your site from the taskbar // add an event handlerdocument.addeventlistener('msthumbnailclick', onbuttonclicked, false); // add the buttons var btnplay = window.external.mssite
modeaddthumbbarbutton(iconuri, too...
...ltip); // refresh the taskbar window.external.mssite
modeshowthumbbar(); // call a javascript function when the button is pressed function onbuttonclicked(e) { switch (e.buttonid) { case btnplay: play(); break;} } see also microsoft api extensions ...
Using the aria-activedescendant attribute - Accessibility
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.
...this active child using the aria-activedescendant property must always be visible on screen and must be a descendant of the container in the document object
model.
ARIA: listbox role - Accessibility
multiple selection: authors may implement either of two interaction
models to support multiple selection: a recommended
model that does not require the user to hold a modifier key, such as shift or control, while navigating the list or an alternative
model that does require modifier keys to be held while navigating in order to avoid losing selection states.
... recommended selection
model -- holding modifier keys is not necessary: space: changes the selection state of the focused option .
WAI-ARIA Roles - Accessibility
dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).aria: document rolegenerally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading
mode: the document role tells assistive technologies with reading or browse
modes to use the document
mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls.
... a feed enables screen readers to use the browse
mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.aria: figure rolethe aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
screen magnifiers will zoom to the focus, keeping it on the screen at all times, or even allow the user to enter a special low vision document reading
mode, with a variety of features such as ticker
mode where text is streamed on a single line.
...this can provide assistive technology with contextual information specific to your object
model.
-moz-orient - CSS: Cascading Style Sheets
values inline the element is rendered in the same direction as the axis of the text: horizontally for horizontal writing
modes, vertically for vertical writing
modes.
... block the element is rendered orthogonally to the axis of the text: vertically for horizontal writing
modes, horizontal for vertical writing
modes.
size - CSS: Cascading Style Sheets
landscape the content of the page is displayed in landscape
mode (i.e.
... portrait the content of the page is displayed in portrait
mode (i.e.
@viewport - CSS: Cascading Style Sheets
this is typically based on the size of the window on desktop browsers that aren't in full screen
mode.
... on mobile devices (or desktop devices that are in full screen
mode), the initial viewport is usually the portion of a device's screen that is available for application use.
Ordering Flex Items - CSS: Cascading Style Sheets
remember that the start line relates to writing
modes.
...this allows authors to manipulate the visual presentation while leaving the source order intact for non-css uas and for linear
models such as speech and sequential navigation.” - ordering and orientation if your items were links or some other element that the user could tab to, then the tabbing order would be the order that these items appear in the document source — not your visual order.
CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box
model optimized for user interface design, and the layout of items in one dimension.
... in the flex layout
model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.
Consistent list indentation - CSS: Cascading Style Sheets
according to the css box
model, the list items' boxes must be displayed within the parent element's content area.
...if you want to reproduce the default display in netscape 6.x, you write: ul {margin-left: 0; padding-left: 40px;} if you're more interested in following the internet explorer/opera
model, then: ul {margin-left: 40px; padding-left: 0;} of course, you can fill in your own preferred values.
Basic Shapes - CSS: Cascading Style Sheets
you can see in the screenshot that the shape is being defined with reference to that part of the box
model.
... .shape { shape-outside: circle(50%) margin-box; } you can therefore change this in order that your shape uses the different parts of the box
model, for example to use the border.
Mozilla CSS extensions - CSS: Cascading Style Sheets
a -moz-animation [prefixed version still accepted] -moz-animation-delay [prefixed version still accepted] -moz-animation-direction [prefixed version still accepted] -moz-animation-duration [prefixed version still accepted] -moz-animation-fill-
mode [prefixed version still accepted] -moz-animation-iteration-count [prefixed version still accepted] -moz-animation-name [prefixed version still accepted] -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-c...
...62 -moz-inline-stackobsolete since gecko 62 -moz-inline-table -moz-gridobsolete since gecko 62 -moz-grid-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks
mode) font -moz-button -moz-info -moz-desktop -moz-dialog (also a color) -moz-document -moz-workspace -moz-window -moz-list -moz-pull-down-menu -moz-field (also a color) font-family -moz-fixed image-rendering -moz-crisp-edges <length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-devanagari ...
Shorthand properties - CSS: Cascading Style Sheets
its purpose is to change the properties' inheritance
model to one of: css provides four special universal property values for controlling inheritance.
... see also css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout
modes and visual formatting
models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
align-items - CSS: Cascading Style Sheets
x items from the end */ /* baseline alignment */ align-items: baseline; align-items: first baseline; align-items: last baseline; /* overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* global values */ align-items: inherit; align-items: initial; align-items: unset; values normal the effect of this keyword is dependent of the layout
mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
...if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment
mode were start.
border-collapse - CSS: Cascading Style Sheets
values collapse adjacent cells have shared borders (the collapsed-border table rendering
model).
... separate adjacent cells have distinct borders (the separated-border table rendering
model).
<display-internal> - CSS: Cascading Style Sheets
some layout
models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill.
... this page defines those "internal" display values, which only have meaning within that particular layout
mode.
inset - CSS: Cascading Style Sheets
the inset css property, though part of the logical specification, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing
mode, directionality, and text orientation.
...same as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-
mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
this property is especially helpful when used in conjunction with mix-blend-
mode.
...| isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-
mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in that specification.
margin - CSS: Cascading Style Sheets
* bottom: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally centered */ notes horizontal centering to center something horizontally in
modern browsers, you can use display: flex; justify-content: center; .
... specifications specification status comment css basic box
modelthe definition of 'margin' in that specification.
padding - CSS: Cascading Style Sheets
nd:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has
moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* t...
...and right: 3% padding */ /* bottom: 20px padding */ padding: 1em 3px 30px 5px; /* top: 1em padding */ /* right: 3px padding */ /* bottom: 30px padding */ /* left: 5px padding */ specifications specification status comment css basic box
modelthe definition of 'padding' in that specification.
place-self - CSS: Cascading Style Sheets
normal the effect of this keyword is dependent of the layout
mode we are in: in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
...its behavior depends on the layout
model, as described for justify-self.
resize - CSS: Cascading Style Sheets
block the element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-
mode and direction value).
... inline the element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-
mode and direction value).
shape-outside - CSS: Cascading Style Sheets
<shape-box> the float area is computed according to the shape of a float element's edges (as defined by the css box
model).
...when fetching, user agents must use "anonymous"
mode, set the referrer source to the stylesheet's url, and set the origin to the url of the containing document.
text-orientation - CSS: Cascading Style Sheets
it only affects text in vertical
mode (when writing-
mode is not horizontal-tb).
... formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-
mode: vertical-rl; text-orientation: upright; } result specifications specification status comment css writing
modes module level 3the definition of 'text-orientation' in that specification.
transform - CSS: Cascading Style Sheets
it modifies the coordinate space of the css visual formatting
model.
...that is, all elements whose layout is governed by the css box
model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
CSS: Cascading Style Sheets
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings,
modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
... css key concepts: the syntax and forms of the language specificity, inheritance and the cascade css units and values box
model and margin collapse the containing block stacking and block-formatting contexts initial, computed, used, and actual values css shorthand properties css flexible box layout css grid layout media queries animation cookbook the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites.
Ajax - Developer guides
when these technologies are combined in the ajax
model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page.
...both json and xml are used for packaging information in the ajax
model.
Setting up adaptive streaming media sources - Developer guides
this article explains how, looking at two of the most common formats: mpeg-dash and hls (http live streaming.) choosing formats in terms of adaptive streaming formats, there are many to choose from; we decided to choose the following two as between them we can support most
modern browsers.
...#extinf:10, http://media.example.com/segment0.ts # new-style floating-point duration; use for
modern clients.
Event developer guide - Developer guides
the overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by
modern web browsers.
...unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by
modern web browsers.
Introduction to HTML5 - Developer guides
to indicate that your html content uses html5, simply use: <!doctype html> doing so will cause even browsers that don't presently support html5 to enter into standards
mode, which means that they'll interpret the long-established parts of html in an html5-compliant way while ignoring the new features of html5 they don't support.
...while it is true that all
modern browsers now use these html5 parsing rules, non-html5-compliant browsers are still used by some.
Localizations and character encodings - Developer guides
specifying the heuristic detection
mode the heuristic detection
mode is specified by the preference intl.charset.detector in intl.properties.
... exception for minority languages if the localization is for minority language and the users are typically literate in the majority language of the region and read web content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection
mode to be the same as for the localization for the majority language of the region.
<input type="datetime-local"> - HTML: Hypertext Markup Language
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.
... handling browser support as mentioned above, the major problem with using date inputs at the time of writing is browser support — only chrome/opera and edge support it on desktop, and most
modern browsers on mobile.
<input type="month"> - HTML: Hypertext Markup Language
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.
... handling browser support as mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only chrome/opera and edge support it on desktop, and most
modern browsers on mobile.
<main> - HTML: Hypertext Markup Language
<body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <main id="main-content"> <!-- main page content --> </main> </body> webaim: "skip navigation" links reader
mode browser reader
mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.
... building websites for safari reader
mode and other reading apps.
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
most
modern browsers implement this by surrounding the text in quotation marks.
... implicit aria role no corresponding role permitted aria roles any dom interface htmlquoteelement usage note: most
modern browsers will automatically add quotation marks around text inside a <q> element.
<video>: The Video Embed element - HTML: Hypertext Markup Language
autopictureinpicture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture
mode when the user switches back and forth between this document and another document or application.
... use the disablepictureinpicture attribute if you want to disable the picture-in-picture
mode (and the control).
Global attributes - HTML: Hypertext Markup Language
input
mode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
... used primarily on <input> elements, but is usable on any element while in contenteditable
mode.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
because of various reasons, these have to be fetched using anonymous
mode cors (see font fetching requirements).
...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 interactive 3d
model if the user's resources are more plentiful.
Using HTTP cookies - HTTP
while this was legitimate when they were the only way to store data on the client, it is now recommended to use
modern storage apis.
...
modern apis for client storage are the web storage api (localstorage and sessionstorage) and indexeddb.
Feature-Policy: fullscreen - HTTP
by default, top-level documents and their same-origin child frames can request and enter fullscreen
mode.
... this directive allows or prevents cross-origin frames from using fullscreen
mode.
Feature-Policy - HTTP
picture-in-picture controls whether the current document is allowed to play a video in a picture-in-picture
mode via the corresponding api.
... wake-lock controls whether the current document is allowed to use wake lock api to indicate that device should not enter power-saving
mode.
Index - HTTP
7 access-control-allow-credentials cors, http, reference, header the access-control-allow-credentials response header tells browsers whether to expose the response to frontend javascript code when the request's credentials
mode (request.credentials) is "include".
...although these protections are largely unnecessary in
modern browsers when sites implement a strong content-security-policy that disables the use of inline javascript ('unsafe-inline'), they can still provide protections for users of older web browsers that don't yet support csp.
Save-Data - HTTP
a value of on indicates explicit user opt-in into a reduced data usage
mode on the client, and when communicated to origins allows them to deliver alternative content to reduce the data downloaded such as smaller image and video resources, different markup and styling, disabled polling and automatic updates, and so on.
... syntax save-data: <sd-token> directives <sd-token> a numerical value indicating whether the client wants to opt in to reduced data usage
mode.
HTTP headers - HTTP
sec-fetch-
mode it is a request header that indicates the request's
mode to a server.
... x-ua-compatible used by internet explorer to signal which document
mode to use.
HTTP resources and specifications - HTTP
x-frame-options informational rfc 6797 http strict transport security (hsts) proposed standard upgrade insecure requests upgrade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft document specifying legacy document
modes* defines x-ua-compatible note rfc 5689 http extensions for web distributed authoring and versioning (webdav) these extensions of the web, as well as carddav and caldav, are out-of-scope for http on the web.
...
modern apis for application are defines using the restful pattern nowadays.
CSS Houdini
houdini is a group of apis that give developers direct access to the css object
model (cssom), enabling developers to write code the browser can parse as css, thereby creating new css features without waiting for them to be implemented natively in browsers.
... houdini's css typed om is a css object
model with types and methods, exposing values as javascript objects making for more intuitive css manipulation than previous string based htmlelement.style manipulations.
Equality comparisons and sameness - JavaScript
a
model for understanding equality comparisons?
...which one is the better
model for understanding depends on how you choose to view things.) however, this way of thinking about the built-in sameness operators is not a
model that can be stretched to allow a place for es2015's object.is on this "spectrum".
Expressions and operators - JavaScript
note that for the second case, in
modern code you can use the new nullish coalescing operator (??) that works like ||, but it only returns the second expression, when the first one is "nullish", i.e.
...ees; // returns false 'bay' in trees; // returns false (you must specify the index number, // not the value at that index) 'length' in trees; // returns true (length is an array property) // built-in objects 'pi' in math; // returns true var mystring = new string('coral'); 'length' in mystring; // returns true // custom objects var mycar = { make: 'honda',
model: 'accord', year: 1998 }; 'make' in mycar; // returns true '
model' in mycar; // returns true instanceof the instanceof operator returns true if the specified object is of the specified object type.
Meta programming - JavaScript
in strict
mode, a false value returned from the defineproperty handler will throw a typeerror exception.
... in strict
mode, a false return value from the set handler will throw a typeerror exception.
JavaScript modules - JavaScript
the good news is that
modern browsers have started to support module functionality natively, and this is what this article is all about.
...this is because modules use strict
mode automatically.
Numbers and dates - JavaScript
decimal numbers 1234567890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // parsed as octal in non-strict
mode (511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal digit, but if every digit after the leading 0 is smaller than 8, the number gets parsed as an octal number.
... var n = 0755; // 493 var m = 0644; // 420 strict
mode in ecmascript 5 forbids octal syntax.
TypeError: "x" is not a constructor - JavaScript
you want this type of object to be called car, and you want it to have properties for make,
model, and year.
... to do this, you would write the following function: function car(make,
model, year) { this.make = make; this.
model =
model; this.year = year; } now you can create an object called mycar as follows: var mycar = new car('eagle', 'talon tsi', 1993); in promises when returning an immediately-resolved or immediately-rejected promise, you do not need to create a new promise(...) and act on it.
SyntaxError: "x" is a reserved identifier - JavaScript
these are reserved in strict
mode and sloppy
mode: enum the following are only reserved when they are found in strict
mode code: implements interface let package private protected public static examples strict and non-strict reserved keywords the enum identifier is generally reserved.
... var enum = { red: 0, green: 1, blue: 2 }; // syntaxerror: enum is a reserved identifier in strict
mode code, more identifiers are reserved.
SyntaxError: "use strict" not allowed in function with non-simple parameters - JavaScript
message edge: cannot apply strict
mode on functions with non-simple parameter list firefox: syntaxerror: "use strict" not allowed in function with default parameter syntaxerror: "use strict" not allowed in function with rest parameter syntaxerror: "use strict" not allowed in function with destructuring parameter chrome: syntaxerror: illegal 'use strict' directive in function with non-simple parameter list error type syntaxerror.
... examples function statement in this case, the function sum has default parameters a=1 and b=2: function sum(a = 1, b = 2) { // syntaxerror: "use strict" not allowed in function with default parameter 'use strict'; return a + b; } if the function should be in strict
mode, and the entire script or enclosing function is also okay to be in strict
mode, you can move the "use strict" directive outside of the function: 'use strict'; function sum(a = 1, b = 2) { return a + b; } function expression a function expression can use yet another workaround: var sum = function sum([a, b]) { // syntaxerror: "use strict" not allowed in function with destructuring paramet...
arguments.callee - JavaScript
warning: the 5th edition of ecmascript (es5) forbids use of arguments.callee() in strict
mode.
... why was arguments.callee removed from es5 strict
mode?
Function.prototype.call() - JavaScript
if the method is a function in non-strict
mode, null and undefined will be replaced with the global object, and primitive values will be converted to objects.
... var sdata = 'wisen'; function display() { console.log('sdata value is %s ', this.sdata); } display.call(); // sdata value is wisen caution: in strict
mode, the value of this will be undefined.
JSON.stringify() - JavaScript
example replacer, as a function function replacer(key, value) { // filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'mozilla',
model: 'box', week: 45, transport: 'car', month: 7}; json.stringify(foo, replacer); // '{"week":45,"month":7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting json string.
...' console.log(a !== b) // true // some memoization functions use json.stringify to serialize arguments, // which may cause a cache miss when encountering the same object like above example of using json.stringify() with localstorage in a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a
model for the applicability of json.stringify(): // creating an example of json var session = { 'screens': [], 'state': true }; session.screens.push({ 'name': 'screena', 'width': 450, 'height': 250 }); session.screens.push({ 'name': 'screenb', 'width': 650, 'height': 350 }); session.screens.push({ 'name': 'screenc', 'width': 750, 'height': 120 }); session.screens.push({ 'name': 'screend', 'width'...
Object.preventExtensions() - JavaScript
attempting to add new properties to a non-extensible object will fail, either silently or by throwing a typeerror (most commonly, but not exclusively, when in strict
mode).
...var nonextensible = { removable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 8675309 }); // throws a typeerror // in strict
mode, attempting to add new properties // to a non-extensible object throws a typeerror.
Object.prototype.__proto__ - JavaScript
warning: changing the [[prototype]] of an object is, by the nature of how
modern javascript engines optimize property accesses, a very slow operation, in every browser and javascript engine.
...it was never originally included in the ecmascript language spec, but
modern browsers implemented it anyway.
Object.seal() - JavaScript
attempting to delete or add properties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a typeerror (most commonly, although not exclusively, when in strict
mode code).
...obj.quaxxor = 'the friendly duck'; // silently doesn't add the property delete obj.foo; // silently doesn't delete the property // ...and in strict
mode such attempts // will throw typeerrors.
handler.set() - JavaScript
if the set() method returns false, and the assignment happened in strict-
mode code, a typeerror will be thrown.
... in strict
mode, a false return value from the set() handler will throw a typeerror exception.
eval() - JavaScript
eval() is also slower than the alternatives, since it has to invoke the javascript interpreter, while many other constructs are optimized by
modern js engines.
... additionally,
modern javascript interpreters convert javascript to machine code.
Object initializer - JavaScript
let a = {x: 1, x: 2} console.log(a) // {x: 2} in ecmascript 5 strict
mode code, duplicate property names were considered a syntaxerror.
... function havees2015duplicatepropertysemantics() { 'use strict'; try { ({prop: 1, prop: 2}); // no error thrown, duplicate property names allowed in strict
mode return true; } catch(e) { // error thrown, duplicates prohibited in strict
mode return false; } } method definitions a property of an object can also refer to a function or a getter or setter method.
label - JavaScript
in strict
mode code, you can't use "let" as a label name.
... l: function f() {} in strict
mode code, however, this will throw a syntaxerror: 'use strict'; l: function f() {} // syntaxerror: functions cannot be labelled generator functions can neither be labeled in strict code, nor in non-strict code: l: function* f() {} // syntaxerror: generator functions cannot be labelled specifications specification ecmascript (ecma-262)the definition of 'labelled statement' in t...
Authoring MathML - MathML
for example, here is a minimal stylesheet to use latin
modern for the text and latin
modern math for the mathematics: @namespace url('http://www.w3.org/1999/xhtml'); @namespace m url('http://www.w3.org/1998/math/mathml'); body, m|mtext { font-family: latin
modern; } m|math { font-family: latin
modern math; } you can then use the @font-face rule as usual to provide woff fallback for latin
modern and latin
modern math.
...ww.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xhtml+mathml example</title> </head> <body> <h1>xhtml+mathml example</h1> <p> square root of two: <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> mathml in email and instant messaging clients
modern mail clients may send and receive emails in the html5 format and thus can use mathml expressions.
Digital audio concepts - Web media technologies
whereas lossless compression algorithms usually manage no better than a 40-50% of the size of the original, uncompressed sound data,
modern lossy compression algorithms can reduce the size of the audio to between 5-20% of the original size, depending on the complexity of the audio.
... these parameters vary depending on the codec, but can include: specifying specific algorithms to use during particular phases of the encoding process parameters for those algorithms to use, such as how much predictive depth to use when trying to
model the audio the number of passes to make while analyzing the audio, or the number of times given algorithms should be run lossy encoder parameters most codecs have input values you can tune to optimize the compression in various ways, either for size or for quality.
Media container formats (file types) - Web media technologies
the format was designed for use on 3g mobile phones, but can still be used on more
modern phones and networks.
...refox safari adpcm (adaptive differential pulse code modulation) no gsm 06.10 no lpcm (linear pulse code modulation) yes mpeg-1 audio layer iii (mp3) no µ-law (u-law) no webm webm (web media) is a format based on matroska which is designed specifically for use in
modern web environments.
Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in
modern browsers that allows a user to "install" a web app, ie.
... to enable your app to be added to a home screen, it needs the following: to be served over https — the web is increasingly being moved in a more secure direction, and many
modern web technologies (a2hs included) will work only on secure contexts.
Progressive web apps (PWAs)
documentation <-- the temporary automatic list below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in
modern browsers that allows a user to "install" a web app, ie.
... the building blocks of responsive design — learn the basics of responsive design, an essential topic for
modern app layout.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
r marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-
mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: <length>|inherit; animatable: yes writing-
mode specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom.
direction - SVG: Scalable Vector Graphics
x="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing
modes module level 3the definition of 'direction' in that specification.
... candidate recommendation refers to the css writing
modes specification of the direction property.
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic"
mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin...
...--> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic"
mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
keySplines - SVG: Scalable Vector Graphics
this attribute is ignored unless the calc
mode attribute is set to spline.
... four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calc
mode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calc
mode="spline" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; ...
keyTimes - SVG: Scalable Vector Graphics
the keytimes list semantics depends upon the interpolation
mode: for linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1.
... if the calc
mode attribute is set to paced, the keytimes attribute is ignored.
unicode-bidi - SVG: Scalable Vector Graphics
specifications specification status comment css writing
modes module level 3the definition of 'unicode-bidi' in that specification.
... proposed recommendation svg 2 only refers to css writing
modes.
<feGaussianBlur> - SVG: Scalable Vector Graphics
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in stddeviation edge
mode dom interface this element implements the svgfegaussianblurelement interface.
... working draft added edge
mode attribute scalable vector graphics (svg) 1.1 (second edition)the definition of '<fegaussianblur>' in that specification.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-
mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented.
... various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-
mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171).
<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:template match=pattern name=name
mode=name priority=number> <xsl:param> [optional] template </xsl:template> required attributes none.
...
mode specifies a particular
mode for this template, which can be matched by an attribute of the <xsl:apply-templates> element.
Understanding WebAssembly text format - WebAssembly
that’s literally all that asm.js has to play with (except that it isn't resizable; see the asm.js programming
model).
... bulk memory operations bulk memory operations are a newer addition to the language (for example, in firefox 79) — seven new built-in operations are provided for bulk memory operations such as copying and initializing, to allow webassembly to
model native functions such as memcpy and memmove in a more efficient, performant way.
Using the WebAssembly JavaScript API - WebAssembly
memory in the low-level memory
model of webassembly, memory is represented as a contiguous range of untyped bytes called linear memory that are read and written by load and store instructions inside the module.
... in this memory
model, any load or store can access any byte in the entire linear memory, which is necessary to faithfully represent c/c++ concepts like pointers.
Content Scripts - Archive of obsolete content
lf = require("sdk/self"); tabs.on("ready", function(tab) { var worker = tab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); // content-script.js self.port.on("alert", function(message) { window.alert(message); }); the context-menu module doesn't use the communication
model described here.
Module structure of the SDK - Archive of obsolete content
so a if you import a module using require, you can't change the properties of the object returned: self = require("sdk/self"); // attempting to define a new property // will fail, or throw an exception in strict
mode self.foo = 1; // attempting to modify an existing property // will fail, or throw an exception in strict
mode self.data = "foo"; using modules from outside the add-on sdk you can use commonjs modules outside the add-on sdk, in any environment where you can use components.utils.import.
simple-storage - Archive of obsolete content
to read about how to opt into private browsing
mode and how to use the sdk to avoid storing user data associated with private windows, refer to the documentation for the private-browsing module.
core/promise - Archive of obsolete content
in the add-on sdk we follow commonjs promises/a specification and
model a promise as an object with a then method, which can be used to get the eventual return (fulfillment) value or thrown exception (rejection): foo().then(function success(value) { // ...
jpm - Archive of obsolete content
an alternative development
model is to use the extension auto-installer add-on: this listens for new xpi files on a specified port and installs them automatically.
LookupNamespaceURI - Archive of obsolete content
lookupnamespaceuri) { type.prototype.lookupnamespaceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceurialgo var i, att, html
mode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for defaul...
Rosetta - Archive of obsolete content
nevertheless, the increasing computational power of
modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
Code snippets - Archive of obsolete content
nevertheless, the increasing computational power of
modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
Enhanced Extension Installation - Archive of obsolete content
the
model looks something like this: nsextensionsdatasource.prototype = { _composite // the composite that manages the two // datasources at the install locations for // read-only information requests _profileextensions // the rdf/xml datasource for the items at the // profile install locatio...
Chapter 1: Introduction to Extensions - Archive of obsolete content
the add-ons manager handles the following tasks: safely installs and uninstalls add-ons makes sure add-ons are compatible with the version of firefox you're using manages a whitelist of sites trusted for installing add-ons helps troubleshoot add-ons by disabling them and offering a safe
mode confirms and runs updates provides access to add-ons' settings dialogs provides access to add-ons' support sites development environment amenities initially, there wasn't adequate documentation available, and extension developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge.
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
listing 3: an example of a class definition in javascript function myclass() { } myclass.prototype = { property1 : true, property2 : 'string', method : function() { alert('hello, world!'); } }; var obj = new myclass(); obj.method(); dom: an api for manipulating xml documents the document object
model (dom) is a technical standard promulgated by the w3c, and is an api for manipulating the contents of xml documents as objects.
Introduction - Archive of obsolete content
while most of it should still work for creating extensions in firefox 3 (and even firefox 2), it is strongly recommended that you aim to support
modern firefox versions, to encourage users to stay up to date with security fixes.
XUL School Tutorial - Archive of obsolete content
javascript object management basic functionality adding menus and submenus adding toolbars and toolbar buttons adding events and commands adding windows and dialogs adding sidebars user notifications and alerts intermediate functionality intercepting page loads connecting to remote content handling preferences local storage advanced topics the box
model xpcom objects observer notifications custom xul elements with xbl mozilla documentation roadmap useful mozilla community sites appendices appendix a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and html insertion appendix f: monitoring dom changes ...
Promises - Archive of obsolete content
for use cases which are not easily served by other options, or for legacy code which cannot easily be upgraded to non-relational
models, the sqlite.jsm module provides a clean, promise-based interface to sqlite databases.
sort - Archive of obsolete content
the sort event was part of the table sorting algorithm in the table sorting
model, a feature of the html 5 working draft added in december 2012 and removed in january 2016.
Install.js - Archive of obsolete content
['classic', '
modern'] extpostinstallmessage: null, // set to null for no post-install message // --- editable items end --- profileinstall: true, silentinstall: false, install: function() { var jarname = this.extshortname + '.jar'; var profiledir = install.getfolder('profile', 'chrome'); // parse http arguments this.parsearguments(); // check if extension is already installed in profile ...
List of Former Mozilla-Based Applications - Archive of obsolete content
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 flock switched from being firefox-based to chromium-based when it released a new beta on ...
List of Mozilla-Based Applications - Archive of obsolete content
uox3 ultima online server-emulator uses mozilla spidermonkey verbosio xml editor no releases available verseminder bible passage app virgin media security security tools seems to use xulrunner virtualbox virtualization tool use xpcom as its component
model on linux waterfox 64-bit variant of firefox based on firefox webissimo web browser based on xulrunner websecurify web application security testing environment wesabe money management tool automatic uploader is a xulrunner application that runs headless in xvfb wikipediaondvd and wikimedia by moulin offline versions of wikip...
Adding the structure - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon"
mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal statu...
Making it into a static overlay - Archive of obsolete content
<statusbar id="status-bar" class="chromeclass-status" ondragdrop="nsdraganddrop.drop(event, contentareadndobserver);"> <statusbarpanel id="component-bar"/> <statusbarpanel id="statusbar-display" label="&statustext.label;" flex="1"/> <statusbarpanel class="statusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon"
mode="normal" value="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
ll_understandsnwhitespace ll_textstartswithnbsp ll_firstletterstyleok ll_istopofpage ll_updatedband ll_impactedbyfloaters ll_lastfloaterwasletterframe ll_canplacefloater ll_knowstrict
mode ll_instrict
mode ll_lineendsinbr perframedata (why isn't this just stored in the frame?) mflags pfd_relativepos pfd_istextframe pfd_isnonemptytextframe pfd_isnonwhitespacetextframe pfd_isletterframe pfd_issticky pfd_isbullet perspandata in nslinelayout, a "span" is a container inline frame, and a "frame" is one of its children.
Disabling interruptible reflow - Archive of obsolete content
add the following variables to your environment to disable gecko interruptible reflow: gecko_reflow_interrupt_
mode=counter gecko_reflow_interrupt_frequency=1000000 gecko_reflow_interrupt_checks_to_skip=1000000 now start firefox within this environment.
JSS build instructions for OSX 10.6 - Archive of obsolete content
g/en/nss_reference/building_and_installing_nss/build_instructions https://developer.mozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdist
mode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they didnt work for osx, giving many compiling errors.
Firefox Sync - Archive of obsolete content
these include: an http api for client-server interaction storage formats used by the the clients cryptographic
model for encrypting client data the definitive source for these specifications is http://docs.services.mozilla.com/.
Priority Content - Archive of obsolete content
migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesign
mode / devedge - joel coreson please put completed articles on the devedge page instead.
Tamarin Acceptance Test Template - Archive of obsolete content
this is the test template for tamarin acceptance tests (placed in test/acceptance/feature_name): /* -*-
mode: js; c-basic-offset: 4; indent-tabs-
mode: nil; tab-width: 4 -*- */ /* vi: set ts=4 sw=4 expandtab: (add to ~/.vimrc: set
modeline
modelines=5) */ /* ***** begin license block ***** * version: mpl 1.1/gpl 2.0/lgpl 2.1 * * the contents of this file are subject to the mozilla public license version * 1.1 (the "license"); you may not use this file except in compliance with * the license.
Actionscript Acceptance Tests - Archive of obsolete content
testname.as.asc_args this file specifies additional arguments to pass to asc when compiling the test: # asc args for file # two
modes are available: # override| all command line arguments (except builtin.py) are ignored and replaced by these # merge| merge these args in with the current args # specifiy an arg that starts with -no will disable the arg...
Return Codes - Archive of obsolete content
invalid_arguments -208 bad parameters to a function illegal_relative_path -209 illegal relative path user_cancelled -210 user clicked cancel on install dialog install_not_started -211 a problem occurred with the parameters to initinstall, or initinstall was not called first silent_
mode_denied -212 the silent installation privilege has not been granted.
Learn XPI Installer Scripting by Example - Archive of obsolete content
t | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/global/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/communicator/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/editor/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/navigator/"); registerchrome(skin | delayed_chrome, getfolder(cf,"
modern.jar"),"skin/
modern/communicator/"); registerchrome(skin | delayed_chrome, getfolder(cf,"
modern.jar"),"skin/
modern/editor/"); ...
Property - Archive of obsolete content
image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero
mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes pref...
Result Generation - Archive of obsolete content
a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your
model with others, it should be unique, preferably a url for a site you own, so as to avoid future conflicts with mixing of other types).
Adding Style Sheets - Archive of obsolete content
<spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="search
mode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"/> ...
Progress Meters - Archive of obsolete content
determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress id="identifier"
mode="determined" value="50" max="100"/> the attributes are as follows: id the unique identifer of the progress meter
mode the type of the progress meter.
Tabboxes - Archive of obsolete content
</description> <spacer style="height: 10px"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="search
mode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="height: 10px"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="case sensitive search"/> <checkbox id="wo...
Tree View Details - Archive of obsolete content
item[2] = true; var label = this.visibledata[idx][0]; var toinsert = this.childdata[label]; for (var i = 0; i < toinsert.length; i++) { this.visibledata.splice(idx + i + 1, 0, [toinsert[i], false]); } this.treebox.rowcountchanged(idx + 1, toinsert.length); } this.treebox.invalidaterow(idx); }, getimagesrc: function(idx, column) {}, getprogress
mode : function(idx,column) {}, getcellvalue: function(idx, column) {}, cycleheader: function(col, elem) {}, selectionchanged: function() {}, cyclecell: function(idx, column) {}, performaction: function(action) {}, performactiononcell: function(action, index, column) {}, getrowproperties: function(idx, prop) {}, getcellproperties: function(idx, column, prop) {}, getcolumnproperties: ...
Using the Editor from XUL - Archive of obsolete content
as well as making the editor (which happens via nseditorshell::doeditor
mode()) we also hook up various listeners and observers for ui updating and user interaction, and store a file specifier for the document we opened.
XML - Archive of obsolete content
as the figure below indicates, xul is an amalgam of these different standards: css for styling or "skinning", dom for the object
model and scriptable access, javascript for the linking and behavior, rdf for resources, xml for the structure, and html for the content and some little extras.
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" size
mode="normal" width="400" height="300" persist="screenx screeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2"...
statusbar - Archive of obsolete content
properties accessibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter
mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minw...
<statusbarpanel> - Archive of obsolete content
attributes crop, image, label properties image, label style classes statusbarpanel-iconic, statusbarpanel-iconic-text, statusbarpanel-menu-iconic examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter
mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
CommandLine - Archive of obsolete content
erence in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height size
mode"> <script type="application/javascript" src="cmdline.js" /> ...
Dialogs in XULRunner - Archive of obsolete content
the xul filepickers are xpcom components and must be instantiated before using, like this: function dofileopen() { /* see: http://developer.mozilla.org/en/docs/xul_tutorial:open_and_save_dialogs */ var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "open file", nsifilepicker.
modeopen); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); var res = fp.show(); if (res == nsifilepicker.returnok) { var thefile = fp.file; alert(thefile.leafname); // --- do something with the file here --- } } xul does not currently support any other common dialogs.
MacFAQ - Archive of obsolete content
p it in, to create the hiddenwindow.xul (note: the debug function and nsicommandline try/catch can be removed, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height size
mode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { var mconsoleservice = components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) mconsoleservice.logstringmessage("myxul: " +...
XULRunner tips - Archive of obsolete content
lication components/inspector-cmdline.js to your components directory defaults/preferences/inspector.js to your preferences directory open your chrome.manifest file and add these lines: content inspector jar:inspector.jar!/content/inspector/ xpcnativewrappers=no locale inspector en-us jar:inspector.jar!/locale/inspector/ skin inspector
modern/1.0 jar:inspector.jar!/skin/
modern/inspector/ skin inspector classic/1.0 jar:inspector.jar!/skin/classic/inspector/ overlay chrome://inspector/content/popupoverlay.xul chrome://inspector/content/viewers/dom/popupoverlay.xul overlay chrome://inspector/content/commandoverlay.xul chrome://inspector/content/viewers/stylerules/commandoverlay.xul overlay chrome://inspector/conten...
XUL Explorer - Archive of obsolete content
support attribute value checking where appropriate (boolean and enumerated values) - xul checker support “best practice” checks such as: using of commands and keys, strings in dtds and so on - xul checker multi-tabbed editor support support wizards to generate common projects - extensions support extension testing using firefox extension test
mode venkman support dom inspector support future: support more “best practice” checks such as: more a11y checks, strings in dtds and so on - xul checker allow users to add snippets on the fly add sidebars for more functionality - property sidebar and project sidebar support wizards to generate common projects - xul files, js xpcom, and xulrunner applications for more detailed informat...
mozilla.dev.platform FAQ - Archive of obsolete content
in order to use xr successfully in <tt>--disable-libxul</tt>
mode, you have to setup dyld_library_path to include <tt>/library/frameworks/xul.framework/versions/1.9a1</tt> - benjamin smedberg, fri, oct 20 2006 9:12 am q: when i try to build a completely standalone xul app on os x (10.4.8).
2006-12-24 - Archive of obsolete content
discussions [reset issue for overflow='hidden' in ie and opera there is a very
modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal centering style).
2006-12- 02 - Archive of obsolete content
discussions [reset issue for overflow='hidden' in ie and opera there is a very
modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal centering style).
NPP_Print - Archive of obsolete content
it uses the print
mode set in the npprint structure in its printinfo parameter to determine whether the plug-in should print as an embedded plug-in or as a full-page plug-in.
-ms-scroll-translation - Archive of obsolete content
if your javascript is listening for scroll wheel document object
model (dom) events, the events that occur when the user scrolls vertically will always be vertical scroll events, not horizontal scroll events.
::-ms-fill-upper - Archive of obsolete content
see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range inputs with css quirks
mode: styling and scripting sliders ...
::-ms-thumb - Archive of obsolete content
see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range inputs with css quirks
mode: styling and scripting sliders ...
::-ms-track - Archive of obsolete content
-ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirks
mode: styling and scripting sliders ...
E4X - Archive of obsolete content
the difference between the two
modes is that without the "e4x=1" mime type, any statement-level xml/html comment literals (<!--...-->) are ignored for backwards compatibility with the comment hiding trick, and cdata sections (<![cdata[...]]>) are not parsed as cdata literals (which leads to a js syntax error in html since html's <script> element produces an implicit cdata section, and therefore cannot contain explicit cdata section...
Date.getVarDate() - Archive of obsolete content
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 internet explorer 10 standards.
Enumerator.atEnd - Archive of obsolete content
var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.item - Archive of obsolete content
var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveFirst - Archive of obsolete content
var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator.moveNext - Archive of obsolete content
var freegb = drv.freespace / bytespergb; var totalgb = drv.totalsize / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards.
Enumerator - Archive of obsolete content
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 internet explorer 10 standards.
Error.description - Archive of obsolete content
use an error: x = y } catch(e) { // prints "[object error]": document.write(e) document.write (" "); // prints 5009: document.write((e.number & 0xffff)) document.write (" "); // prints "'y' is undefined": document.write(e.description); document.write (" "); // prints "'y' is undefined": document.write(e.message) } requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
Error.number - Archive of obsolete content
error code: 5009 facility code: 10 error message: 'y' is undefined requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngine() - Archive of obsolete content
example the following example illustrates the use of the scriptengine function: if (window.scriptengine) { console.log(window.scriptengine()); } // output: jscript requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineBuildVersion - Archive of obsolete content
example the following example illustrates the use of the scriptenginebuildversion function: if(window.scriptenginebuildversion) { console.log(window.scriptenginebuildversion()); } // output: <current build version> requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineMajorVersion - Archive of obsolete content
example the following example illustrates the use of the scriptenginemajorversion function: if (window.scriptenginemajorversion) { console.log(window.scriptengine()); } output: <current major version> requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineMinorVersion - Archive of obsolete content
if (window.scriptengineminorversion) { console.log(window.scriptengineminorversion()); } //output: <current minor version> requirements supported in the following document
modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
VBArray.dimensions - Archive of obsolete content
ar a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return(s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> 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 internet explorer 10 standards.
VBArray.getItem - Archive of obsolete content
javascript"> <!-- function getitemtest(vbarray) { var i, j; var a = new vbarray(vbarray); for (i = 0; i <= 2; i++) { for (j =0; j <= 2; j++) { document.writeln(a.getitem(i, j)); } } } --> </script> </head> <body> <script type="text/javascript"> <!-- getitemtest(createvbarray()); --> </script> </body> 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 internet explorer 10 standards.
VBArray.lbound - Archive of obsolete content
a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the lower bound of dimension "; s += i + " is "; s += a.lbound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> 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 internet explorer 10 standards.
VBArray.toArray - Archive of obsolete content
ction --> </script> <script type="text/javascript"> <!-- function vbarraytest(vbarray) { var a = new vbarray(vbarray); var b = a.toarray(); var i; for (i = 0; i < 9; i++) { document.writeln(b[i]); } } --> </script> </head> <body> <script type="text/javascript"> <!-- vbarraytest(createvbarray()); --> </script> </body> 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 internet explorer 10 standards.
VBArray.ubound - Archive of obsolete content
a = new vbarray(vba); var s = ""; for (i = 1; i <= a.dimensions(); i++) { s += "the upper bound of dimension "; s += i + " is "; s += a.ubound(i); s += ".<br />"; } return (s); } --> </script> </head> <body> <script type="text/javascript"> document.write(vbarraytest(createvbarray())); </script> </body> 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 internet explorer 10 standards.
VBArray - Archive of obsolete content
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 internet explorer 10 standards.
Object.observe() - Archive of obsolete content
e: false}); // [{name: 'foo', object: <obj>, type: 'reconfigure'}] object.setprototypeof(obj, {}); // [{name: '__proto__', object: <obj>, type: 'setprototype', oldvalue: <prototype>}] object.seal(obj); // [ // {name: 'foo', object: <obj>, type: 'reconfigure'}, // {name: 'bar', object: <obj>, type: 'reconfigure'}, // {object: <obj>, type: 'preventextensions'} // ] data binding // a user
model var user = { id: 0, name: 'brendan eich', title: 'mr.' }; // create a greeting for the user function updategreeting() { user.greeting = 'hello, ' + user.title + ' ' + user.name + '!'; } updategreeting(); object.observe(user, function(changes) { changes.foreach(function(change) { // any time name or title change, update the greeting if (change.name === 'name' || change.name ==...
XForms API Reference - Archive of obsolete content
xforms...element interfaces implemented by the c++ part of a control nsixformsns...element interfaces extending xforms specification interfaces nsixforms...uielement interfaces implemented by the js part of a control nsixforms...accessors interface exposing states about the bound instance node for a given control frozen interfaces nsixforms
modelelement the
model interface experimental interfaces nsixformsdelegate the delegate interface for xforms:custom_controls nsixformsaccessors the accessors interface for xforms:custom_controls nsixformsns
modelelement custom extension(s) to the nsixforms
modelelement interface nsixformsnsinstanceelement custom extension(s) to the i...
Troubleshooting XForms Forms - Archive of obsolete content
if you are developing on your local machine using apache tomcat for example then add the following regular expression on a new line: ^http://localhost:8080/.* use the xforms buddy to view instance data the xforms buddy extension allows you to dynamically view
model instance data while the xforms is running in the firefox browser.
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special input
mode - not supported for this control incremental - supported.
XForms Message Element - Archive of obsolete content
representations it may be represented in the following ways: modal window - if level attribute value is modal
modeless window - if level attribute value is
modeless tooltip window - if level attribute value is ephemeral note: message element doesn't define a default presentation.
XForms - Archive of obsolete content
drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms
model.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
the most reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy documents, browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks"
mode.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
npp_getvalue implementation and possible scenario of scriptable object life cycle #include "nsitestplugin.h" nperror npp_new(npmimetype plugintype, npp instance, uint16
mode, int16 argc, char* argn[], char* argv[], npsaveddata* saved) { if(instance == null) return nperr_invalid_instance_error; // just prime instance->pdata with null for the purpose of this example // it will be assigned to the scriptable interface later to keep its // association with the specific plugin instance instance->pdata = null; return rv; } npe...
XQuery - Archive of obsolete content
while xquery is currently not supported in firefox (whether through javascript to developers or to browser users), at least one extension has been developed to give a preliminary support for xquery for browser users (and serving as a simple
model for how xquery can be implemented within extensions).
Archive of obsolete content
material in this archived content zone should not be used for building new web sites or apps for
modern browsers.
Game distribution - Game development
this can range from low-end smartphones or tablets, through laptops and desktop computers, to smart tvs, watches or even a fridge if it can handle a
modern enough browser.
Building up a basic demo with PlayCanvas - Game development
playcanvas engine built for
modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
Mobile touch controls - Game development
overview: control mechanisms next the future of mobile gaming is definitely web, and many developers choose the mobile first approach in their game development process — in the
modern world, this generally also involves implementing touch controls.
Efficient animation for web games - Game development
modern console games, for example, tend to prioritise framerate during player movement and combat, but may prioritise image quality or physics detail when compromise to framerate and input response would be less noticeable.
Physics - Game development
final code check the latest code should look like this: var ball; function preload() { game.scale.scale
mode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.veloc...
2D maze game with device orientation - Game development
var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scale
mode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the screen.
Visual JS GE - Game development
s indicated below: module.exports = { version : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in developer
mode only) the following section provides information about the tools involved in visual-js game engine.
Visual typescript game engine - Game development
https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor
mode in gameplay.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in
modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than immediately.
ISP - MDN Web Docs Glossary: Definitions of Web-related terms
an isp (internet service provider) sells internet access, and sometimes email, web hosting, and voice over ip, either by a dial-up connection over a phone line (formerly more common), or through a broadband connection such as a cable
modem or dsl service.
What is accessibility? - Learn web development
just as it is wrong to exclude someone from a physical building because they are in a wheelchair (
modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment.
Cascade and inheritance - Learn web development
overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Organizing your CSS - Learn web development
previous overview: building blocks in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Attribute selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
ndant combinator child combinator article > p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Styling tables - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box
model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...
Practical positioning examples - Learn web development
general setup to begin with, add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing
model, and get rid of the default <body> margin.
Web fonts - Learn web development
for example, most
modern browsers support woff/woff2 (web open font format versions 1 and 2), the most efficient format around, but older versions of ie only support eot (embedded open type) fonts, and you might need to include an svg version of the font to support older versions of iphone and android browsers.
Learn to style HTML using CSS - Learn web development
we have covered the necessary prerequisites so we can now dive deep into css layout, looking at different display settings,
modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
Client-side form validation - Learn web development
// in
modern browsers, you should prefer using element.nextelementsibling let error = email; while ((error = error.nextsibling).nodetype != 1); // as per the html5 specification const emailregexp = /^[a-za-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-za-z0-9-]+(?:\.[a-za-z0-9-]+)*$/; // many legacy browsers do not support the addeventlistener method.
Sending form data - Learn web development
just remember that a front-end developer is not the one who should define the security
model of the data.it's possible to perform client-side form validation, but the server can't trust this validation because it has no way to truly know what has really happened on the client-side.
Debugging HTML - Learn web development
in the dom inspector, you can see what the rendered markup looks like: using the dom inspector, let's explore our code in detail to see how the browser has tried to fix our html errors (we did the review in firefox; other
modern browsers should give the same result): the paragraphs and list items have been given closing tags.
Asynchronous JavaScript - Learn web development
making asynchronous programming easier with async and await promises can be somewhat complex to set up and understand, and so
modern browsers have implemented async functions and the await operator.
Accessibility in React - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Componentizing our React app - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
React interactivity: Events and state - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
React interactivity: Editing, filtering, conditional rendering - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
React resources - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Beginning our React todo list - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Vue resources - Learn web development
with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and
models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, a...
Cross browser testing - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting
modern javascript features working in older browsers, and more.
Git and GitHub - Learn web development
git handbook (from github) this git handbook goes into a little more depth, explaining what a vcs is, what a repository is, how the basic github
model works, git commands and examples, and more.
Command line crash course - Learn web development
better programs exist for providing a terminal experience on windows, such as powershell (see here to find installers), and gitbash (which comes as part of the git for windows toolset) however, the best option for windows in the
modern day is the windows subsystem for linux (wsl) — a compatibility layer for running linux operating systems directly from inside windows 10, allowing you to run a “true terminal” directly on windows, without needing a virtual machine.
Accessibility Features in Firefox
that's the great thing about the open firefox community
model and source code license -- anyone can contribute, and everyone benefits.
CSUN Firefox Materials
that's the great thing about the open firefox community
model and source code license -- anyone can contribute, and everyone benefits.
Embedding API for Accessibility
background images setboolpref("browser.accept.background_images", acceptbackgroundimages); no blinking text setboolpref("browser.blink_allowed", acceptblinktext); no animations setcharpref("image.animation_
mode", animation
mode); animation
mode: "normal", "none", "once" moz 0.8 applets setboolpref("browser.accept.applets", acceptapplets); no scripts setboolpref("browser.accept.scripts", acceptscripts); no ...
Multiprocess on Windows
since gecko's main thread uses com, and com requires threads to declare their threading
model, the main thread must initialize itself to live inside its own single threaded apartment (sta).
Debugging Safari
to enable the very useful debug menu in safari use the following: defaults write com.apple.safari includeinternaldebugmenu 1 it is often useful to switch into single process
mode by turning off "use multi-process windows" ...
Debugging on Windows
firefox, in general, and even in non-e10s
mode, does not start the main process directly, it starts it via a launcher process.
HTTP logging
older editors may have problems with this, but if you're using an even reasonably
modern mac os x application to view the log, you won't have any problems.
Debugging
debugging specific parts of the mozilla codebase debugging opengl if you're working on code that involves opengl calls, and need to debug it, you can turn on a special opengl debugging
mode.
Configuring Build Options
most
modern systems have multiple cores or cpus, and they can be optionally used concurrently to make the build faster.
Simple SeaMonkey build
build prerequisites hardware requirements: the seamonkey build process is both i/o- and cpu-intensive, and can take a long time to build even on
modern hardware.
MozBeforePaint
this is intentional, because
modern operating systems and hardware won't let the browser display more frames than that anyway.
Embedding Tips
when finished with preview
mode, call nsiwebbrowserprint::exitprintpreview().
HTML parser threading
due to legacy interface design oddities, an nshtml5parser is initialized by calling nshtml5parser::parse(nsiuri*, nsirequestobserver*, void*, nsdtd
mode).
HTTP Cache
adding a new storage should there be a need to add a new distinct storage for which the current scoping
model would not be sufficient - use one of the two following ways: [preffered] add a new <your>storage method on nsicachestorageservice and if needed give it any arguments to specify the storage scope even more.
How to get a stacktrace with WinDbg
troubleshooting: symbols will not download if symbols will not download no matter what you do, the problem may be that internet explorer has been set to the work offline
mode.
How to Report a Hung Firefox
all os as long as you do not need to be in firerfox's safe
mode, a user friendly method of crashing firefox is to install and use the addon crash me now!
IPDL Tutorial
virtual bool recvinit(bool* windowless, bool* ok) = 0; } rpc semantics "rpc" stands for "remote procedure call," and this third semantics
models procedure call semantics.
Integrated Authentication
mozilla also supports raw ntlm authentication using an internal implementation (based on the documentation provided by eric glass) that supports ntlmv1/lmv1 and ntlm2 session key
modes.
AsyncShutdown.jsm
please make sure that the name respects the following
model: "some service: some action in progress" - for instance "os.file: flushing all pending i/o".
API-provided widgets
showinprivatebrowsing whether to show the widget in private browsing
mode (optional, default: true) event handlers you can also define several event handlers which will be called at various stages in a widget's lifetime: event handler name description onbuild(adoc) only useful for custom widgets (and required there); a function that will be invoked with the document in which to build a widget.
JavaScript OS
os.constants os-related constants, including errors, file opening
modes, system configuration, etc.
NetUtil.jsm
ns_base_stream_would_block reading from the specified stream would block the calling thread, and the stream is in non-blocking
mode.
OSFile.jsm
in this
mode, main thread clients use the api to request off main thread file i/o.
Bootstrapping a new locale
ser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safe
mode.dtd browser.dtd safebrowsing browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searchbar.dtd enginemanager.properties setdesktopbackground.dtd feeds shellservice.properties history sidebar migration tabbrowser.dtd openlocation.dtd...
Release phase
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.
Basics
this tri-state
mode is aimed at limiting conflicts with other agents that compete for the mouse.
MathML3Testsuite
this exception also holds for obsolete features (such as macro,
mode etc) or for other undefined behaviors (attribute href for example).
Updates
mozilla 1.0 features full support for html 4.0, xml 1.0, resource description framework (rdf), cascading style sheets level 1 (css1), and the w3c document object
model level 1 (dom1) [...] as well as support for display of mathematical equations using mathml." december 7, 2001 status report october 2000 the first international mathml conference april 14, 2000 status report february 12, 2000 mathml-enabled m13 builds for win32 september 21, 1999 mathml has landed.
Mozilla DOM Hacking Guide
seriously hacking on it requires excellent knowledge of c++ and xpcom, mozilla's own component
model.
Mozilla Development Tools
doctor lets you edit pages in wysiwyg
mode if the pages contain the <?doctor enable_wysiwyg_
mode ?> processing instruction.
Mozilla projects on GitHub
debugger.html the debugger.html, a
modern universal js debugger for firefox devtools, node, and every other js environment.
Mozilla Style System Documentation
the css specification describes formatting objects that correspond to elements in the content
model and formatting objects that correspond to pseudo-elements.
Gecko Profiler FAQ
this
mode is usually recommended when you want to find a thread you want to do more focused profiling on, so that you can find its name and then construct a more useful thread filter string based on the found thread name.
Scroll-linked effects
in the asynchronous scrolling
model, the visual scroll position is updated in the compositor thread and is visible to the user before the scroll event is updated in the dom and fired on the main thread.
powermetrics
user%: percentage of that cpu time spent in user space (as opposed to kernel
mode.) deadlines (<2 ms, 2-5 ms): these two columns count how many "short" timers woke up threads in the process, per second, during the sample period.
tools/power/rapl
windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the relevant
model-specific registers.
Profile Manager
launch option command line argument run firefox in offline
mode -offline run firefox in safe
mode -safe-
mode start firefox with a console -console start new instance -no-remote note: it isn't possible to start a second instance of firefox without passing it the -no-remote command line argument.
NSPR Poll Method
how to use the poll method the poll method should only be used with a nspr file descriptor in non-blocking
mode.
IPC Semaphores
nspr provides an interprocess communication mechanism using a counting semaphore
model similar to that which is provided in unix and windows platforms.
I/O Functions
act on file descriptors pr_close pr_read pr_write pr_writev pr_getopenfileinfo pr_getopenfileinfo64 pr_seek pr_seek64 pr_available pr_available64 pr_sync pr_getdesctype pr_getspecialfd pr_createpipe directory i/o functions pr_opendir pr_readdir pr_closedir pr_mkdir pr_rmdir socket manipulation functions the network programming interface presented here is a socket api
modeled after the popular berkeley sockets.
Named Shared Memory
the nspr shared memory api provides a cross-platform named shared-memory interface that is
modeled on similar constructs in the unix and windows operating systems.
PR_SetLogBuffering
the application can use the
model provided in use example to effect application logging.
PR_SetLogFile
the application can use the
model provided in use example to effect application logging.
Thread Pools
nspr's thread pool is
modeled on the thread pools described by david r.
Threads
for an overview of the nspr threading
model and sample code that illustrates its use, see introduction to nspr.
An overview of NSS Internals
alternatively, should you decide that you don't want to work with any persistent recording of certificates, you may initialize nss in a no-database
mode.
Certificate functions
tdbfilename mxr 3.2 and later cert_ocspcachesettings mxr 3.11.7 and later cert_pkixverifycert mxr 3.12 and later cert_removecertlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfailure
mode mxr 3.11.7 and later cert_setocsptimeout mxr 3.12 and later cert_setusepkixforvalidation mxr 3.12 and later cert_startcertextensions mxr 3.5 and later cert_startcertificaterequestattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later ...
JSS
when nss is put in fips
mode, jss ensures fips compliance by ensuring that all cryptographic operations are performed by the nss cryptographic module.
NSS_3.11.10_release_notes.html
bug 291384: certutil -k behavior doesn't match usage bug 374247: modutil -disable command not disabling modules' slots bug 384459: certification path validation fails when authority key identifier extension contains key identifier bug 385946: can't import certificate into cert database in fips
mode (certutil).
NSS_3.12_release_notes.html
71: certutil lacks a way to request a certificate with an existing key bug 382292: add support for camellia to cmd/symkeyutil bug 385642: add additional cert usage(s) for certutil's -v -u option bug 175741: strict aliasing bugs in mozilla/dbm bug 210584: cert_asciitoname doesn't accept all valid values bug 298540: vfychain usage option should be improved and documented bug 323570: make dbck debug
mode work with softoken bug 371470: vfychain needs option to verify for specific date bug 387621: certutil's random noise generator isn't very efficient bug 390185: signtool error message wrongly uses the term database bug 391651: need config.mk file for windows vista bug 396322: fix secutil's code and nss tools that print public keys bug 417641: miscellaneous minor nss bugs bug 334914: hopefully usel...
NSS 3.14.2 release notes
if compiled on linux systems in 64-bit
mode, nss will include runtime detection to check if the platform supports aes-ni and pclmulqdq.
NSS 3.14 release notes
warning: because of ambiguity in the current draft text, applications should only use gcm in single-part
mode (c_encrypt/c_decrypt).
NSS 3.15.4 release notes
notable changes in nss 3.15.4 reordered the cipher suites offered in ssl/tls client hello messages to match
modern best practices.
NSS 3.23 release notes
nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly1305 cipher and tls cipher suites now supported (bug 917571, bug 1227905) experimental-only support tls 1.3 1-rtt
mode (draft-11).
NSS 3.33 release notes
when using certutil to set an inacceptable password in fips
mode, a correct explanation of acceptable passwords will be printed.
NSS 3.34 release notes
when using certutil, to set an inacceptable password in fips
mode, a correct explanation of acceptable passwords will be printed.
NSS 3.43 release notes
090bbfa40604b0988446c7636183df9846e17101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-format as a fallback bug 1531267 - enable fips
mode automatically if the system fips
mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1535122 - align tls 1.3 hkdf trace levels bug 15...
NSS 3.46 release notes
s 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560806 - increase softoken password max size to 500 characters bug 1568776 - output paths relative to repository in nss coverity bug 1453408 - modutil -changepw fails in fips
mode if password is an empty string bug 1564727 - use a pss spki when possible for delegated credentials bug 1493916 - fix ppc64 inline assembler for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized warning in pkix_pl_ldapdefaultclient.c bug 1512605 - incorrect alert description after unencrypted finished msg bug 1564715 - read /proc/...
NSS 3.48 release notes
26 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv length is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591315 - update nsc_decrypt length in constant time bug 1562671 - increase nss mp kdf default iteration count, by default for
modern key4 storage, optionally for legacy key3.db storage bug 1590972 - use -std=c99 rather than -std=gnu99 bug 1590676 - fix build if arm doesn't support neon bug 1575411 - enable tls extended master secret by default bug 1590970 - ssl_settimefunc has incomplete coverage bug 1590678 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential key str...
PKCS #11 Module Specs
if tokens is not specified, then softoken would default to the following specs: in non-fips
mode: tokens=<0x01=[configdir=configdir tokendescription=cryptotokendescription slotdescription=cryptoslotdescription flags=nocertdb,nokeydb,optimizespace] 0x02=[configdir=configdir tokendescription=dbtokendescription slotdescription=dbslotdescription certprefix=certprefix keyprefix=keyprefix flags=flags minpwlen=minpwlen]> in fips
mode: tokens=<0x03=[configdir=configdir tokendescription=fipstoken...
Build instructions
nsdist
mode: if set to 'copy', mozilla/dist/<obj_stuff>/bin/* real files instead of symbolic links.
FC_Finalize
syntax ck_rv fc_finalize (ck_void_ptr preserved); parameters fc_finalize has one parameter: preserved must be null description fc_finalize shuts down the nss cryptographic module in the fips
mode of operation.
FC_Initialize
description fc_initialize initializes the nss cryptographic module for the fips
mode of operation.
NSS functions
tdbfilename mxr 3.2 and later cert_ocspcachesettings mxr 3.11.7 and later cert_pkixverifycert mxr 3.12 and later cert_removecertlistnode mxr 3.6 and later cert_rfc1485_escapeandquote mxr 3.2 and later cert_savesmimeprofile mxr 3.2 and later cert_setsloptime mxr 3.2 and later cert_setocspfailure
mode mxr 3.11.7 and later cert_setocsptimeout mxr 3.12 and later cert_setusepkixforvalidation mxr 3.12 and later cert_startcertextensions mxr 3.5 and later cert_startcertificaterequestattributes mxr 3.10 and later cert_startcrlentryextensions mxr 3.10 and later cert_startcrlextensions mxr 3.10 and later ...
NSS tools : vfychain
-r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose
mode.
certutil
-x force the key and certificate database to open in read-write
mode.
NSS tools : vfychain
-r following certfile is raw binary der (default) -t following cert is explicitly trusted (overrides db trust) -u usage 0=ssl client, 1=ssl server, 2=ssl stepup, 3=ssl ca, 4=email signer, 5=email recipient, 6=object signer, 9=protectedobjectsigner, 10=ocsp responder, 11=any ca -v verbose
mode.
Network Security Services
additional information using the window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips
mode - an explanation format of key log files view all nss-related articles on mdn planning information on nss planning can be found at wiki.mozilla.org, including: fips validation nss roadmap page nss improvement project community view mozilla security forums...
The Necko HTTP module
transaction
model this document describes the lifetime of a http transaction, the threads involved, and the relevant objects.
Installing Pork
note: once you do this, you can only use this version of gcc in -m32
mode.
Small Footprint
optimizer it is possible to run rhino with interpreter
mode only, allowing you to remove code for classfile generation that include all the classes from <tt>org.mozilla.javascript.optimizer</tt> package.
Rhino history
so in fall of 1998, rhino added an interpretive
mode.
Rhino overview
first, it may be the class of the interpreter if interpretive
mode is in effect.
Exact Stack Rooting
modern c++ compilers are not smart enough to do licm on js::rootedt, so forward declaring a single js::rootedt above the loop and re-using it on every iteration can save some cycles.
Garbage collection
design overview spidermonkey has a mark-sweep garbage collection (gc) with incremental marking
mode, generational collection, and compaction.
JSDeletePropertyOp
this will cause delete obj[id] to evaluate to false in non-strict
mode code, and to throw a typeerror in strict
mode code.
JSPropertyOp
strict bool (jsstrictpropertyop only) if strict is true, treating the assignment as strict
mode code.
JS_BeginRequest
this "request
model" is necessary to interlock with the global garbage collector.
JS_GetParent
see the security section of the user guide for an introduction to the security
model.) in some cases, javascript code can get an object's parent via the read-only obj.__parent__ property.
JS_SetFunctionCallback
this lets you trace the execution of code, and is particularly useful for javascript tracers and profilers since it works across all run
modes (interpreter, method jit, trace jit).
SpiderMonkey 24
it continues to improve performance over previous spidermonkey releases, with a significantly improved garbage collector, a new jit compilation
mode, and other features.
Mozilla Projects
internet explorer supports the ability to make an entire document editable by setting the design
mode property of the document object; this is how midas is invoked in gecko.
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help developers create fast, secure applications which take full advantage of the powerful features of
modern multi-core processors.
Secure Development Guidelines
a file at one point in time and immediately after the state might have changed most file name operations suffer from these race conditions, but not when performed on file descriptors file i/o: race conditions consider the following example int main(int argc, char **argv) { char *file = argv[1]; int fd; struct stat statbuf; stat(file, &statbuf); if (s_islink(statbuf.st_
mode)) { bailout(“symbolic link”); } else if (statbuf.st_uid != getuid) { bailout(“you don’t own the file”); } fd = open(file, o_rdwr); write(fd, argv[2], strlen(argv[2])); } file i/o: race conditions previous example contains a race condition the file may change between the call top stat() and open() this opens the possibility of writing arb...
Handling Mozilla Security Bugs
if the group decides to publish a warning, the module owner, a peer, or some other person they may designate will post this message to the known vulnerabilities page (which will be the authoritative source for this information) and will also send a copy of this message to an appropriate
moderated mailing list and/or newsgroup (e.g., netscape.public.mozilla.announce and/or some other newsgroup/list established specifically for this purpose).
A Web PKI x509 certificate primer
ec_error_cert_not_in_name_space a certificate has a common name or subject alternative name that is not in the namespace of an issuing certificate re-issue the certificate with names that are within the namespace of all certificates in the chain sec_error_cert_signature_algorithm_disabled a certificate has been signed with an obsolete algorithm re-sign the certificate using a
modern algorithm sec_error_expired_certificate a certificate is too old to be used re-generate the certificate sec_error_extension_value_invalid a certificate has an extension with an empty value re-generate the certificate without the extension, or re-generate it with a non-empty value sec_error_inadequate_cert_type a certificate has an extended key usage ext...
Animated PNG graphics
note that for the first frame the two blend
modes are functionally equivalent due to the clearing of the output buffer at the beginning of each play.
History Service Design
finally the root node is assigned to a history result object, that can be furtherly modified setting for example a sorting
mode.
places.sqlite Database Troubleshooting
nn must be replaced with the number we had noted previously: sqlite> pragma user_version = nn; let's update the page_size value: sqlite> pragma journal_
mode = truncate; sqlite> pragma page_size = 32768; sqlite> vacuum; sqlite> pragma journal_
mode = wal; sqlite> .exit copy the new places.sqlite to the profile folder, overwriting the existing one.
FUEL
fuel is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "
modern" javascript ideas.
SMILE
smile is about making it easier for extension developers to be productive, by minimizing some of the xpcom formality and adding some "
modern" javascript ideas.
Toolkit API
these services include: profile management chrome registration browsing history extension and theme management application update service safe
mode printing official references structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package x...
Fun With XBL and XPConnect
the basic
model of interaction is as follows: binding to the xpcom object the widget holds onto an xpcom object that is the auto complete engine that will perform our auto complete lookups.
XPCOM changes in Gecko 2.0
the changes to the component registration
model let this so-called extension manager restart become a thing of the past.
Building the WebLock UI
within a xul application file, elements like <button/>, <menu/>, and <checkbox/> can be hooked up to an event
model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla.
Preface
xpcom stands for the cross platform component object
model.
Starting WebLock
weblock is designed so that the user interface notifies this service when we should go into lock
mode.
XPCOM Stream Guide
fileutils.jsm provides apis for getting output streams for files, with the .openfileoutputstream(file,
modeflags) and .opensafefileoutputstream(file,
modeflags) methods, and for closing those output streams with the .closesafefileoutputstream(inputstream) method.
Components.classes
if the given element in the components.classes object is not registered on the machine then trying to access it will generate a javascript warning in strict
mode and the value returned will be the javascript value undefined.
nsIDOMXPathResult
see also introduction to using xpath in javascript document object
model (dom) level 3 xpath specification nsidomxpathevaluator document.evaluate nsidomxpathexception ...
nsIEditor
in the case of a design
mode document, this is the same as the window's selection.
nsIEventListenerInfo
capturing boolean indicates whether or not the event listener is in capture
mode.
nsIFile
void normalize(); file openansifiledesc(in string
mode); prfiledescstar opennsprfiledesc(in long flags, in long
mode); void renameto(in nsifile newparentdir, in astring newname); void remove(in boolean recursive); void reveal(); void setrelativedescriptor(in nsifile fromfile, in acstring relativedesc); attributes attribute type description directoryentries nsisimpleenumer...
nsIFocusManager
this is a special value used to focus links as the caret moves over them in caret browsing
mode.
nsIJumpListBuilder
common uses would be the enabling of a privacy
mode and uninstallation.
nsIMacDockSupport
if permanent private browsing
mode is enabled then the "new private window" menu item is hidden.
nsIMarkupDocumentViewer
obsolete since gecko 6.0 bidicontrolstext
mode octet the order of bidirectional text in form controls.
nsIMemoryReporterManager
this reporter is special-cased because it is interesting, and is
moderately difficult to compute in javascript.
nsIMsgIdentity
signaturedate long escapedvcard astring dofcc boolean fccfolder astring fccfolderpicker
mode astring fccreplyfollowsparent boolean draftsfolderpicker
mode astring tmplfolderpicker
mode astring bccself boolean note: don't call bccself, bccothers, and bcclist directly, they are only used for migration and backward compatability.
nsINavHistoryBatchCallback
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void runbatched(in nsisupports auserdata); methods runbatched() void runbatched( in nsisupports auserdata ); parameters auserdata see also nsinavhistoryservice.runinbatch
mode() nsinavbookmarksservice.runinbatch
mode() ...
nsIOutputStream
exceptions thrown ns_base_stream_would_block if writing to the output stream would block the calling thread (non-blocking
mode only) writefrom() this method copies data from an nsiinputstream to this nsioutputstream.
nsIPipe
this
mode can be useful in some cases, but should always be used with caution.
nsIPlacesView
the nodes are not necessarily returned in the same order in which they occur in the
model, or in the same container, or from the same provider.
nsIScriptableInputStream
ns_base_stream_would_block if reading from the input stream would block the calling thread (non-blocking
mode only).
nsIWinTaskbar
defaultgroupid astring the default application user
model id the application registers with the system.
nsIXULRuntime
insafe
mode boolean whether the application was launched in safe
mode.
nsIZipReader
to create an instance, use: var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); about character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use 7-bit ascii; however, most
modern filesystems use 8 bit code pages, such as utf-8.
nsIZipWriter
donly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.
modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { var dir = fp.file; //dir must exist, as the user selected it.
nsMsgFolderFlagType
const nsmsgfolderflagtype mail = 0x00000004; /** @} */ /** whether this is a directory: newshosts are always directories; * newsgroups can be directories if we are in ``show all groups''
mode; * mail folders will have this bit if they are really directories, not files.
XPCOM Interface Reference
esslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixforms
modelelementnsixformsnsinstanceelementnsixformsns
modelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpccli...
XPCOM Interface Reference by grouping
nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixforms
modelelement nsixformsnsinstanceelement nsixformsns
modelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsij...
Performance
sharding the cache between connections by default, storage enables the sqlite shared-cache
mode which makes multiple connections to the same database share the same cache.
XPCOM ABI
abi naming each abi is named with a string [target_xpcom_abi] of the following format: {cpu_arch}-{target_compiler_abi} {cpu_arch} [platforms] represents the cpu architecture and may be either: x86 - i386 and higher series (including x86-64 cpus in 32-bit
mode) ppc - powerpc series alpha - alpha series x86_64 - amd64/emt64 series in 64-bit
mode (32-bit
mode is still considered x86) sparc - sparc series ia64 - itanium series {target_compiler_abi}[platforms] represents the compiler abi and may be either: msvc - microsoft visual c++ n32 - irix 6 c++ compiler gcc2 - gnu c++ compiler 2.x gcc3 - gnu c++ compiler 3.x or 4.x sunc - sun c++ compil...
XPCOM tasks
building ownership
models that work (see xpcom ownership guidelines), using raw pointers, nscomptr (see the nscomptr user's manual), nsiweakreference (see nsiweakreference), nscweakreference, and (across threads) proxies (see nsisupports proxies).
Mozilla technologies
the xml extras module is built by default on all platforms, and is included in the browser installers so it is available in the nightly builds.xpcomxpcom is a cross platform component object
model, similar to microsoft com.
Testing Mozilla code
the first part will focus on the
modern and robust way of static-analysis and the second part will present the build-time static-analysis.debugging mozilla with valgrindthis page describes how to use valgrind (specifically, its memcheck tool) to find memory errors.firefox and address sanitizeraddress sanitizer (asan) is a fast memory error detector that detects use-after-free and out-of-bound bugs in c/c++ programs.
DB Views (message lists)
tation) nsmsgquicksearchdbview - (implementation) nsmsgxfvirtualfolderdbview - (implementation) nsmsggroupview - (implementation) usually, a view object has parallel arrays, which map directly to lines in the message list: m_keys message header key m_flags 32 bits, combination of message header flags and view-only flags (e.g., collapsed) m_level the indentation level when in threaded
mode.
Building a Thunderbird extension 1: introduction
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-platform component object
model.
Using the Multiple Accounts API
preference: mail.server.server.max_cached_connections - integer, max number of connections left open to the server preference: mail.server.server.empty_trash_threshhold integer, (should not be imap-specific) max k of wasted diskspace before we purge a folder preference: mail.server.server.delete_
model - integer, delete
model (move to trash, imap delete, purge immediately, not sure of values) preference: mail.server.server.timeout - integer, number of minutes a connection is idle before we drop it preference: mail.server.server.capability - list of capabilities of this server preference: mail.server.server.namespace.public - the server's namespace for public folders preference:...
Using the Mozilla symbol server
troubleshooting: symbols will not download if symbols will not download no matter what you do, the problem may be that internet explorer has been set to the work offline
mode.
Working with windows in chrome code
progress = window.arguments[0].maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value = 100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="progressmeter"
mode="determined" /> <button label="cancel" oncommand="close();" /> </hbox> </window> example 2: interacting with the opener sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window.
Zombie compartments
if you have add-ons enabled, please try to reproduce in safe
mode, which disables them.
3D view - Firefox Developer Tools
when you click on the 3d view button, the page goes into 3d view
mode; in this
mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
DOM Inspector - Firefox Developer Tools
the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object
model of documents - usually web pages or xul windows.
Debugger - Firefox Developer Tools
strict present and true if this error or warning is due to the strict option (not to be confused with es strict
mode) exception present and true if an exception will be thrown; absent otherwise.
Debugger-API - Firefox Developer Tools
gecko-specific features while the debugger core api deals only with concepts common to any javascript implementation, it also includes some gecko-specific features: [global tracking][global] supports debugging all the code running in a gecko instance at once—the ‘chrome debugging’
model.
Edit fonts - Firefox Developer Tools
tips finally, here are a few tips for making effective use of the fonts tab: when using the page inspector's 3-pane
mode, you can view the css rules for the inspected element simultaneously alongside the fonts tab.
Reposition elements in the page - Firefox Developer Tools
if an element has its position property set to absolute, relative or fixed and one or more of the top, bottom , left or right properties, the box
model view displays a button: if you click that button, two handles appear next to the element: you can use these handles to drag the element around the page.
Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box
model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
Select and highlight elements - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box
model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box
modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...
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.
AesCtrParams - Web APIs
in ctr
mode, every time a block of the message is encrypted, an extra block of data is mixed in.
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count
mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top:...
Animation - Web APIs
for this reason,
modern browsers have implemented the part of the web animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.
Attr - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'attr' in that specification.
AudioDestinationNode - Web APIs
number of inputs 1 number of outputs 0 channel count
mode "explicit" channel count 2 channel interpretation "speakers" properties inherits properties from its parent, audionode.
AudioListener.dopplerFactor - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.positionX - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.positionY - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.positionZ - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.setOrientation() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.setPosition() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.speedOfSound - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.upX - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.upY - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener.upZ - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioListener - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
AudioWorkletNodeOptions - Web APIs
this has the effect of changing the output channel count to dynamically change to the computed number of channels, based on the input's channel count and the current setting of the audionode property channelcount
mode.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
this is a sequence of bytes with the following format: aaguid (16 bytes) - authenticator attestation globally unique identifier, a unique number that identifies the
model of the authenticator (not the specific instance of the authenticator) so that a relying party can understand the characteristics of the authenticator by looking up its metadata statement.
BaseAudioContext.createPanner() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
BiquadFilterNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "max" channel count 2 (not used in the default count
mode) channel interpretation "speakers" constructor biquadfilternode() creates a new instance of a biquadfilternode object.
CSS.escape() - Web APIs
, the escape() method can be used: var element = document.queryselector('#' + css.escape(id) + ' > img'); the escape() method can also be used for escaping strings, although it escapes characters that don't strictly need to be escaped: var element = document.queryselector('a[href="#' + css.escape(fragment) + '"]'); specification specification status comment css object
model (cssom)the definition of 'css.escape()' in that specification.
CSS numeric factory functions - Web APIs
) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.px() factory function: myelement.attributestylemap.set('margin', css.px(40)); let currentmargin = myelement.attributestylemap.get('margin'); console.log(currentmargin.value, currentmargin.unit); // 40, 'px' specification specification status comment css object
model (cssom)the definition of 'numeric factory functions' in that specification.
CSS - Web APIs
css object
model (cssom)the definition of 'css' in that specification.
CSSGroupingRule - Web APIs
specification specification status comment css object
model (cssom)the definition of 'cssgroupingrule' in that specification.
CSSImageValue - Web APIs
the cssimagevalue interface of the css typed object
model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source.
CSSKeywordValue - Web APIs
the csskeywordvalue interface of the the css typed object
model api creates an object to represent css keywords and other identifiers.
CSSMathProduct - Web APIs
the cssmathproduct interface of the css typed object
model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
CSSMathSum - Web APIs
the cssmathsum interface of the css typed object
model api represents the result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
CSSMathValue - Web APIs
the cssmathvalue interface of the css typed object
model api a base class for classes representing complex numeric values.
CSSNamespaceRule - Web APIs
it has no specific methods: specification specification status comment css object
model (cssom)the definition of 'cssnamespacerule' in that specification.
CSSNumericValue - Web APIs
the cssnumericvalue interface of the css typed object
model api represents operations that all numeric values can perform.
CSSOMString - Web APIs
implementation differences browser domstring or usvstring for cssomstring firefox (gecko) usvstring chrome (blink) usvstring safari (webkit) usvstring edge (edgehtml) - opera (blink) usvstring specifications specification status comment css object
model (cssom)the definition of 'cssomstring' in that specification.
CSSPositionValue - Web APIs
the csspositionvalue interface of the the css typed object
model api represents values for properties that take a position, for example object-position.
CSSPrimitiveValue.getFloatValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getfloatvalue' in that specification.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.getrgbcolorvalue()); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrgbcolorvalue' in that specification.
CSSPrimitiveValue.getRectValue() - Web APIs
example var cs = window.getcomputedstyle(document.getelementbyid("clippeddiv")); var cssvalue = cs.getpropertycssvalue("clip"); console.log(cssvalue.getrectvalue()); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrectvalue' in that specification.
CSSPrimitiveValue.getStringValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getstringvalue' in that specification.
CSSPrimitiveValue.primitiveType - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitivetype); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification.
CSSPrimitiveValue - Web APIs
specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssprimitivevalue' in that specification.
CSSPseudoElement - Web APIs
examples basic example using element.pseudo using pseudo-elements, most
modern browsers will automatically add quotation marks around text inside a <q> element.
CSSRule.cssText - Web APIs
syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status comment css object
model (cssom)the definition of 'cssrule: csstext' in that specification.
CSSRuleList - Web APIs
they are: cssstylesheet property cssrules cssmediarule property cssrules csskeyframesrule property cssrules cssmozdocumentrule property cssrules specifications specification status comment css object
model (cssom)the definition of 'cssrulelist' in that specification.
CSSStyleDeclaration.cssText - Web APIs
example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object
model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
example the following javascript code gets an object containing the computed rgb values of the color css property: var style = window.getcomputedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleSheet.addRule() - Web APIs
therefore, given existing code such as the following: cssstylesheet.addrule(selector, styles, 0); you can rewrite this to use the more standard insertrule() like this: cssstylesheet.insertrule(`${selector} {${styles}}`, 0); specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.addrule()' in that specification.
CSSStyleSheet.cssRules - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.cssrules' in that specification.
CSSStyleSheet.deleteRule() - Web APIs
mystyles.deleterule(0); specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.deleterule()' in that specification.
CSSStyleSheet.ownerRule - Web APIs
errule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } } specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.ownerrule' in that specification.
CSSStyleSheet.removeRule() - Web APIs
mystyles.removerule(0); you can rewrite this to use the standard deleterule() method very easily: mystyles.deleterule(0); specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.removerule()' in that specification.
CSSStyleSheet.rules - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'cssstylesheet.rules' in that specification.
CSSStyleValue - Web APIs
the cssstylevalue interface of the the css typed object
model api is the base class of all css values accessible through the typed om api.
CSSUnitValue - Web APIs
the cssunitvalue interface of the css typed object
model api represents values that contain a single unit type.
CSSUnparsedValue - Web APIs
the cssunparsedvalue interface of the css typed object
model api represents property values that reference custom properties.
CSSValue.cssText - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.csstext); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification.
CSSValue.cssValueType - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
CSSValue - Web APIs
specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvalue' in that specification.
CSSValueList.item() - Web APIs
specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvaluelist.item' in that specification.
CSSValueList.length - Web APIs
specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvaluelist.length' in that specification.
CSSValueList - Web APIs
specifications specification status comment document object
model (dom) level 2 style specificationthe definition of 'cssvalueslist' in that specification.
Managing screen orientation - Web APIs
this lets content adjust its layout using css, based on whether the browser window is in landscape
mode (that is, its width is greater than its height) or portrait
mode (its height is greater than its width).
A basic ray-caster - Web APIs
not exactly a new member of the id software family, but pretty decent considering it's a fully interpreted environment, and i didn't have to worry about memory allocation or video
modes or coding inner routines in assembler or anything.
Compositing and clipping - Web APIs
if we compare clipping paths to the globalcompositeoperation property we've seen above, we see two compositing
modes that achieve more or less the same effect in source-in and source-atop.
CaretPosition - Web APIs
methods caretposition.getclientrect specification specification status comment css object
model (cssom) view modulethe definition of 'caretposition' in that specification.
ChannelMergerNode - Web APIs
number of outputs 1 channel count
mode "max" channel count 2 (not used in the default count
mode) channel interpretation "speakers" constructor channelmergernode() creates a new channelmergernode object instance.
CompositionEvent.data - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'data' in that specification.
CompositionEvent.locale - Web APIs
specifications specification status comment document object
model (dom) level 3 events specification obsolete no longer in the spec, but still supported.
CompositionEvent - Web APIs
working draft document object
model (dom) level 3 events specificationthe definition of 'compositionevent' in that specification.
console - Web APIs
border and its longhand equivalents border-radius box-decoration-break box-shadow clear and float color cursor display font and its longhand equivalents line-height margin outline and its longhand equivalents padding text-* properties such as text-transform white-space word-spacing and word-break writing-
mode note: the console message behaves like an inline element by default.
Console API - Web APIs
the console api spec was created to define consistent behavior, and all
modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions.
ConvolverNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "clamped-max" channel count 1, 2, or 4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance.
CustomElementRegistry.get() - Web APIs
examples customelements.define('my-paragraph', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } }) // return a reference to the my-paragraph constructor let ctor = customelements.get('my-paragraph'); specifications specification status comment html living standardthe definition of 'customelements.get()' in that specification.
CustomElementRegistry - Web APIs
ructor() { // always call super first in constructor super(); // count words in element's parent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({
mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define ...
CustomEvent - Web APIs
this does not include nodes in shadow trees if the shadow root was created with its shadowroot.
mode closed.
DOMImplementationList - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'domimplementationlist' in that specification.
DOMLocator - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'domlocator' in that specification.
DOMObject - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'domobject' in that specification.
DOMUserData - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'domuserdata' in that specification.
DelayNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "max" channel count 2 (not used in the default count
mode) channel interpretation "speakers" constructor delaynode() creates a new instance of an delaynode object instance.
Document.anchors - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'document.anchors' in that specification.
Document.applets - Web APIs
document object
model (dom) level 2 html specificationthe definition of 'document.applets' in that specification.
Document.close() - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.close()' in that specification.
Document.createNSResolver() - Web APIs
see also document.evaluate introduction to using xpath in javascript specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'document.creatensresolver' in that specification.
Document.evaluate() - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'document.evaluate' in that specification.
Document.forms - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.forms' in that specification.
Document.head - Web APIs
trying to assign a value to this property will fail silently or, in strict
mode, throws a typeerror .
Document.images - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.images' in that specification.
Document.importNode() - Web APIs
living standard document object
model (dom) level 2 core specificationthe definition of 'document.importnode()' in that specification.
Document.links - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.links' in that specification.
Document.ononline - Web APIs
the document.online event is fired on the <body> of each page when the browser switches between online and offline
mode.
Document.open() - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.open()' in that specification.
Document.referrer - Web APIs
because this property returns only a string, it doesn't give you document object
model (dom) access to the referring page.
Document.writeln() - Web APIs
living standard document object
model (dom) level 2 html specificationthe definition of 'document.writeln()' in that specification.
Document.xmlVersion - Web APIs
to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html
mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level 4wd ...
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
ffset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status comment css object
model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.fullscreenelementread only returns the element that's currently in full screen
mode for this document.
Element.scroll() - Web APIs
examples // put the 1000th vertical pixel at the top of the element element.scroll(0, 1000); using options: element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment css object
model (cssom) view modulethe definition of 'element.scroll()' in that specification.
Element.scrollBy() - Web APIs
examples // scroll an element element.scrollby(300, 300); using options: element.scrollby({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment css object
model (cssom) view modulethe definition of 'element.scrollby()' in that specification.
Element.scrollHeight - Web APIs
span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status comment css object
model (cssom) view modulethe definition of 'element.scrollheight' in that specification.
Element.scrollIntoView() - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'element.scrollintoview()' in that specification.
Element.scrollLeft - Web APIs
container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object
model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.scrollTo() - Web APIs
examples element.scrollto(0, 1000); using options: element.scrollto({ top: 100, left: 100, behavior: 'smooth' }); specifications specification status comment css object
model (cssom) view modulethe definition of 'element.scrollto()' in that specification.
Element.scrollTop - Web APIs
if you can see this, scrolltop is maxed-out padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment css object
model (cssom) view modulethe definition of 'scrolltop' in that specification.
Element.scrollWidth - Web APIs
flowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status comment css object
model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.shadowRoot - Web APIs
syntax var shadowroot = element.shadowroot; value a shadowroot object instance, or null if the associated shadow root was attached with its
mode set to closed.
ElementCSSInlineStyle.style - Web APIs
note the presence of the value bold for font-weight in the computed style and the absence of it in the element's style property specifications specification status comment css object
model (cssom)the definition of 'the elementcssinlinestyle.style property' in that specification.
ElementCSSInlineStyle - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'htmlorforeignelement' in that specification.
Event.bubbles - Web APIs
living standard document object
model (dom) level 2 events specificationthe definition of 'event.bubbles' in that specification.
Event.cancelable - Web APIs
living standard document object
model (dom) level 2 events specificationthe definition of 'event.cancelable' in that specification.
Event.isTrusted - Web APIs
living standard document object
model (dom) level 3 events specificationthe definition of 'trusted events' in that specification.
Event.preventDefault() - Web APIs
living standard document object
model (dom) level 2 events specificationthe definition of 'event.preventdefault()' in that specification.
Event.target - Web APIs
obsolete document object
model (dom) level 2 events specificationthe definition of 'event.target' in that specification.
Event.type - Web APIs
living standard document object
model (dom) level 2 events specificationthe definition of 'event.type' in that specification.
Event - Web APIs
this does not include nodes in shadow trees if the shadow root was created with its shadowroot.
mode closed.
EventListener - Web APIs
document object
model (dom) level 2 events specificationthe definition of 'eventlistener' in that specification.
EventSource - Web APIs
constructor eventsource() creates a new eventsource to handle receiving server-sent events from a specified url, optionally in credentials
mode.
ExtendableEvent - Web APIs
resources to pre-fetch:', urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.addall(urlstoprefetch.map(function(urltoprefetch) { return new request(urltoprefetch, {
mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); important: when fetching resources, it's very important to use {
mode: 'no-cors'} if there is any chance that the resources are served off of a server that doesn't support cors.
Fetch basic concepts - Web APIs
when a request or response object is created, it has an associated headers object whose guard is set as summarized below: new object's type creating constructor guard setting of associated headers object request request() request request() with
mode of no-cors request-no-cors response response() response error() or redirect() methods immutable a header's guard affects the set(), delete(), and append() methods which change the header's contents.
Using files from web applications - Web APIs
consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* separate rule for compatibility, :focus-within is required on
modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click().
FocusEvent() - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'focusevent()' in that specification.
FocusEvent - Web APIs
working draft document object
model (dom) level 3 events specificationthe definition of 'focusevent' in that specification.
GainNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "max" channel count 2 (not used in the default count
mode) channel interpretation "speakers" constructor gainnode() creates a new instance of a gainnode object.
Gamepad.buttons - Web APIs
the value property is a floating point value used to enable representing analog buttons, such as the triggers on many
modern gamepads.
GamepadButton.value - Web APIs
the gamepadbutton.value property of the gamepadbutton interface returns a double value used to represent the current state of analog buttons on many
modern gamepads, such as the triggers.
GamepadButton - Web APIs
properties gamepadbutton.value read only a double value used to represent the current state of analog buttons, such as the triggers on many
modern gamepads.
Using the Gamepad API - Web APIs
the value property is a floating point value used to enable representing analog buttons, such as the triggers on many
modern gamepads.
GeometryUtils - Web APIs
geometryutils.convertquadfromnode() fixme: needs a description geometryutils.convertrectfromnode() fixme: needs a description geometryutils.convertpointfromnode() fixme: needs a description specifications specification status comment css object
model (cssom) view modulethe definition of 'geometryutils' in that specification.
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-
mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; event.preventdefault(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } cons...
HTMLCollection - Web APIs
note: this interface is called htmlcollection for historical reasons (before the
modern dom, collections implementing this interface could only have html elements as their items).
HTMLElement.click() - Web APIs
eckbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object
model (dom) level 2 html specification obsolete initial definition.
HTMLElement.hidden - Web APIs
the hidden property applies to all presentation
modes and should not be used to hide content that is meant to be directly accessible to the user.
HTMLElement.lang - Web APIs
example // this snippet compares the base language and // redirects to another url based on language if (document.documentelement.lang === "en") { window.location.href = "some_document.html.en"; } else if (document.documentelement.lang === "ru") { window.location.href = "some_document.html.ru"; } specification specification status comment document object
model (dom) level 2 html specificationthe definition of 'lang' in that specification.
HTMLElement.offsetLeft - Web APIs
ox"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status comment css object
model (cssom) view modulethe definition of 'offsetleft' in that specification.
HTMLElement.offsetTop - Web APIs
example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status comment css object
model (cssom) view modulethe definition of 'offsettop' in that specification.
HTMLImageElement.align - Web APIs
syntax htmlimageelement.align = align
mode; align
mode = htmlimageelement.align; value a domstring specifying one of the following strings which set the alignment
mode for the image.
HTMLImageElement.border - Web APIs
the width, specifically, is controlled using the writing-
mode aware border-block-start-width, border-block-end-width, border-inline-start-width, and border-inline-end-width properties.
HTMLImageElement.complete - Web APIs
examples consider a photo library app that provides the ability to open images into a lightbox
mode for improved viewing as well as editing of the image.
HTMLImageElement.longDesc - Web APIs
this can be easily converted into
modern html: <a href="image-descriptions/taco-tuesday.html"> <img src="taco-tuesday.jpg"> </a> with that, the image is a link to the html file describing the image in more detail.
HTMLImageElement.x - Web APIs
the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object
model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object
model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLElement.blur() - Web APIs
recommendation document object
model (dom) level 2 html specificationthe definition of 'blur' in that specification.
HashChangeEvent - Web APIs
ollowing options: window.onhashchange = funcref; or <body onhashchange="funcref();"> or window.addeventlistener("hashchange", funcref, false); basic example function locationhashchanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } } window.addeventlistener('hashchange', locationhashchanged); polyfill there are several fallback scripts listed on the
modernizr github page.
History.scrollRestoration - Web APIs
llrestoration if (scrollrestoration === 'manual') { console.log('the location on the page is not restored, user will need to scroll manually.'); } prevent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status comment html living standardthe definition of 'scroll restoration
mode' in that specification.
IDBIndex.name - Web APIs
you can only rename indexes during upgrade transactions; that is, when the
mode is "versionchange".
FileHandle.open() - Web APIs
syntax var myfile = instanceoffilehandle.open(
mode); parameters
mode a string that specifies the writing
mode for the file.
IDBMutableFile - Web APIs
summary the idbmutablefile interface provides access in read or write
mode to a file, dealing with all the necessary locks.
IDBObjectStore.add() - Web APIs
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.
IDBObjectStore.clear() - Web APIs
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.
IDBObjectStore.name - Web APIs
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".
IDBTransaction.oncomplete - Web APIs
you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush
mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
IIRFilterNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "max" channel count same as on the input channel interpretation "speakers" typically, it's best to use the biquadfilternode interface to implement higher-order filters.
ImageCapture.getPhotoSettings() - Web APIs
syntax const settingspromise = imagecapture.getphotosettings() return value a promise that resolves with a photosettings object containing the following properties: filllight
mode: the flash setting of the capture device, one of "auto", "off", or "on".
InputEvent.isComposing - Web APIs
syntax var bool = event.iscomposing; example var inputevent = new inputevent('syntheticinput', false); console.log(inputevent.iscomposing); // return false specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'inputevent.iscomposing' in that specification.
InstallEvent - Web APIs
resources to pre-fetch:', urlstoprefetch); event.waituntil( caches.open(current_caches['prefetch']).then(function(cache) { return cache.addall(urlstoprefetch.map(function(urltoprefetch) { return new request(urltoprefetch, {
mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); specifications specification status comment service workers working draft as of may 2015, the install event is an instance of extendableevent rather...
Intersection Observer API - Web APIs
a block's clipping is determined based on the intersection of the two blocks and the clipping
mode (if any) specified by the overflow property.
KeyboardEvent() - Web APIs
document object
model (dom) level 3 events specificationthe definition of 'keyboardevent()' in that specification.
KeyboardEvent.altKey - Web APIs
</p> </body> </html> specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.altkey' in that specification.
KeyboardEvent.charCode - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification.
KeyboardEvent.ctrlKey - Web APIs
){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.ctrlkey' in that specification.
KeyboardEvent.isComposing - Web APIs
working draft document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
KeyboardEvent.key - Web APIs
working draft document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.key' in that specification.
KeyboardEvent.keyCode - Web APIs
} if (handled) { // suppress "double action" if event handled event.preventdefault(); } }, true); specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
KeyboardEvent.location - Web APIs
syntax var location = event.location; example function keyevent(event) { console.log("location of key pressed: " + event.location); } specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.location' in that specification.
KeyboardEvent.metaKey - Web APIs
syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification.
KeyboardEvent.repeat - Web APIs
syntax var repeat = event.repeat; return value boolean specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.repeat' in that specification.
KeyboardEvent.shiftKey - Web APIs
+ "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.shiftkey' in that specification.
KeyboardEvent.which - Web APIs
); } function keydown(evt) { alert("onkeydown handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </html> specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
Keyboard API - Web APIs
} keyboard locking richly interactive web pages, games, and remote-streaming experiences often require access to special keys and keyboard shortcuts while in full-screen
mode.
Location: search - Web APIs
modern browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring.
Location - Web APIs
modern browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring.
Locks.name - Web APIs
navigator.locks.request("net_db_sync", show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock
mode is: ${lock.
mode}`); } specifications specification status comment web locks apithe definition of 'name' in that specification.
LockManager.query() - Web APIs
example const state = await navigator.locks.query(); for (const lock of state.held) { console.log(`held lock: name ${lock.name},
mode ${lock.
mode}`); } for (const request of state.pending) { console.log(`requested lock: name ${request.name},
mode ${request.
mode}`); } specifications specification status comment web locks apithe definition of 'query()' in that specification.
LockedFile - Web APIs
lockedfile.
mode read only the
mode for accessing the file; can be readonly or readwrite.
Long Tasks API - Web APIs
the 50 ms threshold comes from the rail
model, in particular the "response: process events in under 50 ms" section.
MediaList.mediaText - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object
model (cssom)the definition of 'mediatext' in that specification.
MediaList - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object
model (cssom)the definition of 'medialist' in that specification.
MediaQueryList.addListener() - Web APIs
narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object
model (cssom) view modulethe definition of 'addlistener' in that specification.
MediaQueryList.matches - Web APIs
ventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status comment css object
model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryList.media - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'media' in that specification.
MediaQueryList.onchange - Web APIs
ntlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status comment css object
model (cssom) view modulethe definition of 'onchange' in that specification.
MediaQueryList.removeListener() - Web APIs
dcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status comment css object
model (cssom) view modulethe definition of 'removelistener' in that specification.
MediaQueryList - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mediaquerylist' in that specification.
MediaQueryListEvent.MediaQueryListEvent() - Web APIs
examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status comment css object
model (cssom) view modulethe definition of 'mediaquerylistevent()' in that specification.
MediaQueryListEvent.matches - Web APIs
arrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object
model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryListEvent.media - Web APIs
n 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment css object
model (cssom) view modulethe definition of 'media' in that specification.
MediaQueryListEvent - Web APIs
narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object
model (cssom) view modulethe definition of 'mediaquerylistevent' in that specification.
MediaQueryListListener - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mediaquerylistlistener' in that specification.
MediaStreamAudioDestinationNode - Web APIs
number of inputs 1 number of outputs 0 channel count 2 channel count
mode "explicit" channel count interpretation "speakers" constructor mediastreamaudiodestinationnode.mediastreamaudiodestinationnode() creates a new mediastreamaudiodestinationnode object instance.
Using the MediaStream Recording API - Web APIs
instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across
modern browsers too, even going back to internet explorer 9.
MediaTrackConstraints.deviceId - Web APIs
an exception to the rule that device ids are the same across browsing sessions: private browsing
mode will use a different id, and will change it each browsing session.
MediaTrackSettings.deviceId - Web APIs
an exception to the rule that device ids are the same across browsing sessions: private browsing
mode will use a different id, and will change it each browsing session.
Media Source API - Web APIs
creating assets that work with mse in
modern browsers is a laborious process, taking significant time, computing power, and energy.
Microdata DOM API - Web APIs
itle="hedral, age 18 months"> </section> ...it would result in the following output: name http://example.com/fn desc http://example.com/color img (the duplicate occurrence of "http://example.com/color" is not included in the list.) htmlpropertiescollection the htmlpropertiescollection interface is used for collections of elements that add name-value pairs to a particular item in the microdata
model.
Microsoft API extensions - Web APIs
deoelement.mszoom htmlaudioelement.msaudiocategory htmlaudioelement.msaudiodevicetype htmlmediaelement.mscleareffects() htmlmediaelement.msinsertaudioeffect() mediaerror.msextendedcode msgraphicstrust msgraphicstruststatus msisboxed msplaytodisabled msplaytopreferredsourceuri msplaytoprimary msplaytosource msrealtime mssetmediaprotectionmanager mssetvideorectangle msstereo3dpacking
mode msstereo3drender
mode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssite
modeevent mssite
modejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselemen...
MouseEvent.buttons - Web APIs
s(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.getModifierState() - Web APIs
specifications specification status comment document object
model (dom) level 3 events specificationthe definition of 'getmodifierstate()' in that specification.
MouseEvent.offsetX - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.offsetY - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.pageX - Web APIs
.box { width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object
model (cssom) view modulethe definition of 'pagex' in that specification.
MouseEvent.pageY - Web APIs
examples var pagey = event.pagey; specifications specification status comment css object
model (cssom) view modulethe definition of 'pagey' in that specification.
MouseEvent.x - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent.x' in that specification.
MouseEvent.y - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'mouseevent.y' in that specification.
MouseScrollEvent - Web APIs
constants delta
modes constant value description horizontal_axis 0x01 the event is caused by horizontal wheel operation.
MutationEvent - Web APIs
the mutationevent interface provides event properties that are specific to modifications to the document object
model (dom) hierarchy and nodes.
NameList - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'namelist' in that specification.
navigator.hardwareConcurrency - Web APIs
modern computers have multiple physical processor cores in their cpu (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques.
NavigatorConcurrentHardware - Web APIs
modern computers have multiple physical cores in their cpu (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques.
Node.getRootNode() - Web APIs
<script> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(child.getrootnode().nodename); // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({
mode:'open'}); shadowroot.innerhtml = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log...
Node.getUserData() - Web APIs
example var d = document.setuserdata('key', 15, null); console.log(document.getuserdata('key')); // 15 specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.getuserdata()' in that specification.
Node.isConnected - Web APIs
examples standard dom a standard dom example: let test = document.createelement('p'); console.log(test.isconnected); // returns false document.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({
mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.
Node.isSameNode() - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'node.issamenode()' in that specification.
Node.setUserData() - Web APIs
ole.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object element]::[object element] console.log(d.documentelement.getuserdata('key')); // 15 var e = document.importnode(d.documentelement, true); // causes handler to be called console.log(e.getuserdata('key')); // null since user data is not copied specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'node.setuserdata()' in that specification.
NodeFilter.acceptNode() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'nodefilter.acceptnode()' in that specification.
NodeFilter - Web APIs
living standard document object
model (dom) level 2 traversal and range specificationthe definition of 'nodefilter' in that specification.
NodeIterator.detach() - Web APIs
living standard transformed in a no-op document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.detach' in that specification.
NodeIterator.expandEntityReferences - Web APIs
syntax expand = nodeiterator.expandentityreferences; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); expand = nodeiterator.expandentityreferences; specifications specification status comment document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.expandentityreferences' in that specification.
NodeIterator - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator' in that specification.
OscillatorNode - Web APIs
its basic property defaults (see audionode for definitions) are: number of inputs 0 number of outputs 1 channel count
mode max channel count 2 (not used in the default count
mode) channel interpretation speakers constructor oscillatornode() creates a new instance of an oscillatornode object, optionally providing an object specifying default values for the node's properties.
PannerNode.PannerNode() - Web APIs
options optional a panneroptions dictionary object defining the properties you want the pannernode to have (it also inherits the options defined in the audionodeoptions dictionary.): panning
model: the pannernode.panning
model you want the pannernode to have (the default is equalpower.) distance
model: the pannernode.distance
model you want the pannernode to have (the default is inverse.) positionx: the pannernode.positionx you want the pannernode to have (the default is 0.) positiony: the pannernode.positiony you want the pannernode to have (the default is 0.) positionz: the pannern...
PannerNode.coneInnerAngle - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.coneOuterAngle - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.coneOuterGain - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.orientationX - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.orientationY - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.orientationZ - Web APIs
between -1 and 1 const x = math.cos(radians); const z = math.sin(radians); // we hard-code the y component to 0, as y is the axis of rotation return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panning
model = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size ...
PannerNode.positionY - Web APIs
const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panning
model = 'hrtf'; panner.positiony.setvalueattime(1, context.currenttime + 1); panner.positiony.setvalueattime(-1, context.currenttime + 2); panner.positiony.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positiony' in that specificat...
PannerNode.positionZ - Web APIs
const context = new audiocontext(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.panning
model = 'hrtf'; panner.positionz.setvalueattime(1, context.currenttime + 1); panner.positionz.setvalueattime(-1, context.currenttime + 2); panner.positionz.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status comment web audio apithe definition of 'positionz' in that specificat...
PannerNode.setOrientation() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
PannerNode.setPosition() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
PannerNode.setVelocity() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panning
model = 'hrtf'; panner.distance
model = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currenttime); panner.orientationy.setvalueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, a...
RTCDataChannel.send() - Web APIs
for example, if one peer is a
modern browser that supports using the eor (end of record) flag to indicate when a received message is the last piece of a multi-part object sent using send().
Range.getClientRects() - Web APIs
syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); rectlist = range.getclientrects(); specification specification status comment css object
model (cssom) view modulethe definition of 'range.getclientrects()' in that specification.
Range.insertNode() - Web APIs
living standard no change document object
model (dom) level 2 traversal and range specificationthe definition of 'range.insertnode()' in that specification.
Range.selectNode() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.selectnode()' in that specification.
Range.setEnd() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setend()' in that specification.
Range.setEndAfter() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setendafter()' in that specification.
Range.setEndBefore() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setendbefore()' in that specification.
Range.setStart() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setstart()' in that specification.
Range.setStartAfter() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setstartafter()' in that specification.
Range.setStartBefore() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.setstartbefore()' in that specification.
Range.startContainer - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.startcontainer' in that specification.
Range.startOffset - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.startoffset' in that specification.
Range.toString() - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'range.tostring()' in that specification.
Request.headers - Web APIs
iable: var myrequest = new request('flowers.jpg'); var myheaders = myrequest.headers; // headers {} to add a header to the headers object we use headers.append; we then create a new request along with a 2nd init parameter, passing headers in as an init option: var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders,
mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg', myinit); mycontenttype = myrequest.headers.get('content-type'); // returns 'image/jpeg' specifications specification status comment fetchthe definition of 'headers' in that specification.
Response.redirected - Web APIs
erhtml = "unexpected redirect"; } else { elem.innerhtml = ""; } return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); disallowing redirects because using redirected to manually filter out redirects can allow forgery of redirects, you should instead set the redirect
mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status comment fetchth...
SVGAngle - Web APIs
every svgangle object operates in one of two
modes: reflect the base value of a reflected animatable attribute (being exposed through the baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle().
Screen.availHeight - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'screen.availheight' in that specification.
Screen.availWidth - Web APIs
syntax var width = window.screen.availwidth example var screenavailwidth = window.screen.availwidth; console.log(screenavailwidth); specifications specification status comment css object
model (cssom) view modulethe definition of 'screen.availwidth' in that specification.
Screen.colorDepth - Web APIs
syntax bitdepth = window.screen.colordepth; example // check the color depth of the screen if ( window.screen.colordepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment css object
model (cssom) view modulethe definition of 'screen.colordepth' in that specification.
Screen.height - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'screen.height' in that specification.
Screen.pixelDepth - Web APIs
syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status comment css object
model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
Screen.width - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'screen.width' in that specification.
Screen - Web APIs
void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status comment css object
model (cssom) view modulethe definition of 'screen' in that specification.
Slottable: assignedSlot - Web APIs
syntax var slotelement = elementinstance.assignedslot value an htmlslotelement instance, or null if the element is not assigned to a slot, or if the associated shadow root was attached with its
mode set to closed (see element.attachshadow for further details).
SourceBuffer - Web APIs
sourcebuffer.
mode controls how the order of media segments in the sourcebuffer is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.
SpeechRecognitionResultList - Web APIs
the speechrecognitionresultlist interface of the web speech api represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous
mode.
StereoPannerNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "clamped-max" channel count 2 channel interpretation "speakers" constructor stereopannernode() creates a new instance of a stereopannernode object.
StorageManager.persist() - Web APIs
the persist() method of the storagemanager interface requests permission to use persistent storage, and returns a promise that resolves to true if permission is granted and box
mode is persistent, and false otherwise.
StylePropertyMap - Web APIs
the stylepropertymap interface of the the css typed object
model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration.
StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the css typed object
model api provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration.
Stylesheet.href - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'stylesheet: href' in that specification.
StyleSheet.media - Web APIs
son.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object
model (cssom)the definition of 'stylesheet: media' in that specification.
StyleSheet.ownerNode - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'stylesheet: ownernode' in that specification.
StyleSheet.title - Web APIs
specifications specification status comment css object
model (cssom)the definition of 'stylesheet: title' in that specification.
StyleSheet.type - Web APIs
syntax string = stylesheet.type example mystylesheet.type = 'text/css'; specifications specification status comment css object
model (cssom)the definition of 'stylesheet: type' in that specification.
StyleSheetList - Web APIs
ignoring...', stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status comment css object
model (cssom)the definition of 'cssstylesheetlist' in that specification.
Text.replaceWholeText() - Web APIs
specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'text' in that specification.
Text.wholeText - Web APIs
document object
model (dom) level 3 core specificationthe definition of 'text.wholetext' in that specification.
TextDecoder - Web APIs
textdecoder.prototype.fatalread only is a boolean indicating whether the error
mode is fatal.
TextRange - Web APIs
therefore, the best way is to deal with both at the same time, that is, try to use textrange
mode when the standard interface is not supported, but do not regard it as the only choice.
TreeWalker.currentNode - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.currentnode' in that specification.
TreeWalker.expandEntityReferences - Web APIs
syntax expand = treewalker.expandentityreferences; example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); expand = treewalker.expandentityreferences; specifications document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.expandentityreferences' in that specification.
TreeWalker.filter - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.filter' in that specification.
TreeWalker.firstChild() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.firstchild' in that specification.
TreeWalker.lastChild() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.lastchild' in that specification.
TreeWalker.nextNode() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.nextnode' in that specification.
TreeWalker.nextSibling() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.nextsibling' in that specification.
TreeWalker.parentNode() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.parentnode' in that specification.
TreeWalker.previousNode() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previousnode' in that specification.
TreeWalker.previousSibling() - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.previoussibling' in that specification.
TreeWalker.root - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.root' in that specification.
TreeWalker.whatToShow - Web APIs
living standard no change from document object
model (dom) level 2 traversal and range specification document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker.whattoshow' in that specification.
TreeWalker - Web APIs
document object
model (dom) level 2 traversal and range specificationthe definition of 'treewalker' in that specification.
TypeInfo - Web APIs
constants constant value derivation_restriction 1 derivation_extension 2 derivation_union 4 derivation_list 8 specifications specification status comment document object
model (dom) level 3 core specificationthe definition of 'typeinfo' in that specification.
UIEvent() - Web APIs
document object
model (dom) level 3 events specificationthe definition of 'uievent()' in that specification.
URL.search - Web APIs
modern browsers provide the url.searchparams property to make it easy to parse out the parameters from the query string.
URL.search - Web APIs
modern browsers provide the url.searchparams property to make it easy to parse out the parameters from the query string.
USBAlternateInterface - Web APIs
an interface includes one or more alternate settings which can configure a set of endpoints based on the operating
mode of the device.
VTTCue - Web APIs
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.
mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); }); result chrome: please open in jsfiddle to view the live sample.
Vibration API - Web APIs
most
modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake.
WakeLockSentinel - Web APIs
this can happen if the document becomes inactive or looses visibility, if the device is low on power or the user turns on a power save
mode.
WaveShaperNode - Web APIs
number of inputs 1 number of outputs 1 channel count
mode "max" channel count 2 (not used in the default count
mode) channel interpretation "speakers" constructor waveshapernode() creates a new instance of an waveshapernode object.
WebGLRenderingContext.getParameter() - Web APIs
rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr gl.cull_face glboolean gl.cull_face_
mode glenum gl.front, gl.back or gl.front_and_back.
Animating objects with WebGL - Web APIs
after translating to the initial drawing position for the square, we apply the rotation like this: mat4.rotate(
modelviewmatrix, // destination matrix
modelviewmatrix, // matrix to rotate squarerotation, // amount to rotate in radians [0, 0, 1]); // axis to rotate around this rotates the
modelviewmatrix by the current value of squarerotation, around the z axis.
Creating 3D objects using WebGL - Web APIs
finally, let's replace our variable squarerotation by cuberotation and add a second rotation around the x axis: mat4.rotate(
modelviewmatrix,
modelviewmatrix, cuberotation * .7, [0, 1, 0]); at this point, we now have an animated cube rotating, its six faces rather vividly colored.
Using shaders to apply color in WebGL - Web APIs
to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: const vssource = ` attribute vec4 avertexposition; attribute vec4 avertexcolor; uniform mat4 u
modelviewmatrix; uniform mat4 uprojectionmatrix; varying lowp vec4 vcolor; void main(void) { gl_position = uprojectionmatrix * u
modelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying to the fragment shader.
WebGL: 2D and 3D graphics for the web - Web APIs
advanced tutorials webgl
model view projection a detailed explanation of the three core matrices that are typically used to represent a 3d object view: the
model, view and projection matrices.
Web Video Text Tracks Format (WebVTT) - Web APIs
example 20 - voice tag <v bob>text</v> interfaces there are two interfaces or apis used in webvtt which are: vttcue interface it is used for providing an interface in document object
model api, where different attributes supported by it can be used to prepare and alter the cues in number of ways.
Rendering and the WebXR frame animation callback - Web APIs
hardare vertical refresh rate when the browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other relevant data, such as
models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer.
WebXR Device API - Web APIs
targeting and hit detection how to use an input source's targeting ray
mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.
Basic concepts behind Web Audio API - Web APIs
spatialisations an audio spatialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to
model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio.
Using IIR filters - Web APIs
browser support iir filters are supported well across
modern browsers, although they have been implemented more recently than some of the more longstanding web audio api features, like biquad filters.
Web Authentication API - Web APIs
these include: verifying that the challenge is the same as the challenge that was sent ensuring that the origin was the origin expected validating that the signature over the clientdatahash and the attestation using the certificate chain for that specific
model of the authenticator a complete list of validation steps can be found in the web authentication api specification.
Using the Web Speech API - Web APIs
generally, the default speech recognition system available on the device will be used for the speech recognition — most
modern oses have a speech recognition system for issuing voice commands.
Web Speech API - Web APIs
speechrecognitionresultlist represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous
mode.
Using the Web Storage API - Web APIs
for example, safari browser in private browsing
mode gives us an empty localstorage object with a quota of zero, effectively making it unusable.
Window.customElements - Web APIs
omelements; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
Window.devicePixelRatio - Web APIs
px solid #22d; margin: 0 auto; padding: 0; background-color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'window.devicepixelratio' in that specification.
Window.innerHeight - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.innerheight' in that specification.
Window.innerWidth - Web APIs
he width of the frame viewport within a frameset var intframewidth = self.innerwidth; // this will return the width of the viewport of the closest frameset var intframesetwidth = parent.innerwidth; // this will return the width of the viewport of the outermost frameset var intouterframesetwidth = top.innerwidth; specification specification status comment css object
model (cssom) view modulethe definition of 'window.innerwidth' in that specification.
Window.matchMedia() - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'window.matchmedia()' in that specification.
Window.moveBy() - Web APIs
function budge() { moveby(10, -10); } specification specification status comment css object
model (cssom) view modulethe definition of 'window.moveby()' in that specification.
Window.moveTo() - Web APIs
function origin() { window.moveto(0, 0); } specification specification status comment css object
model (cssom) view modulethe definition of 'window.moveto()' in that specification.
Window.name - Web APIs
modern web applications hosting sensitive data should, however, not rely on window.name for cross-domain messaging but instead utilize the postmessage api.
Privileged features - Web APIs
the dependent feature is currently under revision to be removed (bug 214867) in msie 6, the nearest equivalent to this feature is the show
modelessdialog() method.
Window.opener - Web APIs
in
modern browsers, a rel="noopener noreferrer" attribute on the originating <a> element will prevent the window.opener reference from being set, in which case this property will return null.
Window.outerHeight - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.outerheight' in that specification.
Window.outerWidth - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.outerwidth' in that specification.
Window.pageXOffset - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.pagexoffset' in that specification.
Window.pageYOffset - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.pageyoffset' in that specification.
Window.prompt() - Web APIs
method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support 12firefox full support 1ie full support 4notes full support 4notes notes this function has no effect in the
modern ui/metro version of internet explorer for windows 8.
Window.resizeBy() - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'window.resizeby()' in that specification.
Window.resizeTo() - Web APIs
function quarter() { window.resizeto( window.screen.availwidth / 2, window.screen.availheight / 2 ); } specification specification status comment css object
model (cssom) view modulethe definition of 'window.resizeto()' in that specification.
Window.screen - Web APIs
syntax let screenobj = window.screen; example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specifications specification status comment css object
model (cssom) view modulethe definition of 'window.screen' in that specification.
Window.screenLeft - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment css object
model (cssom) view modulethe definition of 'window.screenleft' in that specification.
Window.screenTop - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status comment css object
model (cssom) view modulethe definition of 'window.screentop' in that specification.
Window.scroll() - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.scroll()' in that specification.
Window.scrollBy() - Web APIs
specification specification status comment css object
model (cssom) view modulethe definition of 'window.scrollby()' in that specification.
Window.scrollTo() - Web APIs
specifications specification status comment css object
model (cssom) view modulethe definition of 'window.scroll()' in that specification.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
k(() => { this._setdata(this._cache[url]); this.dispatchevent(new event("load")); }); } else { fetch(url).then(res => res.arraybuffer()).then(data => { this._cache[url] = data; this._setdata(data); this.dispatchevent(new event("load")); }); } }; when queuemicrotask() isn't available the code below is basically a monkey-patch for queuemicrotask() for
modern engines.
Using XMLHttpRequest in IE6 - Web APIs
in all
modern browsers, 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 ...
XMLHttpRequest() - Web APIs
non-standard firefox syntax firefox 16 added a non-standard parameter to the constructor that can enable anonymous
mode (see bug 692677).
XPathEvaluator.createExpression() - Web APIs
utput></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.createexpression()' in that specification.
XPathEvaluator.createNSResolver() - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.creatensresolver()' in that specification.
XPathEvaluator.evaluate() - Web APIs
tml <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div", document, null, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.evaluate()' in that specification.
XPathEvaluator - Web APIs
utput></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification.
XPathException.code - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathexception' in that specification.
XPathException - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathexception' in that specification.
XPathExpression.evaluate() - Web APIs
utput></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathexpression.evaluate()' in that specification.
XPathExpression - Web APIs
<output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification.
XPathNSResolver - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathnsresolver' in that specification.
XPathResult.booleanValue - Web APIs
html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var result = document.evaluate(xpath, document, null, xpathresult.boolean_type, null); document.queryselector("output").textcontent = result.booleanvalue; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.booleanvalue' in that specification.
XPathResult.invalidIteratorState - Web APIs
"invalid" : "valid"; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.invaliditeratorstate' in that specification.
XPathResult.iterateNext() - Web APIs
t></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.iteratenext()' in that specification.
XPathResult.numberValue - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "count(//div)"; var result = document.evaluate(xpath, document, null, xpathresult.number_type, null); document.queryselector("output").textcontent = result.numbervalue; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that specification.
XPathResult.resultType - Web APIs
put></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); document.queryselector("output").textcontent = result.resulttype >= xpathresult.unordered_node_iterator_type && result.resulttype <= xpathresult.first_ordered_node_type; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.resulttype' in that specification.
XPathResult.singleNodeValue - Web APIs
t having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var result = document.evaluate(xpath, document, null, xpathresult.first_ordered_node_type, null); document.queryselector("output").textcontent = result.singlenodevalue.localname; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.singlenodevalue' in that specification.
XPathResult.snapshotItem() - Web APIs
valuate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotitem()' in that specification.
XPathResult.snapshotLength - Web APIs
html <div>xpath example</div> <div>number of matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotlength' in that specification.
XPathResult.stringValue - Web APIs
html <div>xpath example</div> <div>text content of the <div> above: <output></output></div> javascript var xpath = "//div/text()"; var result = document.evaluate(xpath, document, null, xpathresult.string_type, null); document.queryselector("output").textcontent = result.stringvalue; result specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that specification.
XPathResult - Web APIs
specifications specification status comment document object
model (dom) level 3 xpath specificationthe definition of 'xpathresult' in that specification.
XRHandedness - Web APIs
with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate
model positioned and formed for the correct hand.
XRInputSource.handedness - Web APIs
with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate
model positioned and formed for the correct hand.
XRInputSourceArray.entries() - Web APIs
let sources = xrsession.inputsources; for (let input of sources.entries()) { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetray
mode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } } for each input in the llist, gamepad inputs are dispatched to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we look for tr...
XRInputSourceArray.forEach() - Web APIs
let inputsources = xrsession.inputsources; inputsources.foreach((input) => { if (input.gamepad) { checkgamepad(input.gamepad); } else { if (input.targetray
mode === "tracked-pointer" && input.handedness === player.handedness) { /* handle main hand controller */ handlemainhandinput(input); } else { /* handle other inputs */ } } }); for each input in the llist, the callback dispatches gamepad inputs to a checkgamepad() with the input's gamepad object, taken from its gamepad property, as an input for other devices, we ...
XRPose.transform - Web APIs
xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetray
mode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRRenderState - Web APIs
inlineverticalfieldofview read only the default vertical field of view, defined in radians, to use when the session is in inline
mode.
XRSession.onselect - Web APIs
xrsession.onselect = event => { let source = event.inputsource; if (source.handedness == user.handedness) { if (source.targetray
mode == "tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession.renderState - Web APIs
the information provided covers the minimum and maximum distance at which to render objects, the vertical field of view to use when rendering the in the inline session
mode, and the xrwebgllayer to render into for inline composition.
XRSession: selectend event - Web APIs
xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetray
mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptra...
XRSession: selectstart event - Web APIs
xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetray
mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.matrix); break; case "selectend": mystoptra...
XRSession: squeezeend event - Web APIs
xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetray
mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystop...
XRSession: squeezestart event - Web APIs
xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.inputsource; let targetobj = null; if (source.targetray
mode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypose.matrix); break; case "squeezeend": mystop...
XRViewerPose.views - Web APIs
this array's length may potentially vary over the lifetime of the xrsession (for example, if the viewer enables or disables stereo
mode on their xr output device).
XRWebGLLayer() - Web APIs
the browser selects the anti-aliasing method to use; there is no support for requesting a specific
mode yet.
XRWebGLLayer.antialias - Web APIs
usage notes since this is a read-only property, you can set the antialiasing
mode only when initially creating the xrwebgllayer, by specifying the antialias object in the xrwebgllayer() constructor's layerinit parameter.
XRWebGLLayerInit - Web APIs
the browser selects the anti-aliasing method to use; there is no support for requesting a specific
mode yet.
Introduction - Web APIs
however, it has several limitations, such as lack of programming structures and ability to create complex layout
models.
ARIA guides - Accessibility
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
in windows eyes supports live regions since version 8.0 "for use outside of browse
mode for microsoft internet explorer and mozilla firefox".
Using the article role - Accessibility
possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events should switch to document browsing
mode, as opposed to passing keyboard events through to the web application.
ARIA: article role - Accessibility
inside an application or other widget that causes screen readers and other assistive technologies to be in pass-through
mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content.
ARIA: dialog role - Accessibility
g1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by screen readers operating in a non-virtual
mode.
Alerts - Accessibility
the function is simple: it looks for an element with id “alert”, and if found, removes that from the document object
model.
Keyboard-navigable JavaScript widgets - Accessibility
the following table describes tabindex behavior in
modern browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.).
Keyboard - Accessibility
in such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse
mode").
Operable - Accessibility
understanding target size 2.5.6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different
modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input devices.
Accessibility
when the web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (w3c - accessibility) key tutorials the mdn accessibility learning area contains
modern, up-to-date tutorials covering accessibility essentials: what is accessibility?
::first-letter (:first-letter) - CSS: Cascading Style Sheets
s, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-
mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, lette...
::first-line (:first-line) - CSS: Cascading Style Sheets
caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-
mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
::part() - CSS: Cascading Style Sheets
ow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({
mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
::placeholder - CSS: Cascading Style Sheets
<label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast
mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast
mode.
::slotted() - CSS: Cascading Style Sheets
-occupation">occupation missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({
mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans...
:defined - CSS: Cascading Style Sheets
in this demo we define a very simple trivial custom element: customelements.define('simple-custom', class extends htmlelement { constructor() { super(); let divelem = document.createelement('div'); divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({
mode: 'open'}) .appendchild(divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first include the following rules: // give the two elements distinctive backgrounds p { background: yellow; } simple-custom { background: cy...
:host() - CSS: Cascading Style Sheets
tors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({
mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer)...
:host-context() - CSS: Cascading Style Sheets
tors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({
mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer)...
:host - CSS: Cascading Style Sheets
tors <a href="#"><context-span>example</context-span></a></h1> inside the element's constructor, we create style and span elements, fill the span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let span = document.createelement('span'); span.textcontent = this.textcontent; const shadowroot = this.attachshadow({
mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer)...
@supports - CSS: Cascading Style Sheets
@supports (display: grid) { div { display: grid; } } @supports not (display: grid) { div { float: right; } } in javascript, @supports can be accessed via the css object
model interface csssupportsrule.
CSS Animations - CSS: Cascading Style Sheets
reference css properties animation animation-delay animation-direction animation-duration animation-fill-
mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations.
CSS Basic User Interface - CSS: Cascading Style Sheets
reference properties appearance box-sizing cursor ime-
mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset resize text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors.
Variable fonts guide - CSS: Cascading Style Sheets
using a variable font: @font-face changes the syntax for loading variable fonts is very similar to any other web font, with a few notable differences, which are provided via upgrades to the traditional @font-face syntax now available in
modern browsers.
CSS Grid Layout - CSS: Cascading Style Sheets
y entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing
modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css gri...
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout
models.
CSS Masking - CSS: Cascading Style Sheets
reference properties clip clip-path clip-rule mask mask-border mask-border-
mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-
mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.
CSS data types - CSS: Cascading Style Sheets
index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-
mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <t...
Compositing and Blending - CSS: Cascading Style Sheets
reference properties background-blend-
mode isolation mix-blend-
mode data types <blend-
mode> specifications specification status comment compositing and blending level 1 candidate recommendation initial definition ...
Media queries - CSS: Cascading Style Sheets
for example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait
mode, or bump up the size of buttons on touchscreens.
Tools - CSS: Cascading Style Sheets
other tools css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty,
modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
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.
box-ordinal-group - CSS: Cascading Style Sheets
examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to change the display order of flex children inside a flex container: article:nth-child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordinal-group: 2 box-ordinal-group: 2 } article:nth-child(2) { -webkit-box-ordinal-group: 1 -moz-box-ordinal-group: 1 box-ordinal-group: 1 } the
modern flexbox equivalent is order.
clear - CSS: Cascading Style Sheets
nosafari ios no support nosamsung internet android no support nolegend full support full support no support no support see also css basic box
model ...
column-width - CSS: Cascading Style Sheets
</p> css .content-box { column-width: 100px; } result specifications specification status comment css writing
modes level 4the definition of 'column-width' in that specification.
direction - CSS: Cascading Style Sheets
formal definition initial valueltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment css writing
modes module level 3the definition of 'direction' in that specification.
float - CSS: Cascading Style Sheets
table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object,
modern browsers support float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
image-rendering - CSS: Cascading Style Sheets
auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-
mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } result specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification.
Inheritance - CSS: Cascading Style Sheets
see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout
modes and visual formatting
models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
margin-bottom - CSS: Cascading Style Sheets
rder:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px solid black; } div { width:320px; background-color:gold; } result specifications specification status comment css basic box
modelthe definition of 'margin-bottom' in that specification.
margin-top - CSS: Cascading Style Sheets
omputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box
modelthe definition of 'margin-top' in that specification.
mask-composite - CSS: Cascading Style Sheets
compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="composite
mode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("composite
mode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result sp...
mask-type - CSS: Cascading Style Sheets
/* keyword values */ mask-type: luminance; mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-
mode property, which has the same effect but applies to the element where the mask is used.
padding-bottom - CSS: Cascading Style Sheets
percentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box
modelthe definition of 'padding-bottom' in that specification.
padding-left - CSS: Cascading Style Sheets
tednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box
modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
nopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box
modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
eritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box
modelthe definition of 'padding-top' in that specification.
position - CSS: Cascading Style Sheets
firefox and the specification have been modified to mimic chrome and safari's long-time behavior.ie full support 7notes full support 7notes notes in internet explorer, fixed positioning doesn't work if the document is in quirks
mode.opera full support 4safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4notes full support ...
ruby-position - CSS: Cascading Style Sheets
dge no support 12 — 79firefox full support 38ie no support nonotes no support nonotes notes internet explorer 9 and later support an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the
modern over).opera no support nosafari no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the sta...
scroll-behavior - CSS: Cascading Style Sheets
av { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; } result specifications specification status comment css object
model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
unicode-bidi - CSS: Cascading Style Sheets
mputed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment css writing
modes module level 3the definition of 'unicode-bidi' in that specification.
white-space - CSS: Cascading Style Sheets
serve wrap wrap formal definition initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /*
modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei...
Demos of open web technologies
e control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend
modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html5 web...
set:difference() - EXSLT
the template version of set:difference applies templates to these nodes in set:difference
mode, copying the nodes so that a result tree fragment consisting of the nodes is returned.
Index - Event reference
events can represent everything from basic user interactions to automated notifications of things happening in the rendering
model.
Getting Started - Developer guides
"!"; $array = ['username' => $name, 'computedstring' => $computedstring]; echo json_encode($array); for more on dom methods, be sure to check out document object
model (dom).
Live streaming web audio and video - Developer guides
mobile ✓ ✓ ✓ safari ios6+ ✓ chrome mobile ✓ ✓ [2] opera mobile ✓ [1] ✓ internet explorer mobile ✓ 11 ✓ [2] android ✓ [1] via javascript and mse [2] via javascript and a cors proxy video fallbacks between dash and hls we can cover a significant portion of
modern browsers but we still need a fallback if we want to support the rest.
Block formatting context - Developer guides
see also float, clear css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout
modes and visual formatting
models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
Introduction to Web development - Developer guides
e to intermediate and advanced javascript methodologies intermediate a re-introduction to javascript — a recap on the javascript programming language aimed at intermediate-level developers essential javascript design patterns — an introduction to essential javascript design patterns introduction to object-oriented javascript — learn about the javascript object
model.
Mobile Web Development - Developer guides
their screens are usually smaller, obviously, but they also usually automatically switch the screen orientation between portrait and landscape
mode as the user rotates the device.
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
among the use cases for the <i> element are spans of text representing a different quality or
mode of text, such as: alternative voice or mood taxonomic designations (such as the genus and species "homo sapiens") idiomatic terms from another language (such as "et cetera"); these should include the lang attribute to identify the language technical terms transliterations thoughts (such as "she wondered,what is this writer talking about, anyway?") ship or vessel names in ...
Protocol upgrade mechanism - HTTP
for example: sec-websocket-extensions: superspeed, color
mode; depth=16 sec-websocket-key provides information to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket.
Loops and iteration - JavaScript
function dump_props(obj, obj_name) { let result = ''; for (let i in obj) { result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; } result += '<hr>'; return result; } for an object car with properties make and
model, result would be: car.make = ford car.
model = mustang arrays although it may be tempting to use this as a way to iterate over array elements, the for...in statement will return the name of your user-defined properties in addition to the numeric indexes.
JavaScript Guide - JavaScript
ject math object date object text formatting string literals string object template literals internationalization regular expressions indexed collections arrays typed arrays keyed collections map weakmap set weakset working with objects objects and properties creating objects defining methods getter and setter details of the object
model prototype-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables generators meta programming proxy handlers and traps revocable proxy reflect javascript modules exporting importing default exports renaming features aggreg...
Array - JavaScript
let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010] console.log(years.0) // a syntax error console.log(years[0]) // works properly renderer.3d.settexture(
model, 'character.png') // a syntax error renderer['3d'].settexture(
model, 'character.png') // works properly in the 3d example, '3d' had to be quoted (because it begins with a digit).
Atomics - JavaScript
wait and notify the wait() and notify() methods are
modeled on linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs.
Error - JavaScript
you can handle the error using the try...catch construct: try { throw new error('whoops!') } catch (e) { console.error(e.name + ': ' + e.message) } handling a specific error you can choose to handle only specific error types by testing the error type with the error's constructor property or, if you're writing for
modern javascript engines, instanceof keyword: try { foo.bar() } catch (e) { if (e instanceof evalerror) { console.error(e.name + ': ' + e.message) } else if (e instanceof rangeerror) { console.error(e.name + ': ' + e.message) } // ...
Function.prototype.apply() - JavaScript
note that this may not be the actual value seen by the method: if the method is a function in non-strict
mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.
Intl.Locale.prototype.numberingSystem - JavaScript
romanlow roman lowercase numerals — algorithmic saur saurashtra digits shrd sharada digits sind khudawadi digits sinh sinhala lith digits sora sora_sompeng digits sund sundanese digits takr takri digits talu new tai lue digits taml tamil numerals — algorithmic tamldec
modern tamil decimal digits telu telugu digits thai thai digits tirh tirhuta digits tibt tibetan digits traditio traditional numerals — may be algorithmic vaii vai digits wara warang citi digits wcho wancho digits examples setting the numberingsystem value via the locale string in the unicode loc...
Intl - JavaScript
for example: "hi": hindi (language) "de-at": german (language) as used in austria (region) "zh-hans-cn": chinese (language) written in simplified characters (script) as used in china (region) "en-e
modeng": english (language) in the "early
modern english" dialect (variant) the subtags identifying languages, scripts, regions (including countries), and (rarely used) variants in unicode bcp 47 locale identifiers are registered in the iana language subtag registry.
NaN - JavaScript
in
modern browsers, nan is a non-configurable, non-writable property.
Object.setPrototypeOf() - JavaScript
warning: changing the [[prototype]] of an object is, by the nature of how
modern javascript engines optimize property accesses, currently a very slow operation in every browser and javascript engine.
RegExp - JavaScript
(perl is the programming language from which javascript
modeled its regular expressions.).
globalThis - JavaScript
the this keyword could be used inside functions running in non–strict
mode, but this will be undefined in modules and inside functions running in strict
mode.
undefined - JavaScript
in
modern browsers (javascript 1.8.5 / firefox 4+), undefined is a non-configurable, non-writable property, per the ecmascript 5 specification.
Lexical grammar - JavaScript
these are always reserved: enum the following are only reserved when they are found in strict
mode code: implements interface let package private protected public static the following are only reserved when they are found in module code: await future reserved keywords in older standards the following are reserved as future keywords by older ecmascript specifications (ecmascript 1 till 3).
instanceof - JavaScript
function car(make,
model, year) { this.make = make; this.
model =
model; this.year = year; } let mycar = new car('honda', 'accord', 1998) let a = mycar instanceof car // returns true let b = mycar instanceof object // returns true not an instanceof to test if an object is not an instanceof a specific constructor, you can do if (!(mycar instanceof car)) { // do something, like: // mycar = new car(mycar)...
class - JavaScript
syntax class name [extends othername] { // class body } description the class body of a class declaration is executed in strict
mode.
export - JavaScript
exported modules are in strict
mode whether you declare them as such or not.
import - JavaScript
imported modules are in strict
mode whether you declare them as such or not.
switch - JavaScript
block-scope variables within switch statements with ecmascript 2015 (es6) support made available in most
modern browsers, there will be cases where you would want to use let and const statements to declare block-scoped variables.
with - JavaScript
using with is not recommended, and is forbidden in ecmascript 5 strict
mode.
JavaScript reference - JavaScript
arguments arrow functions default parameters rest parameters additional reference pages lexical grammar data types and data structures strict
mode deprecated features ...
orientation - Web app manifests
note: orientation and/or its specific values might not be supported by a user agent on various display
modes because supporting them does not make sense for the particular context.
<mfenced> - MathML
it has been removed from the latest mathml standard and
modern browsers no longer support it.
Autoplay guide for media and Web Audio APIs - Web media technologies
example: allowing autoplay only from the document's domain to use the feature-policy header to only allow media to autoplay from the document's origin: feature-policy: autoplay 'self' to do the same for an <iframe>: <iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe> example: allowing autoplay and fullscreen
mode adding fullscreen api permission to the previous example results in a feature-policy header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.
Privacy, permissions, and information security
modern browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes.
How to make PWAs installable - Progressive web apps (PWAs)
this makes the web app easier to access; additionally, you can specify that the app be launched in fullscreen or standalone
mode, thus removing the default browser user interface that would otherwise be present, creating an even more seamless and native-like feel.
keyPoints - SVG: Scalable Vector Graphics
w.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calc
mode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle> </svg> usage notes value <number> [; <number>]* ;?
mask - SVG: Scalable Vector Graphics
1 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-
mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.
<animate> - SVG: Scalable Vector Graphics
height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calc
mode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes this element implements ...
<animateMotion> - SVG: Scalable Vector Graphics
value type: <number>|auto|auto-reverse; default value: 0; animatable: no note: for <animatemotion> the default value for the calc
mode attribute is paced animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calc
mode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core att...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edge
mode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
general change notes length attribute and indexed property for list interfaces implementation status unknown <script> element in content
model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 1240357) rendering
model ...
SVG: Scalable Vector Graphics
other resources: xml, css, dom, canvas examples google maps (route overlay) & docs (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.
Information Security Basics - Web security
confidentiality, integrity, and availability describes the primary security objectives, which are absolutely fundamental to understanding security security controls defines major categories of security controls and discusses their potential disadvantages tcp/ip security an overview of the tcp/ip
model, with a focus on the security considerations for ssl threats briefly introduces major threat concepts vulnerabilities defines the major categories of vulnerabilities and discusses the presence of vulnerabilities in all software ...
Mixed content - Web security
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.
Web security
security-related glossary terms block cipher
mode of operation certificate authority challenge-response authentication cipher cipher suite ciphertext cors cors-safelisted request header cors-safelisted response header cross-site scripting cryptanalysis cryptographic hash function cryptography csp csrf decryption digital certificate dtls en...
Tutorials
how browsers work a detailed research article describing different
modern browsers, their engines, page rendering etc.
Web Components
this does not include nodes in shadow trees if the shadow root was created with shadowroot.
mode closed.
XML Index - XML: Extensible Markup Language
found 4 pages: # page tags and summary 1 xml: extensible markup language draft, landing, web, xml the extensible markup language is a strict serialisation of the document object
model.
Caching compiled WebAssembly modules - WebAssembly
setting up a caching library because indexeddb is a somewhat old-fashioned api, we wanted to provide a library function to speed up writing caching code, and make it work better along with today's more
modern apis.
Index - WebAssembly
found 12 pages: # page tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in
modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilation target so that they can run on the web.
Compiling from Rust to WebAssembly - WebAssembly
create webpack.config.js and put the following in it: const path = require('path'); module.exports = { entry: "./index.js", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", },
mode: "development" }; now we need an html file; create index.html and give it the following contents: <!doctype html> <html> <head> <meta charset="utf-8"> <title>hello-wasm example</title> </head> <body> <script src="./index.js"></script> </body> </html> finally, create the index.js referenced in the html file and give it these contents: const js = import("./node_modules/hello...
WebAssembly
webassembly is a new type of code that can be run in
modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web.