Search completed in 1.03 seconds.
minmax() - CSS: Cascading Style Sheets
the min
max() css function defines a size range greater than or equal to min and less than or equal to
max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...n defines a size range greater than or equal to min and less than or equal to
max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...nge greater than or equal to min and less than or equal to
max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 22 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. that is, if the writing direction is horizontal, then
max-block-size is equivalent to
max-height; if the writing direction is vertical,
max-block-size is the same as
max-width. the other dimension's
maximum length is specified using the
max-inline-size property. this is useful because the
max-width is always used for horizontal sizes and
max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind. ...
...see the example in writing-mode, which shows the different writing modes in action. ...
...see the example in writing-mode, which shows the different writing modes in action. ...
...And 18 more matches
max-height - CSS: Cascading Style Sheets
the
max-height css property sets the
maximum height of an element. it prevents the used value of the height property from becoming larger than the value specified for
max-height. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-height overrides height, but min-height overrides
max-height. ...
...ight property from becoming larger than the value specified for
max-height. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-height overrides height, but min-height overrides
max-height. syntax /* <length> value */
max-height: 3.5em; /* <percentage> value */
max-height: 75%; /* keyword values */
max-height: none;
max-height:
max-content;
max-height: min-content;
max-height: fit-content(20em); /* global values */
max-height: inherit;
max-height: initial;
max-height: unset; values <length> defines the
max-height as an absolute value. ...
...ax-height. syntax /* <length> value */
max-height: 3.5em; /* <percentage> value */
max-height: 75%; /* keyword values */
max-height: none;
max-height:
max-content;
max-height: min-content;
max-height: fit-content(20em); /* global values */
max-height: inherit;
max-height: initial;
max-height: unset; values <length> defines the
max-height as an absolute value. <percentage> defines the
max-height as a percentage of the containing block's height. auto the browser will calculate and select a
max-height for the specified element. none no limit on the size of the box.
max-content the intrinsic preferred
max-height. min-content the intrinsic minimum
max-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argu...
...And 10 more matches
max-width - CSS: Cascading Style Sheets
the
max-width css property sets the
maximum width of an element. it prevents the used value of the width property from becoming larger than the value specified by
max-width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-width overrides width, but min-width overrides
max-width. ...
... the width property from becoming larger than the value specified by
max-width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-width overrides width, but min-width overrides
max-width. syntax /* <length> value */
max-width: 3.5em; /* <percentage> value */
max-width: 75%; /* keyword values */
max-width: none;
max-width:
max-content;
max-width: min-content;
max-width: fit-content(20em); /* global values */
max-width: inherit;
max-width: initial;
max-width: unset; values <length> defines the
max-width as an absolute value. ...
...overrides
max-width. syntax /* <length> value */
max-width: 3.5em; /* <percentage> value */
max-width: 75%; /* keyword values */
max-width: none;
max-width:
max-content;
max-width: min-content;
max-width: fit-content(20em); /* global values */
max-width: inherit;
max-width: initial;
max-width: unset; values <length> defines the
max-width as an absolute value. <percentage> defines the
max-width as a percentage of the containing block's width. auto the browser will calculate and select a
max-width for the specified element. none no limit on the size of the box.
max-content the intrinsic preferred
max-width. min-content the intrinsic minimum
max-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument,...
...And 10 more matches
HTML attribute: max - HTML: Hypertext Markup Language
the
max attribute defines the
maximum value that is acceptable and valid for the input containing the attribute. if the value of the element is greater than this, the element fails constraint validation. this value must be greater than or equal to the value of the min attribute. if the
max attribute is present by is not specified or is invalid, no
max value is applied. if the
max attribute is valid and a non-empty value is greater than the
maximum allowed by the
max attribute, constraint validation will prevent form submission. ...
...e is present by is not specified or is invalid, no
max value is applied. if the
max attribute is valid and a non-empty value is greater than the
maximum allowed by the
max attribute, constraint validation will prevent form submission. valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the
max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the
max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes. ...
... time, datetime-local, number and range types, and both the <progress> and <meter> elements, the
max attribute is a number that specifies the most positive value a form control to be considered valid. if the value exceeds the
max value allowed, the validitystate.rangeoverflow will be true, and the the control will be matched by the :out-of-range and :invalid pseudo-classes. ...
...And 9 more matches
max-height - CSS: Cascading Style Sheets
<length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
... <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
... <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
...And 7 more matches
max-width - CSS: Cascading Style Sheets
<length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
... <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
... <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
...And 7 more matches
max() - CSS: Cascading Style Sheets
the
max() css function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a css property value. the
max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). think of the
max() value as providing the minimum value a property can have. ...
...te to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). think of the
max() value as providing the minimum value a property can have. ...
... you can use different units for each value in your expression. you may also use parentheses to establish computation order when needed. notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified. ...
...And 7 more matches
Math.max() - JavaScript
the math.
max() function returns the largest of the zero or more numbers given as input parameters. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax math.
max([value1[, value2[, ...]]]) parameters value1, value2, ... numbers. return value the largest of the given numbers. if at least one of the arguments cannot be converted to a number, nan is returned. description because math is not a constructor,
max() is a static method of math (you always use it as math.
max(), rather than as a method of an instanced math object). -infinity is the initial comparant because almost every other value is bigger, tha...
...ause math is not a constructor,
max() is a static method of math (you always use it as math.
max(), rather than as a method of an instanced math object). -infinity is the initial comparant because almost every other value is bigger, that's why when no arguments are given, -infinity is returned. if at least one of arguments cannot be converted to a number, the result is nan. ...
... not a constructor,
max() is a static method of math (you always use it as math.
max(), rather than as a method of an instanced math object). -infinity is the initial comparant because almost every other value is bigger, that's why when no arguments are given, -infinity is returned. if at least one of arguments cannot be converted to a number, the result is nan. ...
...And 6 more matches
SpeechRecognition.maxAlternatives - Web APIs
examples this code is excerpted from our speech color changer example. ...
... examples this code is excerpted from our speech color changer example. ...
... examples this code is excerpted from our speech color changer example. ...
...And 5 more matches
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. it relates to
max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...nt, otherwise it relates to the
maximal width of the element. it relates to
max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... to the
maximal width of the element. it relates to
max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 5 more matches
Number.MAX_SAFE_INTEGER - JavaScript
the number.
max_safe_integer constant represents the
maximum safe integer in javascript (253 - 1). for larger integers, consider using bigint. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. property attributes of number.
max_safe_integer writable no enumerable no configurable no description the
max_safe_integer constant has a value of 9007199254740991 (9,007,199,254,740,991 or ~9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 75...
... has a value of 9007199254740991 (9,007,199,254,740,991 or ~9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) and 253 - 1. safe in this context refers to the ability to represent integers exactly and to correctly compare them. ...
... (9,007,199,254,740,991 or ~9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) and 253 - 1. safe in this context refers to the ability to represent integers exactly and to correctly compare them. ...
...And 5 more matches
Intl.Locale.prototype.maximize() - JavaScript
description sometimes, it is convenient to be able to identify the most likely locale language identifier subtags based on an incomplete langauage id. the add likely subtags algorithm gives us this functionality. ...
... description sometimes, it is convenient to be able to identify the most likely locale language identifier subtags based on an incomplete langauage id. the add likely subtags algorithm gives us this functionality. ...
...complete langauage id. the add likely subtags algorithm gives us this functionality. for instance, given the language id "en", the algorithm would return "en-latn-us", since english can only be written in the latin script, and is most likely to be used in the united states, as it is the largest english-speaking country in the world. ...
...And 4 more matches
MediaSettingsRange.max - Web APIs
working draft initial definition. ...
... working draft initial definition. ...
... working draft initial definition. ...
...And 2 more matches
NetworkInformation.downlinkMax - Web APIs
the networkinformation.downlink
max read-only property returns the
maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. note: this feature is available in web workers. syntax var
max = networkinformation.downlink
max return value an unrestricted double representing the
maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...ntax var
max = networkinformation.downlink
max return value an unrestricted double representing the
maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...abits per second (mb/s), for the underlying connection technology. examples the following example monitors the connection using the change event and logs changes as they occur. ...
...nnection technology. examples the following example monitors the connection using the change event and logs changes as they occur. function logconnectiontype() { var connectiontype = 'not supported'; var downlink
max = 'not supported'; if ('connection' in navigator) { connectiontype = navigator.connection.effectivetype; if ('downlink
max' in navigator.connection) { downlink
max = navigator.connection.downlink
max; } } console.log('current connection type: ' + connectiontype + ' (downlink
max: ' + downlink
max + ')'); } logconnectiontype(); navigator.connection.addeventlistener('change', logconnectiontype); specifications specification status comment network information apithe definition of 'downlink
max' in that specification. ...
Notification.maxActions - Web APIs
note: this feature is available in web workers. the
maxactions attribute of the notification interface returns the
maximum number of actions supported by the device and the user agent. effectively, this is the
maximum number of elements in notification.actions array which will be respected by the user agent. syntax notification.
maxactions value an integer number which indicates the largest number of notification actions that can be presented to the user by the user agent and the device. examples the following snippet logs the
maximum number of supported actions. ...
.... effectively, this is the
maximum number of elements in notification.actions array which will be respected by the user agent. syntax notification.
maxactions value an integer number which indicates the largest number of notification actions that can be presented to the user by the user agent and the device. examples the following snippet logs the
maximum number of supported actions. ...
...
maximum number of elements in notification.actions array which will be respected by the user agent. syntax notification.
maxactions value an integer number which indicates the largest number of notification actions that can be presented to the user by the user agent and the device. examples the following snippet logs the
maximum number of supported actions. ...
...ch will be respected by the user agent. syntax notification.
maxactions value an integer number which indicates the largest number of notification actions that can be presented to the user by the user agent and the device. examples the following snippet logs the
maximum number of supported actions. ...
PannerNode.maxDistance - Web APIs
the default is 10000, and non-positive values are not allowed. exceptions rangeerror the property has been given a value that is outside the accepted range. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...the default is 10000, and non-positive values are not allowed. exceptions rangeerror the property has been given a value that is outside the accepted range. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...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.panningmodel = 'hrtf'; panner.distancemodel = '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, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener =...
... working draft ...
Using the aria-valuemax attribute - Accessibility
description the aria-value
max attribute is used to define the
maximum value allowed for a range widget such as a slider, spinbutton or progressbar. if the aria-valuenow has a known
maximum and minimum, the author should provide properties for aria-value
max and aria-valuemin. the value of aria-value
max must be greater than or equal to the value of aria-valuemin. aria-value
max is a required attribute of role slider, scrollbar and spinbutton. value string representation of a number possible effects on user agents and assistive technology if the aria-value
max is indeterminate, or if aria-valuemin is not less than or equal to the value of aria-value
max, this creates an error condition that will be handled by the assistive technology. note: opinions may differ on how assistive te...
...or if aria-valuemin is not less than or equal to the value of aria-value
max, this creates an error condition that will be handled by the assistive technology. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a
maximum value of 10. ...
...es an error condition that will be handled by the assistive technology. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a
maximum value of 10. ...
...value
max="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-value
max attribute ...
Access-Control-Max-Age - HTTP
uxp caps this at 24 hours (86400 seconds). chromium (prior to v76) caps at 10 minutes (600 seconds). chromium (starting in v76) caps at 2 hours (7200 seconds). chromium also specifies a default value of 5 seconds. a value of -1 will disable caching, requiring a preflight options check for all calls. ...
... uxp caps this at 24 hours (86400 seconds). chromium (prior to v76) caps at 10 minutes (600 seconds). chromium (starting in v76) caps at 2 hours (7200 seconds). chromium also specifies a default value of 5 seconds. a value of -1 will disable caching, requiring a preflight options check for all calls. ...
... uxp caps this at 24 hours (86400 seconds). chromium (prior to v76) caps at 10 minutes (600 seconds). chromium (starting in v76) caps at 2 hours (7200 seconds). chromium also specifies a default value of 5 seconds. a value of -1 will disable caching, requiring a preflight options check for all calls. ...
...n be cached. uxp caps this at 24 hours (86400 seconds). chromium (prior to v76) caps at 10 minutes (600 seconds). chromium (starting in v76) caps at 2 hours (7200 seconds). chromium also specifies a default value of 5 seconds. a value of -1 will disable caching, requiring a preflight options check for all calls. examples cache results of a preflight request for 10 minutes: access-control-
max-age: 600 specifications specification status comment fetchthe definition of 'access-control-
max-age' in that specification. living standard initial definition. ...
max - SVG: Scalable Vector Graphics
the
max attribute specifies the
maximum value of the active animation duration. ...
... the
max attribute specifies the
maximum value of the active animation duration. ...
...the value must be greater than 0. specificat...
...="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s"
max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies the length of the
maximum value of the active duration, measured in local time. the value must be greater than 0. specifications specification status comment svg animations level 2the definition of '
max' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
max' in that specification. recommendation in...
AnalyserNode.maxDecibels - Web APIs
the
maxdecibels property of the analysernode interface is a double value representing the
maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the
maximum value for the range of results when using getfloatfrequencydata() or getbytefrequencydata(). syntax var curvalue = analysernode.
maxdecibels; analysernode.
maxdecibels = newvalue; value a double, representing the
maximum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -30 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of
maxdecibels or higher will be returned as +1.0 or 255, respectively. ...
...as> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.
maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height...
... working draft ...
AudioDestinationNode.maxChannelCount - Web APIs
the
maxchannelcount property of the audiodestinationnode interface is an unsigned long defining the
maximum amount of channels that the physical device can handle. the audionode.channelcount property can be set between 0 and this value (both included). if
maxchannelcount is 0, like in offlineaudiocontext, the channel count cannot be changed. syntax var audioctx = new audiocontext(); var mydestination = audioctx.destination; mydestination.
maxchannelcount = 2; value an unsigned long. ...
...property can be set between 0 and this value (both included). if
maxchannelcount is 0, like in offlineaudiocontext, the channel count cannot be changed. syntax var audioctx = new audiocontext(); var mydestination = audioctx.destination; mydestination.
maxchannelcount = 2; value an unsigned long. example the following would set up a simple audio graph, featuring an audiodestinationnode with
maxchannelcount of 2: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); audioctx.destination.
maxchannelcount = 2; gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin. specifications specificatio...
...e = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); audioctx.destination.
maxchannelcount = 2; gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn web audio examples, such as voice-change-o-matic or violent theremin. specifications specification status comment web audio apithe definition of '
maxchannelcount' in that specification. working draft ...
EXT_blend_minmax - Web APIs
the ext_blend_min
max extension is part of the webgl api and extends blending capabilities by adding two new blend equations: the minimum or
maximum color components of the source and destination colors. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is only available to webgl1 contexts. in webgl2, the functionality of this extension is available on the webgl2 context by default. the constants in webgl2 are gl.min and gl.
max. constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum color components of the source a...
...in webgl2, the functionality of this extension is available on the webgl2 context by default. the constants in webgl2 are gl.min and gl.
max. constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum color components of the source and destination colors. ext.
max_ext produces the
maximum color components of the source and destination colors. ...
...ax. constants this extension adds two new constants, which can be used in webglrenderingcontext.blendequation() and webglrenderingcontext.blendequationseparate(): ext.min_ext produces the minimum color components of the source and destination colors. ext.
max_ext produces the
maximum color components of the source and destination colors. examples var ext = gl.getextension('ext_blend_min
max'); gl.blendequation(ext.min_ext); gl.blendequation(ext.
max_ext); gl.blendequationseparate(ext.min_ext, ext.
max_ext); specifications specification status comment ext_blend_min
maxthe definition of 'ext_blend_min
max' in that specification. recommendation initial definition. ...
RTCDataChannel.maxPacketLifeTime - Web APIs
if not set when rtcpeerconnection.createdatachannel() was called to create the data channel, this value is null. ...
...if not set when rtcpeerconnection.createdatachannel() was called to create the data channel, this value is null. ...
... candidate recommendation initial specification. ...
HTML attribute: maxlength - HTML: Hypertext Markup Language
the
maxlength attribute defines the
maximum number of characters (as utf-16 code units) the user can enter into an <input> or <textarea>. this must be an integer value 0 or higher. if no
maxlength is specified, or an invalid value is specified, the input or textarea has no
maximum length. any
maxlength value must be greater than or equal to the value of minlength, if present and valid. the input will fail constraint validation if the length of the text value of the field is greater than
maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. ...
...ue must be greater than or equal to the value of minlength, if present and valid. the input will fail constraint validation if the length of the text value of the field is greater than
maxlength utf-16 code units long. constraint validation is only applied when the value is changed by the user. constraint validation while the browser will generally prevent user from entering more text than the
maxlength attribute allows, should the length be longer than the
maxlength allows, the read-only toolong property of a validitystate object will be true. examples <input type="password"
maxlength="4"/> specifications specification status html living standardthe definition of '
maxlength attribute' in that specification. living standard html 5.1the definition...
...h attribute allows, should the length be longer than the
maxlength allows, the read-only toolong property of a validitystate object will be true. examples <input type="password"
maxlength="4"/> specifications specification status html living standardthe definition of '
maxlength attribute' in that specification. living standard html 5.1the definition of '
maxlength attribute' in that specification. recommendation ...
maxWidth - Archive of obsolete content
« xul reference
maxwidth type: integer gets and sets the value of the
maxwidth attribute. note: prior to gecko 6.0, you could use this on <input> elements; this was never intended, was a violation of the html specification, and has been fixed. use the size to set the
maximum width of input fields. ...
-ms-scroll-limit-x-max - Archive of obsolete content
the -ms-scroll-limit-x-
max css property is a microsoft extension that specifies the
maximum value for the element.scrollleft property. initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto the
maximum value for the scrollleft property is equal to element.scrollwidth. <length> the
maximum value for the scrollleft property. formal syntax auto | <length> specifications not part of any specification. remarks this property has no effect on non-scrollable elements. the specified behavior of the -ms-scroll-limit-x-
max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors. th...
-ms-scroll-limit-y-max - Archive of obsolete content
the -ms-scroll-limit-y-
max css property is a microsoft extension that specifies the
maximum value for the element.scrolltop property. initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values auto the
maximum value for the scrolltop property is equal to element.scrollheight. <length> the
maximum value for the scrolltop property. formal syntax auto | <length> specifications not part of any specification. remarks this property has no effect on non-scrollable elements. the specified behavior of the -ms-scroll-limit-y-
max property is only applicable at a mscontentzoomfactor of 1; the behavior of this property is undefined at other zoom factors. this...
AudioParam.maxValue - Web APIs
the
maxvalue read-only property of the audioparam interface represents the
maximum possible value for the parameter's nominal (effective) range. syntax var
maxval = audioparam.
maxvalue; value a floating-point number indicating the
maximum value permitted for the parameter's nominal range. the default value of
maxvalue is the
maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440). example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.
maxvalue); // 3.4028234663852886e38 specifications specification status comment web audio apithe definition of '
maxvalue' in that specification. working draft ...
DeviceProximityEvent.max - Web APIs
the
max property provides the
maximum sensing distance the sensor is able to report, in centimeters. syntax var value = instanceofdeviceproximityevent.
max; value a positive number indicating the
maximum distance, in centimeters (cm), that the device's proximity sensor is able to detect and report. ...
Element.scrollTopMax - Web APIs
the element.scrolltop
max read-only property returns a number representing the
maximum top scroll offset possible for the element. syntax var pxl = elt.scrolltop
max; specifications this property is not part of any specification. ...
PositionOptions.maximumAge - Web APIs
the positionoptions.
maximumage property is a positive long value indicating the
maximum age in milliseconds of a possible cached position that is acceptable to return. if set to 0, it means that the device cannot use a cached position and must attempt to retrieve the real current position. if set to infinity the device must return a cached position regardless of its age. syntax positionoptions.
maximumage = timelength specifications specification status comment geolocation apithe definition of 'positionoptions.
maximumage' in that specification. recommendation initial definition ...
WebGLShaderPrecisionFormat.rangeMax - Web APIs
the read-only webglshaderprecisionformat.range
max property returns the base 2 log of the absolute value of the
maximum value that can be represented. examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).range
max; // 127 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).range
max; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat.range
max' in that specification. recommendation initial definition. ...
Window.scrollMaxX - Web APIs
the window.scroll
maxx read-only property returns the
maximum number of pixels that the document can be scrolled horizontally. syntax x
max = window.scroll
maxx x
max is the number of pixels. example // scroll to right edge of the page let
maxx = window.scroll
maxx; window.scrollto(
maxx, 0); notes do not use this property to get the total document width, which is not equivalent to window.innerwidth + window.scroll
maxx, because window.innerwidth includes the width of any visible vertical scrollbar, thus the result would exceed the total document width by the width of any visible vertical scrollbar. instead use document.body.scrollwidth. see also window.scroll
maxy. specification this is not part of any specification. ...
Window.scrollMaxY - Web APIs
the window.scroll
maxy read-only property returns the
maximum number of pixels that the document can be scrolled vertically. syntax y
max = window.scroll
maxy y
max is the number of pixels. example // scroll to the bottom of the page let
maxy = window.scroll
maxy; window.scrollto(0,
maxy); notes do not use this property to get the total document height, which is not equivalent to window.innerheight + window.scroll
maxy, because window.innerheight includes the width of any visible horizontal scrollbar, thus the result would exceed the total document height by the width of any visible horizontal scrollbar. instead use document.body.scrollheight. see also window.scroll
maxx and window.scrollto. specification this is not part of any specification. ...
Index - Web APIs
nterface copies the current frequency data into a float32array array passed into it. 58 analysernode.getfloattimedomaindata() api, analysernode, method, reference, référence(2), web audio api the getfloattimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a float32array array passed into it. ...
...ssed into it. 58 analysernode.getfloattimedomaindata() api, analysernode, method, reference, référence(2), web audio api the getfloattimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a float32array array passed into it. 59 analysernode.
maxdecibels api, analysernode, property, reference, web audio api,
maxdecibels the
maxdecibels property of the analysernode interface is a double value representing the
maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the
maximum value for the range of results when using getfloatfrequencydata() or getbytefrequencydata(). 60 analysernode.mindecibels api,...
...e audio hardware when it will not be using an audio context for a while. 136 audiocontextlatencycategory api, audio, audio context, audiocontextlatencycategory, enum, interface, media, reference, type, web audio, web audio api, latency the audiocontextlatencycategory type is an enumerated set of strings which are used to select one of a number of default values for acceptable
maximum latency of an audio context. 137 audiocontextoptions api, audio, audiocontext, audiocontextoptions, configuration, context, dictionary, interface, options, reference, settings, web audio api, samplerate the audiocontextoptions dictionary is used to specify configuration options when constructing a new audiocontext object to represent a graph of web audio nodes. 138...
...And 32 more matches
WebGL constants - Web APIs
viewport 0x0ba2 returns an int32array with four elements for the current viewport dimensions. scissor_box 0x0c10 returns an int32array with four elements for the current scissor box dimensions. ...
...ns an int32array with four elements for the current viewport dimensions. scissor_box 0x0c10 returns an int32array with four elements for the current scissor box dimensions. ...
...8b85 passed to getprogramparameter after calling attachshader to determine if the shader was attached correctly. returns false if errors occurred. active_attributes 0x8b89 passed to getprogramparameter to get the number of attributes active in a program. active_uniforms 0x8b86 passed to getprogramparamter to get the number of uniforms active in a program. ...
...And 24 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="password" name="password"/> radio a radio button, allowing a single value to be selected out of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and
max to define the range of acceptable values. <input type="range" name="range" min="0"
max="25"/> html5 reset a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> search a single-line text field for entering search strings. line-breaks are automatically removed from the input value.
...whether to allow multiple values name all name o...
...whether to allow multiple values name all name of the form control. subm...
...And 22 more matches
WebGLRenderingContext.getParameter() - Web APIs
ee also bindframebuffer. gl.front_face glenum gl.cw or gl.ccw. see also frontface. gl.generate_mipmap_hint glenum gl.fastest, gl.nicest or gl.dont_care. see also hint. ...
... gl.cw or gl.ccw. see also frontface. gl.generate_mipmap_hint glenum gl.fastest, gl.nicest or gl.dont_care. see also hint. ...
....generate_mipmap_hint glenum gl.fastest, gl.nicest or gl.dont_care. see also hint. ...
...And 20 more matches
Box-shadow generator - CSS: Cascading Style Sheets
class="ui-checkbox" data-topic='inset'></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-
max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-slider-input" data-topic="posx" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui...
...nput" data-topic="posx" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic="posy" data-min="-500" data-
max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="add"></div> <div class="ui-slider-input" data-topic="posy" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> blur </div> <div class="ui-slide...
...-slider-input" data-topic="posy" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> blur </div> <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> <div class="ui-slider" data-topic="blur" data-min="0" data-
max="200" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> spread </div> <div class="ui-sli...
...And 18 more matches
<input type="range"> - HTML: Hypertext Markup Language
.com/mdn/interactive-examples and send us a pull request. if the user's browser doesn't support type range, it will fall back and treat it as a text input. value a domstring containing the string representation of the selected numeric value; use valueasnumber to get the value as a number. ...
...epdown() and stepup() validation there is no pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input. the value won't be less than min. the default is 0. the value won't be greater than
max. ...
...m a bad input. the value won't be less than min. the default is 0. the value won't be greater than
max. the default is 100. the value will be a multiple of step. the default is 1. value the value attribute contains a domstring which contains a string representation of the selected number. the value is never an empty string (""). the default value is halfway between the specified minimum and
maximum—unless the
maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. ...
...And 17 more matches
3D collision detection - Game development
tity contained inside. note: check out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...inside. note: check out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...heck out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...And 15 more matches
Grids - Learn web development
three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid. ...
...ay: grid; grid-template-columns: 2fr 1fr 1fr; } the first track now gets 2fr of the available space and the other two tracks get 1fr, making the first track larger. you can mix fr units and fixed length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks. ...
...tracks to create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once. .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } these gaps can be any length unit or a percentage, but not an fr unit. ...
...And 15 more matches
Border-image generator - CSS: Cascading Style Sheets
<div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-
max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> ...
...></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-
max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom...
... <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-
max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-
max="10000" data-sensivity="3"> </div> </div> </div> <div id="output" class="category"...
...And 15 more matches
WebGL best practices - Web APIs
by gracefully adapting to the case there they are not supported. ...
...bgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...And 14 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
er"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-
max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis ...
...els (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-
max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> ...
...box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 100%; height: 150px;
max-height: 150px; margin: 0; padding: 0 0.3em; border: 1px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 100%; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } ...
...And 13 more matches
Client-side form validation - Learn web development
g built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without relying on javascript. this is done by using validation attributes on form elements. we've seen many of these earlier in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and
maxlength: specifies the minimum and
maximum length of textual data (strings) min and
max: specifies the minimum and
maximum values of numerical input types type: specifies whether the data needs to be a number, an email address, or some other specific preset type. pattern: specifies a regular expression that defines a pattern the entered data needs to follow. if the data entered in a form fiel...
...alidates the inputs value against a well-formed email address pattern or a pattern matching a comma-separated list of email addresses if it has the multiple attribute. note: the <textarea> element doesn't support the pattern attribute. ...
...it has the multiple attribute. note: the <textarea> element doesn't support the pattern attribute. constraining the length of your entries you can constrain the character length of all text fields created by <input> or <textarea> by using the minlength and
maxlength attributes. a field is invalid if it has a value and that value has fewer characters than the minlength value or more than the
maxlength value. browsers often don't let the user type a longer value than expected into text fields. ...
...And 12 more matches
JS_GetGCParameter
ntime to configure. cx jscontext * the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. key jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
... cx jscontext * the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. key jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
... the context to configure. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. key jsgcparamkey specifies which garbage collection parameter to get or set. value uint32_t (js_setgcparameter only) the value to assign to the parameter. ...
...And 12 more matches
Index - Archive of obsolete content
cated in the test/performance directory. similar to the acceptance tests set the environment variables avm, asc, builtinabc. the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 566'. the testconfig.txt file defines groups of tests to run (e.g. sunspider, scimark, language). by default the time for each test is output. use the --memory flag to capture the
maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the m...
...pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. 752 attribute (xul) xul attributes, xul reference no summary! 753 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their
maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 754 accelerated xul, xul attribute, xul reference no summary! 755 acceltext xul attributes, xul reference no summary! 756 accessibl...
...erence no summary! 924 lightweightthemesfooter no summary! 925 linkedpanel xul attributes, xul reference no summary! 926 listcell.type xul attributes, xul reference no summary! 927 listitem.type xul attributes, xul reference no summary! 928 matchcaseaccesskey no summary! ...
...And 11 more matches
<input type="email"> - HTML: Hypertext Markup Language
cally applied as appropriate to visually denote whether the current value of the field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list,
maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax. more specifically, there are three possible value formats that will pass validation: an empty str...
...how e-mail addresses are validated to ensure that they're formatted properly. ...
...ses are validated to ensure that they're formatted properly. ...
...And 11 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
ded by javascript's date that can be used to convert numeric date information into a properly-formatted string, or you can do it manually. for example, the date.toisostring() method can be used for this purpose. additional attributes in addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description
max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or performing validation
max the latest date and time to accept. if the value entered into the element is later than this timestamp, the element fails constraint validation. if the value of...
...he latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or performing validation
max the latest date and time to accept. if the value entered into the element is later than this timestamp, the element fails constraint validation. if the value of the
max attribute isn't a valid string which follows the format yyyy-mm-ddthh:mm, then the element has no
maximum value. this value must specify a date string later than or equal to the one specified by the min attribute. min the earliest date and time to accept; timestamps earlier than this will cause the element to fail constraint validation. if the value of the min attribute isn't a valid string wh...
...ual to the one specified by the min attribute. min the earliest date and time to accept; timestamps earlier than this will cause the element to fail constraint validation. if the value of the min attribute isn't a valid string which follows the format yyyy-mm-ddthh:mm, then the element has no minimum value. this value must specify a date string earlier than or equal to the one specified by the
max attribute. step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any val...
...And 10 more matches
<input type="time"> - HTML: Hypertext Markup Language
lways be in the form name=hh%3amm, or name=hh%3amm%3ass if seconds are included (see using the step attribute). ...
...icates that the contents of the time input should not be user-editable step the stepping interval to use both for user interfaces purposes and during constraint validation unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. for example, specifying a min of 14:00 and a
max of 2:00 means that the permitted time values start at 2:00 pm, run through midnight to the next day, ending at 2:00 am. see more in the making min and
max cross midnight section of this article. list the values of the list attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any value...
...t attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
max a string indicating the latest time to accept, specified in the same time value format as described above. if the specified string isn't a valid time, no
maximum value is set. min a string specifying the earliest time to accept, given in the time value format described previously. if the value specified isn't a valid time string, no minimum value is set. readonly a boolean attribute which, i...
...And 10 more matches
Web audio codec guide - Web media technologies
se lossless audio are because you require archival-quality storage, or because the audio samples will be remixed and recompressed, and you wish to avoid the amplification of artifacts in the audio due to recompression. for real-time streaming of audio, a lossy codec is usually required in order to ensure the flow of data can keep up with the audio playback rate regardless of network performance.
maximum number of channels the audio delivered to each speaker in a sound system is provided by one audio channel in a stream. monaural sound is a single channel. stereo sound is two. 5.1 surround sound has five audio channels, plus one low frequency enhancement (lfe) channel. lfe channels are specifically designed to store low-frequency audio data, and are commonly used to provide audio data for s...
...audio, such as vocals in different languages or descriptive audio for visually impaired people. audio frequency bandwidth the audio frequency bandwidth of a codec indicates the range of audio frequencies that can be represented using the codec. some codecs operate specifically by eliminating audio that falls outside a given frequency range. there is a correlation between the sample rate and the
maxium sound frequency that can be represented by a waveform represented by a codec. at a theoretical level, the
maximum frequency a codec can represent is the sample rate divided by two; this frequency is called the nyquist frequency. in reality, the
maximum is slightly lower, but it's close. the audio frequency bandwidth comes into play especially vividly when a codec is designed or configured to ...
...ort is provided by the operating system or an external library. ...
...And 10 more matches
Space Manager Detailed Design - Archive of obsolete content
e are no bands */ prbool ymost(nscoord& aymost) const; /** * returns a band starting at the specified y-offset. the band data * indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. ...
...e band data * indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. * * the local coordinate space origin, the y-offset, and the
max size * describe a rectangle that's used to clip the underlying band of * available space, i.e. ...
... indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. * * the local coordinate space origin, the y-offset, and the
max size * describe a rectangle that's used to clip the underlying band of * available space, i.e. * {0, ayoffset, a
maxsize.width, a
maxsize.height} in the local * coordinate space * * @param ayoffset the y-offset of where the band begins. ...
...And 9 more matches
Grid template areas - CSS: Cascading Style Sheets
ea: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } having defined these names i then create my layout. this time, instead of placing my items using line numbers specified on the items themselves, i create the whole layout on the grid container. ...
... display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: min
max(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;
max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not n...
... if i want to only display the footer directly under the main content i would need to leave the three cells underneath the sidebar empty. ...
...And 9 more matches
<input type="month"> - HTML: Hypertext Markup Language
="2017-06"> var monthcontrol = document.queryselector('input[type="month"]'); monthcontrol.value = '1978-06'; additional attributes in addition to the attributes common to <input> elements, month inputs offer the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options
max the latest year and month to accept as a valid input min the earliest year and month to accept as a valid input readonly a boolean which, if present, indicates that the input's value can't be edited step a stepping interval to use when incrementing and decrementing the value of the input field list the values of the list attribute is the id of a <dat...
...t attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
max the latest year and month, in the string format discussed in the value section above, to accept. if the value entered into the element exceeds this, the element fails constraint validation. if the value of the
max attribute isn't a valid string in "yyyy-mm" format, then the element has no
maximum value. this value must specify a year-month pairing later than or equal to the one specified by the...
...e min attribute. min the latest year and month to accept, in the same "yyyy-mm" format described above. if the value of the element is less than this, the element fails constraint validation. if a value is specified for min that isn't a valid year and month string, the input has no minimum value. this value must be a year-month pairing which is earlier than or equal to the one specified by the
max attribute. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed from javascript code that directly sets the value of the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. step the step ...
...And 9 more matches
<input type="password"> - HTML: Hypertext Markup Language
virtual keyboards. note: any forms involving sensitive information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode,
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. if the user hasn't e...
... (u+000d) characters are not permitted in a password value. when setting the value of a password control, line feed and carriage return characters are stripped out of the value. ...
...ers are not permitted in a password value. when setting the value of a password control, line feed and carriage return characters are stripped out of the value. ...
...And 9 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="x
maxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></sv...
...0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidy
max slice" x="50" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> ...
..."0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidy
max meet" x="105" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preserveaspectratio="xminymid slice" x="120" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="135" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> ...
...And 9 more matches
Border-radius generator - CSS: Cascading Style Sheets
m-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-
max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-
max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corne...
...-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body {
max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /...
...yle.cursor = "auto"; slider.style.cursor = "pointer"; }); var slidermotion = function slidermotion(e) { slider.style.cursor = "e-resize"; var delta = (e.clientx - startx) / obj.sensivity | 0; var value = delta * obj.step + start_value; setvalue(obj.topic, value); } return slider; } var inputslider = function(node) { var min = node.getattribute('data-min') | 0; var
max = node.getattribute('data-
max') | 0; var step = node.getattribute('data-step') | 0; var value = node.getattribute('data-value') | 0; var topic = node.getattribute('data-topic'); var unit = node.getattribute('data-unit'); var name = node.getattribute('data-info'); var sensivity = node.getattribute('data-sensivity') | 0; this.min = min; this.
max =
max > 0 ?
max : 100; this.step...
...And 8 more matches
Color picker tool - CSS: Cascading Style Sheets
"></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" data-info="z-index" data-
max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px...
... .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body {
max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /** * resize handle */ .resize-handle { width: 10px; height: 10px; background: url('...
...-sizing: border-box; box-sizing: border-box; display: table; } /** * picker zone */ #picker { padding: 10px; width: 980px; } .ui-color-picker { padding: 3px 5px; float: left; border-color: #fff; } .ui-color-picker .switch_mode { display: none; } .ui-color-picker .preview-color:hover { cursor: move; } /** * picker container */ #picker-samples { width: 375px; height: 114px;
max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #picker-samples .sample { width: 40px; height: 40px; margin: 5px; border: 1px solid #ddd; position: absolute; float: left; transition: all 0.2s; } #picker-samples .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #pic...
...And 8 more matches
grid-auto-columns - CSS: Cascading Style Sheets
d send us a pull request. if a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...ting additional columns. ...
...And 8 more matches
grid-template-columns - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...olumns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; grid-template-columns: min
max(100px, 1fr); grid-template-columns: fit-content(40%); grid-template-columns: repeat(3, 200px); grid-template-columns: subgrid; /* <auto-track-list> values */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; grid-template-columns: min
max(100px,
max-content) repeat(auto-fill, 200px) 20%; grid-template-columns: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-columns: inherit...
...ntributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. ...
...And 8 more matches
grid-template-rows - CSS: Cascading Style Sheets
ub repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...> values */ grid-template-rows: 100px 1fr; grid-template-rows: [linename] 100px; grid-template-rows: [linename1] 100px [linename2 linename3]; grid-template-rows: min
max(100px, 1fr); grid-template-rows: fit-content(40%); grid-template-rows: repeat(3, 200px); grid-template-rows: subgrid; /* <auto-track-list> values */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; grid-template-rows: min
max(100px,
max-content) repeat(auto-fill, 200px) 20%; grid-template-rows: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px) 100px; grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-te...
...ntributions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. ...
...And 8 more matches
<input type="date"> - HTML: Hypertext Markup Language
asnumber); // prints 1496275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (june 1st, 2017). it then reads that value back in string and number formats. ...
...back in string and number formats. additional attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description
max the latest acceptable date min the earliest acceptable date step the stepping interval, when clicking up and down spinner buttons and validating the date
max the latest date to accept. if the value entered into the element occurs afterward, the element fails constraint validation. if the value of the
max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no
maximum date value. if both the
max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute. min the ...
... step the step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. ...
...And 8 more matches
<input type="number"> - HTML: Hypertext Markup Language
ding a number inside the value attribute, like so: <input id="number" type="number" value="42"> additional attributes in addition to the attributes commonly supported by all <input> types, inputs of type number support these attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options
max the
maximum value to accept for this input min the minimum value to accept for this input placeholder an example value to display inside the field when it's empty readonly a boolean attribute indicating whether the value is read-only step a stepping interval to use when using up and down arrows to adjust the value, as well as for validation ...
...t attribute is the id of a <datalist> element located in the same document. the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
max the
maximum value to accept for this input. if the value entered into the element exceeds this, the element fails constraint validation. if the value of the
max attribute isn't a number, then the element has no
maximum value. this value must be greater than or equal to the value of the min attribute. min the minimum value to accept for this input. if the value of the element is less than this...
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. ...
...And 8 more matches
<input type="search"> - HTML: Hypertext Markup Language
ource for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the value contained in the search field. events change and input supported common attributes autocomplete, list,
maxlength, minlength, pattern, placeholder, required, size. idl attributes value methods select(), setrangetext(), setselectionrange(). value the value attribute contains a domstring representing the value contained in the search field. you can retrieve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation const...
...re details), the value can be any text string or an empty string (""). ...
...value can be any text string or an empty string (""). ...
...And 8 more matches
Image file type and format guide - Web media technologies
imated stickers for apple's imessage application (and the messages application on ios). they're also commonly used for the animated portions of web browsers' user interfaces. 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. true color 8 and 16 ...
...n jpeg or png format within the bmp file. mime type image/bmp file extension(s) .bmp specification no specification; 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. true color ...
...cally, modern content should use png for lossless and indexed still images, and should consider using apng for lossless animation sequences. mime type image/gif file extension(s) .gif specification gif87a specification gif89a specification browser compatibility all versions of chrome, edge, firefox, internet explorer, opera, and safari
maximum dimensions 65,536×65,536 pixels supported color modes color mode bits per component (d) description greyscale n/a gif does not include a dedicated greyscale format. true color n/a gif does not support true color pixels. indexed color ...
...And 8 more matches
Web video codec guide - Web media technologies
signed for use by both the <video> element and by webrtc. av1 currently offers three profiles: main, high, and professional with increasing support for color depths and chroma subsampling. in addition, a series of levels are specified, each defining limits on a range of attributes of the video. these attributes include frame dimensions, image area in pixels, display and decode rates, average and
maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process. for example, level av1 level 2.0 offers a
maximum frame width of 2048 pixels and a
maximum height of 1152 pixels, but its
maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. it's worth noting, however, that at least for firefox and chrome, the l...
...lopment rather than production. for this reason, encoding a video into av1 format takes a very long time, since all the work is done in software. for the time being, because of these factors, av1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future. ...
...ork is done in software. for the time being, because of these factors, av1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future. ...
...And 8 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
he <video> and <img> elements inside our first two columns, naked and unstyled. because the size of replaced elements is dictated by the size of the media inserted into them, and the media is a fixed size, they explode out of their containing elements and make a mess of the layout. this is pretty horrible, but generally this kind of problem is easily fixed with some simple css: img, video {
max-width: 100%; } this tells the replaced elements to remain constrained inside their container's widths, no matter what. however, if they aren't as wide as their containers, they will not stretch to fill them. in the snapshot example, we ended up with slightly different code: x-card:nth-child(1) video, x-card:nth-child(2) img { width: 100%; … } this is because in our case, we do in fact ...
...er, if they aren't as wide as their containers, they will not stretch to fill them. ...
...r case, we do in fact want the video and image to stretch to always fill their containers no matter what — a subtle but important difference from
max-width — and therefore always be the same size. the video always resizes dynamically, but the screen captures taken from it do not, so upon resizing the screen it was possible to end up with a messy layout with different sized elements when using
max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down. at these points you'll want to change the layout to rectify the layout problem, and this can be done using media queries. note: media queries are a css3 feature that allow you to selectively apply css depending on the results of ...
...And 8 more matches
Element Positioning - Archive of obsolete content
t get wider. the solution is to make the box flexible also. then, when you make the window wider, extra space will be available, so the box will grow to fill the extra space. because the box is larger, more extra space will be created inside it, and the flexible button inside it will grow to fit the available space. this process repeats for as many nested boxes as necessary. ...
...es as necessary. setting minimum and
maximum sizes you may want to allow an element to be flexible but constrain the size so that it cannot be larger than a certain size. or, you may want to set a minimum size. you can set this by using four attributes: minwidth; this specifies the minimum width that the element can be. minheight this specifies the minimum height that the element can be.
maxwidth this specifies the
maximum width that the element can be.
maxheight this specifies the
maximum height that the element can be. the values are always measured in pixels. you can also use the corresponding css properties, min-width, min-height,
max-width and
max-height. these properties are only useful for flexible elements. ...
...s the minimum height that the element can be.
maxwidth this specifies the
maximum width that the element can be.
maxheight this specifies the
maximum height that the element can be. the values are always measured in pixels. you can also use the corresponding css properties, min-width, min-height,
max-width and
max-height. these properties are only useful for flexible elements. by setting a
maximum height, for example, a stretchy button will only grow to a certain
maximum height. you will still be able to resize the window beyond that point but the button will stop growing in size. the box the button is inside will also continue to grow, unless you set a
maximum height on the box also. if two buttons are equally flexible, normally both will share the amount of extra space. if one butto...
...And 7 more matches
progressmeter - Archive of obsolete content
a meter which can be used to display the progress of a lengthy operation. it is drawn as a bar that is filled as the operation completes. in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined. this is used when the length of time to complete an operation is not known beforehand. more information is available in the xul tutorial. ...
...ss of a lengthy operation. it is drawn as a bar that is filled as the operation completes. in addition, an indeterminate progressmeter may be created by setting the mode attribute to undetermined. this is used when the length of time to complete an operation is not known beforehand. more information is available in the xul tutorial. ...
...the default value if not specified is 100 such that the value may be used as a percentage. mode type: one of the values below a determinedprogressmeter is used in cases where you know how long an operation will take. an undeterminedprogressmeter can be used when you don't and will typically be drawn as a spinning barber p...
...And 7 more matches
clamp() - CSS: Cascading Style Sheets
the clamp() css function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and
maximum. it takes three parameters: a minimum value, a preferred value, and a
maximum allowed value. the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val,
max) is resolved as
max(min, min(val,
max)) the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with t...
...for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a
maximum font-size. it has the same effect as the code in fluid typography but in one line, and without the use of media queries. syntax the clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value,
maximum value. the minimum value is the smallest (most negative) value. this is the lower bound in the range of allowed values. if the pr...
...expressions as its parameter, in the order of minimum value, preferred value,
maximum value. the minimum value is the smallest (most negative) value. this is the lower bound in the range of allowed values. if the preferred value is less than this value, the minimum value will be used. the preferred value is the expression whose value will be used as long as the result is between the minimum and
maximum values. the
maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound. ...
...And 7 more matches
grid-auto-rows - CSS: Cascading Style Sheets
active-examples and send us a pull request. if a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...the auto-placement algorithm creating additional rows. ...
...And 7 more matches
<input type="tel"> - HTML: Hypertext Markup Language
numbers. using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient. note: browsers that don't support type tel fall back to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list,
maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string (""). additional attributes in addition to...
...t either represents a telephone number or is an empty string (""). ...
...ts a telephone number or is an empty string (""). ...
...And 7 more matches
<input type="week"> - HTML: Hypertext Markup Language
ook like week=2017-w01. ...
... description
max the latest year and week to accept as valid input min the earliest year and week to accept as valid input readonly a boolean which, if present, indicates that the user cannot edit the field's contents step the stepping interval (the distance between allowed values) to use for both user interface and constraint validation
max the latest (time-wise) year and week number, in the string format discussed in the value section above, to accept. if the value entered into the element exceeds this, the element fails constraint validation. if the value of the
max attribute isn't a valid week string, then the element has no
maximum value. this value must be greater than or equal to the year and week specified by the min attrib...
... readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. ...
...And 7 more matches
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
he starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmeterelement attributes this element includes the global attributes. value the current numeric value. ...
...datory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlmeterelement attributes this element includes the global attributes. value the current numeric value. this must be between the minimum and
maximum values (min attribute and
max attribute) if they are specified. if unspecified or malformed, the value is 0. if specified, but not within the range given by the min attribute and
max attribute, the value is equal to the nearest end of the range. note: unless the value attribute is between 0 and 1 (inclusive), the min and
max attributes should define the range so that the value attribute's value is within it. min the lowe...
... low the upper numeric bound of the low end of the measured range. ...
...And 7 more matches
Background Tasks API - Web APIs
you make use of idle periods, but instead runs your code when possible, leaving us to do the best we can to avoid causing the user to experience performance lag. window.requestidlecallback = window.requestidlecallback || function(handler) { let starttime = date.now(); return settimeout(function() { handler({ didtimeout: false, timeremaining: function() { return math.
max(0, 50.0 - (date.now() - starttime)); } }); }, 1); } if window.requestidlecallback is undefined, we create it here. the function begins by recording the time at which our implementation was called. we'll be using that to compute the value returned by our shim for timeremaining(). then we call settimeout(), passing into it a function which runs the callback passed into our implementat...
...y do it once per frame the shim to function even if idle callbacks aren't supported. already discussed above, so it's hidden here to save space in the article. window.requestidlecallback = window.requestidlecallback || function(handler) { let starttime = date.now(); return settimeout(function() { handler({ didtimeout: false, timeremaining: function() { return math.
max(0, 50.0 - (date.now() - starttime)); } }); }, 1); }; window.cancelidlecallback = window.cancelidlecallback || function(id) { cleartimeout(id); }; managing the task queue next, let's look at the way we manage the tasks that need to be performed. we're going to do this by creating a fifo queue of tasks, which we'll run as time allows during the idle callback period. enqueueing t...
...datedisplay() function is responsible for drawing the contents of the progress box and the log. it's called by the browser when the dom is in a safe condition for us to apply changes during the process of rendering the next frame. ...
...And 6 more matches
<input type="text"> - HTML: Hypertext Markup Language
e source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the text contained in the text field. events change and input supported common attributes autocomplete, list,
maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange(). value the value attribute is a domstring that contains the current value of the text entered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if...
...nput (see validation for more details), the value may be an empty string (""). ...
...ion for more details), the value may be an empty string (""). ...
...And 6 more matches
<input type="url"> - HTML: Hypertext Markup Language
pseudo-classes are automatically applied as appropriate to visually denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list,
maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <input> element's value attribute contains a domstring which is automatically validated as conforming to url syntax. more specifically, there are two possible value forma...
...or details on how urls are validated to ensure that they're formatted properly. ...
... urls are validated to ensure that they're formatted properly. ...
...And 6 more matches
HTML documentation index - HTML: Hypertext Markup Language
nt, reference, security the crossorigin attribute, valid on the <audio>, <img>, <link>, <script>, and <video> elements, provides support for cors, defining how the element handles crossorigin requests, thereby enabling the configuration of the cors requests for the element's fetched data. depending on the element, the attribute can be a cors settings attribute. ...
...img>, <link>, <script>, and <video> elements, provides support for cors, defining how the element handles crossorigin requests, thereby enabling the configuration of the cors requests for the element's fetched data. depending on the element, the attribute can be a cors settings attribute. ...
...d <video> elements, provides support for cors, defining how the element handles crossorigin requests, thereby enabling the configuration of the cors requests for the element's fetched data. depending on the element, the attribute can be a cors settings attribute. 40 html attribute:
max attribute, attributes, constraint validation, html, reference the
max attribute defines the
maximum value that is acceptable and valid for the input containing the attribute. ...
...And 6 more matches
Cache-Control - HTTP
caching directives have the following rules to be valid: case-insensitive, but lowercase is recommended. multiple directives are comma-separated. some directives have an optional argument, which can be either a token or a quoted-string. (see spec for definitions) cache request directives standard cache-control directives that can be used by the client in an http request. cache-control:
max-age=<seconds> cache-control:
max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response. cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-contro...
...he cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response. cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: public cache-control: private cache-control: proxy-revalidate cache-control:
max-age=<seconds> cache-control: s-
maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. check the compatibility table for their support; user-agents that don't recognize them should ignore them. cache-control: immutable cache-control: stale-while-revalidate=<seconds> cache-control: stale-if-error=<seconds>...
... private the response may be stored only by a browser's cache, even if the response is normally non-cacheable. if you mean to not store the response in any cache, use no-store instead. this directive is not effective in preventing caches...
...And 6 more matches
HTTP Public Key Pinning (HPKP) - HTTP
whose validated certificate chain terminates at a user-defined trust anchor (rather than a built-in trust anchor). this means that for users who imported custom root certificates all pinning violations are ignored. ...
... includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. report-uri optional if this optional parameter is specified, pin validation failures are reported to the given url. ...
...e base64 encoded information for a website. ...
...And 6 more matches
Array.prototype.reduce() - JavaScript
eerror will be thrown. if the array only has one element (regardless of position) and no initialvalue is provided, or if initialvalue is provided but the array is empty, the solo value will be returned without calling callback. ...
...y only has one element (regardless of position) and no initialvalue is provided, or if initialvalue is provided but the array is empty, the solo value will be returned without calling callback. ...
...egardless of position) and no initialvalue is provided, or if initialvalue is provided but the array is empty, the solo value will be returned without calling callback. ...
...And 6 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
jor.minor.release.build[+] where only digits were allowed. the toolkit version format supports the firefox version format but allows greater flexibility. how applications determine compatibility when installing add-ons applications look at the targetapplication entries in the add-on's install.rdf. an entry must exist with an id matching the id of the application. additionally the minversion and
maxversion of this entry must be a range that includes the version of the running application. if the application has a targetapplication entry but it is for an incompatible version then the application will retrieve updated compatibility information from the add-on's updateurl. if the install.rdf contains any targetplatform entries then the platform of the currently running application must be lis...
...pplication will retrieve updated compatibility information from the add-on's updateurl. if the install.rdf contains any targetplatform entries then the platform of the currently running application must be listed or the installation will be rejected. firefox 3 note in applications based on gecko 1.9 you can also use a targetapplication entry with an id toolkit@mozilla.org and minversion and
maxversion that match the toolkit version of the running application. this allows you to say that your add-on will install into any toolkit based application. overriding compatibility checking for testing purposes you can tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. n...
...n tell the application to somewhat ignore compatibility checks when installing add-ons. simply create the boolean preference extensions.checkcompatibility and set it to false. note: before firefox 1.5 the preference app.extensions.version could be used to override the version that the application believed itself to be to allow normally incompatible extensions to install. choosing minversion and
maxversion minversion and
maxversion should specify the range of versions of the application you have tested with. in particular you should never specify a
maxversion that is larger than the currently available version of the application since you do not know what api and ui changes are just around the corner. with compatibility updating it is not necessary to release a whole new version of the exte...
...And 5 more matches
textbox - Archive of obsolete content
s | properties | methods | related ] an input field where the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
...properties | methods | related ] an input field where the user can enter text. it is similar to the html input element. only one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
..., emptytext, hidespinbuttons, increment, label,
max,
maxlength, min, multiline, newlines, onblur, onchange, onfocus, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, inputfield, label,
max,
maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound methods decrease, increase, reset, select, setselectionrange style classes plain examples <vbox> <label control="your-name" value="enter your name:"/> <textbox id="your-name" value="john"/> </vbox> attribute...
...And 5 more matches
Floats - Learn web development
suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%;
max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow. to float the text around it add the float and margin-right propert...
... sed est. nam id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...d est. nam id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...And 5 more matches
IAccessible2
other-licenses/ia2/accessible2.idlnot scriptable please add a summary to this article. ...
...2/accessible2.idlnot scriptable please add a summary to this article. ...
...es, [out] long nextendedstates ); [propget] hresult groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [propget] hresult indexinparent([out] long indexinparent ); [propget] hresult locale([out] ia2locale locale ); [propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long
maxlocalizedextendedstates, [out, size_is(,
maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult nrelations([out] long nrelations ); [propget] hresult relation([in] long relationindex, [out] iaccessiblerelation relation ); [propge...
...And 5 more matches
nsIScrollable
fox 29.0 / thunderbird 29.0 / seamonkey 2.26) method overview long getcurscrollpos(in long scrollorientation); obsolete since gecko 29.0 long getdefaultscrollbarpreferences(in long scrollorientation); void getscrollbarvisibility(out boolean verticalvisible, out boolean horizontalvisible); void getscrollrange(in long scrollorientation, out long minpos, out long
maxpos); obsolete since gecko 29.0 void setcurscrollpos(in long scrollorientation, in long curpos); obsolete since gecko 29.0 void setcurscrollposex(in long curhorizontalpos, in long curverticalpos); obsolete since gecko 29.0 void setdefaultscrollbarpreferences(in long scrollorientation, in long scrollbarpref); void setscrollrange(in long scrollorientation, in long...
... constant value description scrollorientation_x 1 horizontal scrolling. when passing this in to a meth...
... constant value description scrollorientation_x 1 horizontal scrolling. when passing this in to a method you are requesting or setting data for the horizontal scrollbar. scrollorientation_y ...
...And 5 more matches
Browser detection using the user agent - HTTP
me: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.
maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("
maxtouchpoints" in navigator)) { /*code here*/}. using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself. rather, add in touch conveni...
...nge the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself. rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using css by simply increasing the font size). here is an example of code that increases the padding of #examplebutton to 1em on mobile devices. ...
...u will only create more work and maintenance for yourself. rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using css by simply increasing the font size). here is an example of code that increases the padding of #examplebutton to 1em on mobile devices. ...
...And 5 more matches
Install Manifests - Archive of obsolete content
af44bf7-a45e-4450-979c-91cf07434c3d}</em:id> name the name of the add-on; intended for display in the ui. examples <em:name>my extension</em:name> targetapplication an object specifying an application targeted by this add-on. this means that the add-on will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application ids and valid min/
maxversions for them see valid application versions for add-on developers), from the minimum version (<em:minversion>) up to and including the
maximum version (<em:
maxversion>). however, while <em:
maxversion> is a required property, it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are f...
..., it is ignored unless you also set <em:strictcompatibility> in the main <description> of your install.rdf (i.e. not in <em:targetapplication>). these version strings are formatted in the same fashion as the version property and will be compared to the application version; this allows the extension author to specify which versions of firefox an extension has been tested with. id, minversion, and
maxversion are all required. note: extensions compatible with firefox 3.5 should specify a
maxversion of 3.5.*, so that they are automatically compatible with security and stability updates. for firefox 3.0, a
maxversion of 3.0.* should be used. extensions compatible only with firefox or thunderbird 2 should specify a
maxversion of 2.0.0.*. the install manifest must specify at least one of these ...
... type an integer value representing the type of add-on. ...
...And 4 more matches
Index - Archive of obsolete content
to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their
maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 7 accelerated xul, xul attribute, xul reference no summary! 8 acceltext xul attributes, xul reference no summary! 9 accessible ...
...erence no summary! 177 lightweightthemesfooter no summary! 178 linkedpanel xul attributes, xul reference no summary! 179 listcell.type xul attributes, xul reference no summary! 180 listitem.type xul attributes, xul reference no summary! 181 matchcaseaccesskey no summary! ...
... no summary! 178 linkedpanel xul attributes, xul reference no summary! 179 listcell.type xul attributes, xul reference no summary! 180 listitem.type xul attributes, xul reference no summary! 181 matchcaseaccesskey no summary! 182
max xul attributes, xul reference no summary! 183
maxheight xul attributes, xul reference no summary! 184
maxlength xul attributes, xul reference no summary! 185
maxpos xul attributes, xul reference no summary! 186
maxrows xul attributes, xul reference no summary! 187
maxwidth xul attributes, xul reference no summary! 188 member xul attribute...
...And 4 more matches
Numeric Controls - Archive of obsolete content
e to the value number. this type of textbox may only be used to enter numbers. other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. ...
... used to enter numbers. other characters are not allowed and are just ignored if typed. in addition, arrow buttons appear beside the textbox to allow the user to cycle through the values. as with other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. however, the minimum and
maximum values can also be specified using the min and
max attributes. ...
...th other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. however, the minimum and
maximum values can also be specified using the min and
max attributes. if these are set, you can control the range of values that the textbox may be set to. if the user enters a value less or greater than this value, it will be reset to the minimum or
maximum value as necessary. for instance, the following numeric textbox has a range between 1 and 20. <textbox type="number" min="1"
max="20"/> as the default value isn't specified, it will default to 1, the minimum value. the min attribute is set to 1 to indicate a minimum possible value of 1 and the
max attribute is set to 20 to indiciate a
maximum possible value of 20. if the minimum value is not...
...And 4 more matches
-ms-content-zoom-limit - Archive of obsolete content
a zoom factor of 100% corresponds to no zooming. larger values zoom in. ...
...a zoom factor of 100% corresponds to no zooming. larger values zoom in. ...
...xtension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-
max properties. initial valueas each of the properties of the shorthand:-ms-content-zoom-limit-
max: 400%-ms-content-zoom-limit-min: 100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas each of the properties of the shorthand:-ms-content-zoom-limit-
max: the largest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.-ms-content-zoom-limit-min: the smallest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. ...
...And 4 more matches
The HTML5 input types - Learn web development
his control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control. on devices with dynamic keyboards, the numeric keyboard is generally displayed. the following screenshot (from firefox for android) provides an example: with the number input type, you can constrain the minimum and
maximum values allowed by setting the min and
max attributes. you can also use the step attribute to set the increment increase and decrease caused by pressing the spinner buttons. by default, the number input type only validates if the number is an integer. to allow float numbers, specify step="any". if omitted, the step value defaults to 1, meaning only whole numbers are valid. let's look at some...
...s if the number is an integer. to allow float numbers, specify step="any". if omitted, the step value defaults to 1, meaning only whole numbers are valid. let's look at some examples. the first one below creates a number control whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2. <input type="number" name="age" id="age" min="1"
max="10" step="2"> the second one creates a number control whose value is restricted to any value between 0 and 1 inclusive, and whose increase and decrease buttons change its value by 0.01. <input type="number" name="change" id="pennies" min="0"
max="1" step="0.01"> the number input type makes sense when the range of valid values is limited, for example a person's age or height. if the range is t...
...usa zip codes, which range from 00001 to 99999), the tel type might be a better option; it provides the numeric keypad while forgoing the number's spinner ui feature. note: number inputs are not supported in versions of internet explorer below 10. slider controls another way to pick a number is to use a slider. you see these quite often on sites like housebuying sites where you want to set a
maximum property price to filter by. let's look at a live example to illustrate this: usage-wise, sliders are less accurate than text fields. therefore, they are used to pick a number whose precise value is not necessarily important. a slider is created using the <input> with its type attribute set to the value range. the slider-thumb can be moved via mouse or touch, or with the arrows of the key...
...And 4 more matches
HTMLInputElement.stepDown() - Web APIs
if a number is passed as the parameter. the method, when invoked, decrements the value by (step * n), where n defaults to 1 if not specified, and step defaults to the default value for step if not specified. valid on all numeric, date, and time input types that support the step attribute, includingdate, month, week, time, datetime-local, number, and range. ...
...onth, week, time, datetime-local, number, and range. given <input id="mytime" type="time"
max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes. mytime.step(), with no parameter, would have resulted in 16:45, as n defaults to 1. ...
...:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes. mytime.step(), with no parameter, would have resulted in 16:45, as n defaults to 1. <!-- decrements by intervals of 900 seconds (15 minute) --> <input type="time"
max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input type="date"
max="2019-12-25" step="7"> <!-- decrements by intervals of 12 months (one year) --> <input type="month"
max="2019-12" step="12"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the form control. the default value for the parameter, if not is passed, is 1. the method will not cause the...
...And 4 more matches
RTCDataChannel - Web APIs
to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. ...
...f bytes of buffered outgoing data that is considered "low." the default value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and 65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel. ...
...ult value is 0.id read only the read-only rtcdatachannel property id returns an id number (between 0 and 65,534) which uniquely identifies the rtcdatachannel.label read only the read-only rtcdatachannel property label returns a domstring containing a name describing the data channel. ...
...And 4 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
d then bring in a three-column layout for wider screens. i am going to create this layout using the named template areas that we learned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...of the many frameworks or grid systems you may be accustomed to laying out your site on a 12- or 16-column flexible grid. we can create this type of system using css grid layout. as a simple example, i am creating a 12-column flexible grid that has 12 1fr-unit column tracks, they all have a start line named col-start. this means that we will have twelve grid lines named col-start. .wrapper {
max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper. <div class...
...to do is specify the start and end line for the item. building a layout using the 12-column system to see how this layout method works in practice, we can create the same layout that we created with grid-template-areas, this time using the 12-column grid system. i am starting with the same markup as used for the grid template areas example. ...
...And 4 more matches
Grid wrapper - CSS: Cascading Style Sheets
the grid wrapper pattern is useful for aligning grid content within a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired. requirements items placed on the grid should be able to align to a horizontally-centered
max-width wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid min
max() function to define the grid track sizes in the grid-template-columns property. ...
...he edge of the containing element or page when desired. requirements items placed on the grid should be able to align to a horizontally-centered
max-width wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid min
max() function to define the grid track sizes in the grid-template-columns property. for the central columns with a
maximum width we can set a minimum value of 0 or greater and a
maximum value that specifies the
maximum size the column tracks will grow to. ...
...recipe download this example choices made this recipe uses the css grid min
max() function to define the grid track sizes in the grid-template-columns property. for the central columns with a
maximum width we can set a minimum value of 0 or greater and a
maximum value that specifies the
maximum size the column tracks will grow to. using a numeric unit (pixels, ems, rems) will create a fixed
maximum size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context. the outer two columns have a
maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. useful fallbacks or alternative methods when using this recipe at page level it can be useful to s...
...And 4 more matches
fit-content() - CSS: Cascading Style Sheets
the fit-content() css function clamps a given size to an available size according to the formula min(
maximum size,
max(minimum size, argument)). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the function can be used as a track size in css grid properties, where the
maximum size is defined by
max-content and the minimum size by auto, which is calculated similar to auto (i.e., min
max(auto,
max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. ...
... syntax the fit-content() function accepts a <length> or a <percentage> as an argument. ...
... syntax the fit-content() function accepts a <length> or a <percentage> as an argument. ...
...And 4 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example the request header of note is origin, which shows that the invocation is coming from https://foo.example. http/1.1 200 ok date: mon, 01 dec 2008 00:23:53 gmt server: apache/2 access-control-allow-origin: * keep-alive: timeout=2,
max=100 connection: keep-alive transfer-encoding: chunked content-type: application/xml […xml data…] in response, the server sends back an access-control-allow-origin header. the use of the origin header and of access-control-allow-origin show the access control protocol in its simplest use. in this case, the server responds with access-control-allow-origin: *, which means that the resource can...
...deflate connection: keep-alive origin: http://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type http/1.1 204 no content date: mon, 01 dec 2008 01:15:39 gmt server: apache/2 access-control-allow-origin: https://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-
max-age: 86400 vary: accept-encoding, origin keep-alive: timeout=2,
max=100 connection: keep-alive once the preflight request is complete, the real request is sent: post /doc http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 a...
...the browser determines that it needs to send this based on the request parameters that the javascript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. option...
...And 4 more matches
Creating Reusable Modules - Archive of obsolete content
var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } putting it together the complete add-on adds a button to firefox: when the user clicks the button, we ask th...
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } putting it together the complete add-on adds a button to firefox: when the user clicks the button, we ask them to select a file, compute the hash, and log the hash to ...
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); const n...
...And 3 more matches
StringView - Archive of obsolete content
{ var vsource, noutptlen, ncharstart, ncharend, nendidx, fgetinptchrsize, fgetinptchrcode; if (ntranscrtype & 4) { /* input is string */ vsource = vinput; noutptlen = ninptlen = vsource.length; ntranscrtype ^= this.encoding === "utf-32" ? 0 : 2; /* ...or...: ntranscrtype ^= number(this.encoding !== "utf-32") << 1; */ nstartidx = ncharstart = noffset ? ...
... & 4) { /* input is string */ vsource = vinput; noutptlen = ninptlen = vsource.length; ntranscrtype ^= this.encoding === "utf-32" ? 0 : 2; /* ...or...: ntranscrtype ^= number(this.encoding !== "utf-32") << 1; */ nstartidx = ncharstart = noffset ? math.
max((noutptlen + noffset) % noutptlen, 0) : 0; nendidx = ncharend = (number.isinteger(nlength) ? ...
...!== "utf-32") << 1; */ nstartidx = ncharstart = noffset ? math.
max((noutptlen + noffset) % noutptlen, 0) : 0; nendidx = ncharend = (number.isinteger(nlength) ? math.min(math.
max(nlength, 0) + nstartidx, noutptlen) : noutptlen) - 1; } else { /* input is stringview */ vsource = vinput.rawdata; ninptlen = vinput.makeindex(); nstartidx = ncharstart = noffset ? math.
max((ninptlen + noffset) % ninptlen, 0) : 0; noutptlen = number.isinteger(nlength) ? ...
...And 3 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
n1" ordinal="3"/> <button label="button2" ordinal="2"/> <button label="button3" ordinal="1"/> </vbox> listing 5: changing order with ordinal figure 4: output of listing 5 box size you can set the size of xul elements explicitly using the width and height attributes, as shown in listing 6. if you are creating elements that can grow using the flex attribute, you can also set minimums and
maximums using minwidth, minheight,
maxwidth, and
maxheight. these all use pixels as the unit of size. <button label="button" width="200" height="100"/> listing 6: setting the size of a button also, as shown in listing 7, you can embed css inline into elements via the style attribute, which allows you to set sizes using units other than pixels. <button label="button" style="min-width: 10em;"/> ...
.... a common attribute that can be set on all of them is the crop attribute. by applying the crop attribute to elements with the label attribute set or to the label element, part of the label will be replaced by an ellipsis (…) if it overflows the width of the parent element. the part of the label that gets cropped can be controlled by setting its value to start, center, or end. you can set the
maximum width of the box using the css
max-width property. checkboxes the checkbox shown in figure 11 was marked up using the checkbox element. when it is in its checked state, its checked attribute is set to true. <checkbox label="checkbox checked" checked="true"/> <checkbox label="checkbox unchecked" checked="false"/> listing 11: checkboxes in different state figure 11: output from listing ...
... accept text input. in html, there are two separate elements—input for one line of text, and textarea for multiple lines. but both these functions are handled by textbox as shown in listing 16, which produces output as shown in figure 13. the textbox element uses the value attribute to set its default content; content entered by the user also can be captured using the value attribute. to set a
maximum length in characters, declare the
maxlength attribute with a positive integer value. setting type="password" will turn the textbox into a special password-entry field, in which characters are hidden as they're typed. every character entered into a textbox generates an input event. if you use the oninput event handler, you can implement commands that reflect user input in real time. <vbox al...
...And 3 more matches
jspage - Archive of obsolete content
ocument"}}; new document(document);array.implement({every:function(c,d){for(var b=0,a=this.length;b<a;b++){if(!c.call(d,this[b],b,this)){return false;}}return true; },filter:function(d,e){var c=[];for(var b=0,a=this.length;b<a;b++){if(d.call(e,this[b],b,this)){c.push(this[b]);}}return c;},clean:function(){return this.filter($defined); },indexof:function(c,d){var a=this.length;for(var b=(d<0)?math.
max(0,a+d):d||0;b<a;b++){if(this[b]===c){return b;}}return -1;},map:function(d,e){var c=[]; for(var b=0,a=this.length;b<a;b++){c[b]=d.call(e,this[b],b,this);}return c;},some:function(c,d){for(var b=0,a=this.length;b<a;b++){if(c.call(d,this[b],b,this)){return true; }}return false;},associate:function(c){var d={},b=math.min(this.length,c.length);for(var a=0;a<b;a++){d[c[a]]=this[a];}return d;},link:fun...
...ments:a}); },bindwithevent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.
max(b,this));},round:function(a){a=math.pow(10,a||0);return math.round(this*a)/a;},times:function(b,c){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefloat(this);},toint:function(a){return parseint(this,a||10);}});number.alias("times","each"); (function(b){var a={};b.each(function(c){if(!number[c]){a[c]=function(){return math[c].apply(null,[this].concat($a(arguments)));};...
...){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefloat(this);},toint:function(a){return parseint(this,a||10);}});number.alias("times","each"); (function(b){var a={};b.each(function(c){if(!number[c]){a[c]=function(){return math[c].apply(null,[this].concat($a(arguments)));};}});number.implement(a); })(["abs","acos","asin","atan","atan2","ceil","cos","exp","floor","log","
max","min","pow","sin","sqrt","tan"]);string.implement({test:function(a,b){return((typeof a=="string")?new regexp(a,b):a).test(this); },contains:function(a,b){return(b)?(b+this+b).indexof(b+a+b)>-1:this.indexof(a)>-1;},trim:function(){return this.replace(/^\s+|\s+$/g,"");},clean:function(){return this.replace(/\s+/g," ").trim(); },camelcase:function(){return this.replace(/-\d/g,function(a){return a.c...
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
the example below will create an autocomplete textbox that will search the user's history. ...
... below will create an autocomplete textbox that will search the user's history. ...
...onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label,
maxlength,
maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/...
...And 3 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
sion method. ...
.... ...
...ons, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label,
maxlength,
maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat...
...And 3 more matches
Table Reflow Internals - Archive of obsolete content
ned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various computed values, resolved style structs possible request for preferred size and more. review of reflow the reflow metrics contains:
max element size (if requested) - the minimum size it can be preferred size (if requested) - the size it would like to be given no size constraints. desired size - the size it would like to be given the avail size. this is equivalent to preferred size if the avail size is not constrained. review of reflow the reflowee sets various sizes in the reflow metrics after (possibly) reflowing some or all...
... table reflow table reflows row groups (continued) the...
... ↓ nstablecell frame ↓ nsblock frame table reflow outer table reflows table and caption (if present) table reflows row groups in multiple passes pass 1 - unconstrained width, height and requests
max elem width. 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). table reflow table reflows row groups (continued) the row group figures out the row heights given its style height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 r...
...And 3 more matches
-ms-scroll-limit - Archive of obsolete content
the -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-
max, and -ms-scroll-limit-y-
max properties. ...
... the -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-
max, and -ms-scroll-limit-y-
max properties. ...
... the -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-
max, and -ms-scroll-limit-y-
max properties. ...
...And 3 more matches
Legacy layout methods - Learn web development
/p> </div> each one of the columns needs an outer element to contain its content and let us manipulate all of it at once. in this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. first, of all, apply the following to your html to provide some basic setup: body { width: 90%;
max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the wid...
...t. nam id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...e need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%. updating our grid to get started in this section, make a new copy of your previous example page, or make a local copy of our simple-grid-finished.html code to use as a starting point. update the second css rule (with the .wrapper selector) as follows: body { width: 90%;
max-width: 980px; margin: 0 auto; } .wrapper { padding-right: 2.08333333%; } not only have we given it a percentage width, we have also added a
max-width property in order to stop the layout becoming too wide. next, update the fourth css rule (with the .col selector) like so: .col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); } now comes the s...
...And 3 more matches
Multiple-column layout - Learn web development
ount or column-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column. column-count example body { width: 90%;
max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. cras porttitor imperdiet nunc, at ultricies tellus laoreet s...
... to use column-width as follows: .container { column-width: 200px; } the browser will now give you as many columns as it can of the size that you specify; any remaining space is then shared between the existing columns. this means that you will not get exactly the width that you specify, unless your container is exactly divisible by that width. column-width example body { width: 90%;
max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. cras porttitor imperdiet nunc, at ultricies tellus laoreet sit ame...
...ar way to the border property that you encountered in previous lessons, column-rule is a shorthand for column-rule-color, column-rule-style, and column-rule-width, and accepts the same values as border. .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } try adding rules of different styles and colors. styling the columns body { width: 90%;
max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id ...
...And 3 more matches
Example 1 - Learn web development
"option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
... border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%;
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class...
..."option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow ...
...And 3 more matches
Encrypt Decrypt_MAC_Using Token
date */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing. */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac. */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned ...
... { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac. ...
... * compute mac. ...
...And 3 more matches
Shell global objects
other principals. the absence of a principal is treated as if its bits were 0xffff, for subsumption purposes. if this property is omitted, supply no principal. createmappedarraybuffer(filename, [offset, [size]]) create an array buffer that mmaps the given file. addpromisereactions(promise, onresolve, onreject) calls the js::addpromisereactions jsapi function with the given arguments. get
maxargs() return the
maximum number of supported args for a call. objectemulatingundefined() return a new object obj for which typeof obj === "undefined", obj == null and obj == undefined (and vice versa for !=), and toboolean(obj) === false. iscachingenabled() return whether js caching is enabled. setcachingenabled(b) enable or disable js caching. cacheentry(code) return a new opaque object...
...ny zones that were scheduled for gc via schedulegc. if shrinking is passed as the optional second argument, perform a shrinking gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. ...
...at were scheduled for gc via schedulegc. if shrinking is passed as the optional second argument, perform a shrinking gc rather than a normal gc. minorgc([abouttooverflow]) run a minor collector on the nursery. when abouttooverflow is true, marks the store buffer as about-to-overflow before collecting. gcparam(name [, value]) wrapper for js_[gs]etgcparameter. ...
...And 3 more matches
nsIWebProgressListener
derbird 15 / seamonkey 2.12) nsiwebprogress describes the parent-child relationship of nsiwebprogress instances. ...
...es the parent-child relationship of nsiwebprogress instances. ...
...rom gecko 11 onprogresschange() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange() being called with astateflags including the state_stop and state_is_window flags). ...
...And 3 more matches
HTMLInputElement - Web APIs
ment's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). possible values are: on: the browser can autocomplete the value using previously stored value off: the user must explicity enter a value
max string: returns / sets the element's
max attribute, containing the
maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
maxlength long: returns / sets the element's
maxlength attribute, containing the
maximum number of characters (in unicode code points) that the value can have. (if you set this to a negative number, an ...
... minlength long: returns / sets the element's minlength attribute, containing the minimum number of characters (in unicode code points) that the value can have. ...
... minlength long: returns / sets the element's minlength attribute, containing the minimum number of characters (in unicode code points) that the value can have. ...
...And 3 more matches
Web audio spatialization basics - Web APIs
ke into account the human head when figuring out where the sound is. pretty clever stuff. let's use the hrtf model! const pannermodel = 'hrtf'; the coneinnerangle and coneouterangle properties specify where the volume emanates from. by default, both are 360 degrees. our boombox speakers will have smaller cones, which we can define. the inner cone is where gain (volume) is always emulated at a
maximum and the outer cone is where the gain starts to drop away. the gain is reduced by the value of the coneoutergain value. let's create constants that store the values we'll use for these parameters later on: const innercone = 60; const outercone = 90; const outergain = 0.3; the next parameter is distancemodel — this can only be set to linear, inverse, or exponential. these are different alg...
...hese parameters later on: const innercone = 60; const outercone = 90; const outergain = 0.3; the next parameter is distancemodel — this can only be set to linear, inverse, or exponential. these are different algorithms, which are used to reduce the volume of the audio source as it moves away from the listener. ...
...ter on: const innercone = 60; const outercone = 90; const outergain = 0.3; the next parameter is distancemodel — this can only be set to linear, inverse, or exponential. these are different algorithms, which are used to reduce the volume of the audio source as it moves away from the listener. ...
...And 3 more matches
ARIA: grid role - Accessibility
} tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = document.queryselectorall('table tbody tr'), row = 0, col = 0,
maxrow = trs.length - 1,
maxcol = 0; array.prototype.foreach.call(trs, function(gridrow, i){ array.prototype.foreach.call(gridrow.queryselectorall('td'), function(el, i){ el.dataset.row = row; el.dataset.col = col; col = col + 1; }); if (col>
maxcol) {
maxcol = col - 1; } col = 0; row = row + 1; }); function moveto(newrow, newcol) { var tgt = document.queryselector('[data...
... var i = 0; var result; do { var j = 0; var result; do { result = moveto(i, j); j++; } while (result == false); i++; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i =
maxrow; var result; do { var j =
maxcol; do { result = moveto(i, j); j--; } while (result == false); i--; } while (result == false); } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } ...
... } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var result; do { result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i =
maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.preventdefault(); }); html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> ...
...And 3 more matches
height - CSS: Cascading Style Sheets
syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
... syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
...lated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
...And 3 more matches
@viewport - CSS: Cascading Style Sheets
r @viewport is weak at this time, with support being largely available in internet explorer and edge. even in those browsers, only a small number of descriptors are available. browsers will ignore @viewport if they don't support it, and will ignore any descriptors that they don't recognize. min-width used in the determination of the width of the viewport when the document is first displayed.
max-width used in the determination of the width of the viewport when the document is first displayed. width a shorthand descriptor for setting both min-width and
max-width. min-height used in the determination of the height of the viewport when the document is first displayed.
max-height used in the determination of the height of the viewport when the document is first displayed. height a s...
... user-zoom controls whether or not the user should be able to change the zoom factor. orientation controls the document's orientation. ...
... user-zoom controls whether or not the user should be able to change the zoom factor. orientation controls the document's orientation. viewport-fit controls the display of the document on non-rectangular displays. ...
...And 3 more matches
repeat() - CSS: Cascading Style Sheets
rows that exhibit a recurring pattern to be written in a more compact form. this function can be used in the css grid properties grid-template-columns and grid-template-rows. ...
...tion can be used in the css grid properties grid-template-columns and grid-template-rows. ...
...l-start] 60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start]
max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] min
max(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle]
max-content [col-end]) /* <auto-repeat> values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] min
max(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-en...
...And 3 more matches
width - CSS: Cascading Style Sheets
sets an element's width. by default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ource for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-width and
max-width properties override width. syntax /* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* keyword values */ width:
max-content; width: min-content; width: fit-content(20em); width: auto; /* global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following keyword values: min-content,
max-content, fit-content, auto. a <length> or a <percentage>. values <length> defines the width as an absolute value. <percentage> defines the width as a per...
...width: unset; the width property is specified as either: one of the following keyword values: min-content,
max-content, fit-content, auto. a <length> or a <percentage>. values <length> defines the width as an absolute value. <percentage> defines the width as a percentage of the containing block's width. auto the browser will calculate and select a width for the specified element.
max-content the intrinsic preferred width. min-content the intrinsic minimum width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(
max-content,
max(min-content, <length-percentage>)). accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is...
...And 3 more matches
Video player styling basics - Developer guides
ther basic — this is intentional, as the purpose is to show how such a video player could be styled and be made responsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...e responsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
... some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...And 3 more matches
HTML attribute: min - HTML: Hypertext Markup Language
if a value is specified for min that isn't a valid number, the input has no minimum value. ...
...onth, week, time, datetime-local, number and range types, and the <meter> element, the min attribute is a number that specifies the most negative value a form control to be considered valid. syntax if any is not explicity set, valid values for the number, date/time input types, and range input types are equal to the basis for stepping - the min value and increments of the step value, up to the
max value, if specified. for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. if omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. for 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="n...
... for the <meter> element, the min attribute defines the lowe...
...And 3 more matches
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
versus html the displayed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted. it is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the html or by using javascript. ...
...ed size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled size, which can make the final graphics rendering end up being distorted. it is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the html or by using javascript. ...
...ify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the html or by using javascript.
maximum canvas size the
maximum size of a <canvas> element is very large, but the exact size depends on the browser. the following is some data we've collected from various tests and other sources (e.g. ...
...And 3 more matches
Numbers and dates - JavaScript
are outside the range (0123456789abcdef), the following syntaxerror is thrown: "identifier starts immediately after numeric literal". ...
...fffffffff // 295147905179352830000 0x123456789abcdef // 81985529216486900 0xa // 10 exponentiation 1e3 // 1000 2e6 // 2000000 0.1e2 // 10 number object the built-in number object has properties for numerical constants, such as
maximum value, not-a-number, and infinity. you cannot change the values of these properties and you use them as follows: var biggestnum = number.
max_value; var smallestnum = number.min_value; var infinitenum = number.positive_infinity; var neginfinitenum = number.negative_infinity; var notanum = number.nan; you always refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. the following table summarizes the number object's properties. properties of number ...
...var infinitenum = number.positive_infinity; var neginfinitenum = number.negative_infinity; var notanum = number.nan; you always refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. the following table summarizes the number object's properties. ...
...And 3 more matches
BigInt - JavaScript
bigint can be used for arbitrarily large integers. description a bigint is created by appending n to the end of an integer literal — 10n — or by calling the function bigint(). ...
...t, a bigint will be considered as a normal "object" type: typeof object(1n) === 'object' // true operators the following operators may be used with bigints (or object-wrapped bigints): +, *, -, **, %. bitwise operators are supported as well, except >>> (zero-fill right shift) as all bigints are signed. also unsupported is the unary operator (+), in order to not break asm.js. ...
...idered as a normal "object" type: typeof object(1n) === 'object' // true operators the following operators may be used with bigints (or object-wrapped bigints): +, *, -, **, %. bitwise operators are supported as well, except >>> (zero-fill right shift) as all bigints are signed. also unsupported is the unary operator (+), in order to not break asm.js. ...
...And 3 more matches
Function.prototype.apply() - JavaScript
a loop? surely not? apply to the rescue! const array = ['a', 'b']; const elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] using apply and built-in functions clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values. ...
...escue! ...
...ments = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2] using apply and built-in functions clever usage of apply allows you to use built-in functions for some tasks that would probably have otherwise been written by looping over the array values. as an example, here are math.
max/math.min, used to find out the
maximum/minimum value in an array. ...
...And 3 more matches
scale - Archive of obsolete content
wer values are to the left and higher values are to the right. set the orient attribute to vertical to use a vertical scale. the user may use the arrow keys to increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. ...
...he arrow keys to increment and decrement the value by one unit, or the page up and page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. the home and end keys set the scale's value to the minimum and
maximum values, respectively. a scale will fire a change event whenever the scale's value is modified. ...
...nd page down keys to increment and decrement the value by one page, as specified by the pageincrement attribute. the home and end keys set the scale's value to the minimum and
maximum values, respectively. a scale will fire a change event whenever the scale's value is modified. attributes dir, disabled, increment,
max, min, movetoclick, pageincrement, tabindex, value properties disabled,
max, min, increment, pageincrement, tabindex, value, methods decrease, decreasepage, increase, increasepage, examples horizontal scale: <scale min="1"
max="10"/> vertical scale: <scale min="1"
max="10" orient="vertical"/> attributes dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's value...
...And 2 more matches
scrollbar - Archive of obsolete content
to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. attributes curpos, increment,
maxpos, pageincrement examples <scrollbar curpos="5"
maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to the value of the
maxpos attribute. the default value is 0. increment type: integer the amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrow...
...the default value is 100. ...
...the default value is 100. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. ...
...And 2 more matches
window - Archive of obsolete content
indow chrome to allow the user to switch the window into full screen mode. supported on mac os x 10.7 lion and later and on windows. the window receives a "fullscreen" event once the change has been made. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or
maximum height. the css height property may also be used. hidechrome type: boolean set this attribute to true to have the chrome including the titlebar hidden. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style sheets. inactivetitleba...
...cifies the id of an element to which a lightweight theme's footer image will be applied. screenx type: integer the horizontal position at which the window appears on the screen. screeny type: integer the vertical position at which the window appears on the screen. sizemode type: one of the values below the state of the window. it can have one of the following values:
maximized the window is
maximized, and occupies the full size of the screen. normal the window appears in a normal state at the desired size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on
maximized windows). note: when a window is minimized, the sizemode attribute is not update...
... to get the window state from javascript code, use window.windowstate. listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes. ...
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
change the next six lines to describe your theme. ensure that the internal name is a single word. note: if your theme is for a version of sunbird later than 0.4, then also change the m...
...xversion="0.4" /> </em:targetapplication> </description> </rdf> in the line that starts <tt>em:id</tt>, paste your identifier between the double-quote characters, replacing the identifier that is there now. change the next six lines to describe your theme. ensure that the internal name is a single word. note: if your theme is for a version of sunbird later than 0.4, then also change the
maxversion. save the file. registering your theme to register your theme, create a plain text file named <tt>chrome.manifest</tt>. copy and paste the content from here (just one line): skin calendar testing chrome/calendar/ change <tt>testing</tt> to your theme's one-word internal name. save the file. creating the theme itself to create the theme itself, go to sunbird's program directory. not...
...ght prefer to use this method only while you are developing your theme, and to use the normal method for public releases. in sunbird, use the default theme or some other theme. move your theme directory to a temporary location. this uninstalls it from sunbird. use a jar tool or zip tool to pack the contents of your theme directory. it is usual to turn off compression so that your theme's speed is
maximized. make sure that the tool packs all the directories and files that make up your theme. name the packed file with the <tt>.jar</tt> extension. for example, when i wrote this article i used this command in my theme directory: zip -0r testing-0.1.jar . make this jar file available to users. normal packaging in sunbird, use the default theme or some other theme. move your theme directory to...
...And 2 more matches
Beginner's guide to media queries - Learn web development
ng for all media types. media feature rules after specifying the type, you can then target a media feature with a rule. width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width,
max-width, and width media features. these features are used to create layouts that respond to different screen sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. the width (and height)...
...hat respond to different screen sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. ...
...ange the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. the width (and height) media features can be used as ranges, and therefore be prefixed with min- or
max- to indicate that the given value is a minimum, or a
maximum. for example, to make the color blue if the viewport is narrower than 600 pixels, use
max-width: @media screen and (
max-width: 600px) { body { color: blue; } } open this example in the browser, or view the source. in practice, using minimum or
maximum values is much more useful for responsive design so you will rarely see width or height used alone. there are a number of o...
...And 2 more matches
Responsive images - Learn web development
er image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a
maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space. in viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower scr...
...y-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one. you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(
max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. let'...
... file on your computer (for example, on a mac you can select the image in finder and press cmd + i to bring up the info screen). sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the hints we talked about earlier. in this case, before each comma we write: a media condition ((
max-width:600px)) — you'll learn more about these in the css topic, but for now let's just say that a media condition describes a possible state that the screen can be in. in this case, we are saying "when the viewport width is 600 pixels or less". a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute le...
...And 2 more matches
HTMLIFrameElement.getScreenshot()
warning: removed in firefox 65. the getscreenshot() method of the htmliframeelement lets you request a screenshot of a content <iframe>, scaled to fit within a specified
maximum width and height. the image will be cropped if necessary but will not be distorted vertically or horizontally. note: getscreenshot() waits for the event loop to go idle before it takes the screenshot. it won't wait more than 2000ms (this delay is defined by the gecko dom.browserelement.
maxscreenshotdelayms preference). syntax var instanceofdomrequest = instanceofhtmliframeelement.getscreenshot(
maxwidth,
maxheight, mimetype); returns a domrequest for handling the screenshot request. its request.onsuccess handler handles the success case (the screenshot is contained in request.result as a blob obje...
... mimetype optional a mime type specifying the format of the image to be returned; if not specified, the default used is image/jpeg. ...
... mimetype optional a mime type specifying the format of the image to be returned; if not specified, the default used is image/jpeg. ...
...And 2 more matches
Using the viewport meta tag to control layout on mobile browsers
to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%. (there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-scale property controls the zoom level when the page is first loaded. the
maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. a pixel is not a pixel in recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. for example, recent sm...
...in portrait mode. this can cause problems when the browser doesn't render a page at a larger size. to fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. this is especially useful on large-screen devices like the ipad. (allen pike's choosing a viewport for ipad sites has a good explanation for web developers.) for pages that set an initial or
maximum scale, this means the width property actually translates into a minimum viewport width. for example, if your layout needs at least 500 pixels of width then you can use the following markup. when the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen: <meta name="viewport" content="width=500, initial-scale=1"> other attributes th...
...perty actually translates into a minimum viewport width. for example, if your layout needs at least 500 pixels of width then you can use the following markup. when the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen: <meta name="viewport" content="width=500, initial-scale=1"> other attributes that are available are minimum-scale,
maximum-scale, and user-scalable. these properties affect the initial scale and width, as well as limiting changes in zoom level. not all mobile browsers handle orientation changes in the same way. for example, mobile safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. if web developers want their sc...
...And 2 more matches
sslfnc.html
xport policy functions to change cipher suite policy settings or use ssl_cipherprefsetdefault to enable or disable any cipher suite. otherwise, the old settings remain in the session cache and will be used instead of the new settings. this function clears only the client cache. the client cache is not configurable. it is located in ram (not on disk), and has the following characteristics:
maximum number of entries: unlimited ssl 2.0 timeout value: 100 seconds ssl 3.0 timeout value: 24 hours note: if an ssl client application does not call ssl_clearsessioncache before shutdown, nss_shutdown fails with the error code sec_error_busy. ssl_configserversessionidcache sets up parameters for and opens the server session cache for a single-process application. syntax #include ...
... 100 seconds ssl 3.0 timeout value: 24 hours note: if an ssl client application does not call ssl_clearsessioncache before shutdown, nss_shutdown fails with the error code sec_error_busy. ssl_configserversessionidcache sets up parameters for and opens the server session cache for a single-process application. syntax #include "ssl.h" secstatus ssl_configserversessionidcache( int
maxcacheentries, pruint32 timeout, pruint32 ssl3_timeout, const char *directory); parameters this function has the parameters listed below.
maxcacheentries the
maximum number of entries in the cache. if a null value is passed, the server default value of 10,000 is used. timeout the lifetime in seconds of an ssl2 session. t...
... ssl3_timeout, const char *directory); parameters this function has the parameters listed below.
maxcacheentries the
maximum number of entries in the cache. if a null value is passed, the server default value of 10,000 is used. timeout the lifetime in seconds of an ssl2 session. the minimum timeout value is 5 seconds and the
maximum is 24 hours. values outside this range are replaced by the server default value of 100 seconds. ssl3_timeout the lifetime in seconds of an ssl3 session. the minimum timeout value is 5 seconds and the
maximum is 24 hours. values outside this range are replaced by the server default value of 24 hours. directory a pointer to a strin...
...And 2 more matches
nsIDownloadProgressListener
nt it. ...
... short astate, in nsidownload adownload); void onlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload); obsolete since gecko 1.9.1 void onprogresschange(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long a
maxselfprogress, in long long acurtotalprogress, in long long a
maxtotalprogress, in nsidownload adownload); void onsecuritychange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astate, in nsidownload adownload); void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus, in nsidownload adownload); void onstatuschange(in nsiwebprogress awebprogre...
...el that changed state. this parameter will not be null. alocation the uri of the file being downloaded. adownload the nsidownload object representing the file being downloaded. onprogresschange() called when the download progress level changes for a download. void onprogresschange( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long a
maxselfprogress, in long long acurtotalprogress, in long long a
maxtotalprogress, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads. arequest the nsichannel that changed state. this parameter will not be null. acurselfprogress the current amount of progress that's been made on the download specified by adow...
...And 2 more matches
Working with windows in chrome code
ening it with opendialog when you open a window using window.opendialog or nsiwindowwatcher.openwindow, you can pass an arbitrary number of arguments to that window. arguments are simple javascript objects, accessible through window.arguments property in the opened window. in this example, we're using window.opendialog to open a progress dialog. ...
...status text as well as the
maximum and current progress values. note that using nsiwindowwatcher.openwindow is a bit less trivial . ...
...s.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data",
maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var
maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.length > 0) {
maxprogress = window.arguments[0].
maxprogress; setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmete...
...And 2 more matches
Debugger.Memory - Firefox Developer Tools
accesors and methods are described below. allocation site tracking the javascript engine marks each new object with the call stack at which it was allocated, if: the object is allocated in the scope of a global object that is a debuggee of some debugger instancedbg; and dbg.memory.trackingallocationsites is set to true. a bernoulli trial succeeds, with probability equal to the
maximum of d.memory.allocationsamplingprobability of all debugger instances d that are observing the global that this object is allocated within the scope of. given a debugger.object instancedobj referring to some object, dobj.allocationsite returns a saved call stack indicating wheredobj’s referent was allocated. allocation logging ifdbg is a debugger instance, and dbg.memory.trackingallocat...
...ns a saved call stack indicating wheredobj’s referent was allocated. allocation logging ifdbg is a debugger instance, and dbg.memory.trackingallocationsites is set to true, then the javascript engine logs each object allocated bydbg’s debuggee code. you can retrieve the current log by calling dbg.memory.drainallocationslog. you can control the limit on the log’s size by setting dbg.memory.
maxallocationsloglength. censuses a census is a complete traversal of the graph of all reachable memory items belonging to a particular debugger‘s debuggees. it produces a count of those items, broken down by various criteria. ifdbg is a debugger instance, you can call dbg.memory.takecensus to conduct a census of its debuggees’ possessions. accessor properties of the debugger.memory.prototype ...
...ty a number between 0 and 1 that indicates the probability with which each new allocation should be entered into the allocations log. 0 is equivalent to “never”, 1 is “always”, and .05 would be “one out of twenty”. the default is 1, or logging every allocation. ...
...And 2 more matches
Document.requestStorageAccess() - Web APIs
cess to cookies and other site storage and store that fact for the purposes of future calls to document.hasstorageaccess() and requeststorageaccess(). ...
... purposes of future calls to document.hasstorageaccess() and requeststorageaccess(). assuming all of the requirements above are satisfied, firefox will automatically grant storage access to the requesting origin on up to a threshold number of first-party origins in the current session for the duration of user’s session, up to a
maximum of 24 hours. after the requesting origin has exceeded the
maximum allowable number of storage access grants, any future call to requeststorageaccess() during the same browsing session will prompt the user. the
maximum number of concurrent storage access grants an origin can obtain is a positive integer currently defined as one percent of the number of top-level origins visited in the current session or 5, whichever is higher. the threshold is enforced on t...
...e number of top-level origins visited in the current session or 5, whichever is higher. the threshold is enforced on the level of etld+1, so for example two storage access grants for foo.example.com and bar.example.com will only count as a single exception against the limit. at the time of a requeststorageaccess() call, if the requesting origin has storage access to... ...fewer origins than the
maximum: the user is not prompted. the origin is given an ephemeral storage access grant for the current top-level origin. the number of origins the requesting origin has storage access to is incremented by one. note that this number is also incremented when automatic access grants are given through our compatibility heuristics. the ephemeral storage access grant is: invalidate...
...And 2 more matches
HTMLImageElement.sizes - Web APIs
t text. it's really spectacular. and fascinating. oh, it's also clever and witty. ...
...s also clever and witty. ...
... stuff, i'm sure.</p> <img src="/files/16870/new-york-skyline-wide.jpg" srcset="/files/16870/new-york-skyline-wide.jpg 3724w, /files/16869/new-york-skyline-4by3.jpg 1961w, /files/16871/new-york-skyline-tall.jpg 1060w" sizes="((min-width: 50em) and (
max-width: 60em)) 50em, ((min-width: 30em) and (
max-width: 50em)) 30em, (
max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. ...
...And 2 more matches
HTMLInputElement.stepUp() - Web APIs
the default value for the parameter, if no value is passed, is 1. the method will not cause the value to exceed the s...
... if the value before invok...
... if the value before invoking the stepup() method is invalid—for example, if it doesn't match the constraints set by the step attribute—invoking the stepup() method will return a value that does match the form controls constraints. ...
...And 2 more matches
HTMLTextAreaElement - Web APIs
disabled boolean: returns / sets the element's disabled attribute, indicating that the control is not available for interaction. form read only object: returns a reference to the parent form element. if this element is not contained in a form element, it can be the id attribute of any <form> element in the same document or the value null. inputmode
maxlength long: returns / sets the element's
maxlength attribute, indicating the
maximum number of characters the user can enter. this constraint is evaluated only when the value changes. minlength long: returns / sets the element's minlength attribute, indicating the minimum number of characters the user can enter. this constraint is evaluated only when the value changes. nam...
...que lacinia odio id nisi pulvinar commodo tempus at odio. ut consectetur eros porttitor nunc mollis ultrices. aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. proin nibh sem, bibendum ut placerat nec, cursus et lacus. phasellus vel augue turpis. nunc eu mauris eu leo blandit mollis interdum eget lorem. </textarea></p> </form>
maximum length and number of lines example create a textarea with a
maximum number of characters per line and a
maximum number of lines: first, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. if the limit has not been reached, it will return the key. function checkrows(ofield, okeyevent) { var nkey = (okeyevent || /* old...
...ine and a
maximum number of lines: first, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. if the limit has not been reached, it will return the key. ...
...And 2 more matches
RTCConfiguration.bundlePolicy - Web APIs
ransport to handle each type of content added: one for audio, one for video, and one for the rtc data channel, if applicable. if the remote peer isn't bundle-aware, the ice agent chooses one audio track and one video track and those two tracks are each assigned to the corresponding rtcdtlstransport. all other tracks are ignored by the connection. this is the default, and most compatible, policy. ...
...s is the default, and most compatible, policy.
max-compat the ice agent intially creates one rtcdtlstransport for each media track and a separate one for the rtcdatachannel, if one is created. if the remote endpoint can't handle bundling, each media track is negotiated on its own separate transport. this introduces bundling but will fall back to not bundling if the remote peer can't handle it.
max-bundle the ice agent starts by creating a single rtcdtlstransport to handle all of the connection's media. if the remote peer isn't bundle-compatible, only one media track is negotiated and the rest are ignored. this
maximizes bundling at the risk of losing tracks if the remote peer can't do bundling. if any other value is specified, no configuration is specified when creating the rtcpeerconne...
.... the goal of bundling is to optimize performance by reducing the overhead of having multiple transports in play. the fewer rtp transports or bundles of rtp streams you have, the better the network performance will be. all current major browsers are bundle compatible. ...
...And 2 more matches
SVGPreserveAspectRatio - Web APIs
own. ...
...short align unsigned short meetorslice constants svg_preserveaspectratio_unknown = 0 svg_preserveaspectratio_none = 1 svg_preserveaspectratio_xminymin = 2 svg_preserveaspectratio_xmidymin = 3 svg_preserveaspectratio_x
maxymin = 4 svg_preserveaspectratio_xminymid = 5 svg_preserveaspectratio_xmidymid = 6 svg_preserveaspectratio_x
maxymid = 7 svg_preserveaspectratio_xminy
max = 8 svg_preserveaspectratio_xmidy
max = 9 svg_preserveaspectratio_x
maxy
max = 10 svg_meetorslice_unknown = 0 svg_meetorslice_meet = 1 svg_meetorslice_slice = 2 normative document svg 1.1 (2nd edition) constants name value description svg_preserveaspectratio_unknown ...
...existing value to this type. svg_preserveaspectratio_none 1 corresponds to value none for attribute preserveaspectratio. svg_preserveaspectratio_xminymin 2 corresponds to value xminymin for attribute preserveaspectratio. svg_preserveaspectratio_xmidymin 3 corresponds to value xmidymin for attribute preserveaspectratio. ...
...And 2 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
eat, but wouldn't it be nice if we had an amplitude envelope to go with it? let's create a simple one so we get used to the methods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...ods we need to create an envelope with the web audio api. let's say our envelope has attack and release. ...
...hod as we did before. there is a multitude of possibilities with just a minimum of nodes. pulse user controls for the ui controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs. one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660"
max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20"
max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user. let pulsehz = 880; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let...
...And 2 more matches
Using the progressbar role - Accessibility
that displays the progress status for a task that take a long time or consists of several steps. a progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action. if the actual value of the progressbar can be determined, the developer has to indicate this progress using the aria-valuenow, aria-valuemin, and aria-value
max attributes. if the progress value is indeterminate, the developer should omit the aria-valuenow attribute. as the task progresses, the aria-valuenow value has to be updated dynamically to indicate this progress to assistive technology products. if the progressbar is describing the loading progress of a particular region of a page, the author should use aria-describedby to point to the status,...
...the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. it is not possible for the user to alter the value of a progressbar because it is always readonly. note: assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-value
max, unless aria-valuetext is specified. it is best to set the values for aria-valuemin, aria-value
max, and aria-valuenow in a manner that is appropriate for this calculation. note: elements with the role progressbar have an implicit aria-readonly value of true. possible effects on user agents and assistive technology screen readers should announce the progress updates as they occur. if the progr...
...gress updates as they occur. if the progress bar is labeled, the label text should be mentioned as well. note: opinions may differ on how assistive technology should handle this. the information provided above is one of those opinions and therefore not normative. ...
...And 2 more matches
Web applications and ARIA FAQ - Accessibility
losure google web toolkit bbc glow yahoo! user interface library (yui) for more information about javascript toolkit accessibility: steve faulkner's wai-aria implementation in javascript ui libraries can you show me an example of aria in action? sure. here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-value
max="100" /> this progress bar is built using a <div>, which is not very descriptive. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progres...
...<div>, which is not very descriptive. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget. the aria-valuemin and aria-value
max attributes specify the minimum and
maximum values for the progress bar, and the aria-valuenow describes the current state of it. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = document.getelementbyid("percent-loaded"); // set its ari...
... element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-value
max", 100); // create a function that can be called at any time to update the value of the progress bar. function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } will adding aria change my page styles or behavior? no, aria is only made available to assistive technology apis, and doesn't affect native browser functionality with respect to the dom or...
...And 2 more matches
width - CSS: Cascading Style Sheets
syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
... syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
...ulated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
...And 2 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items that don’t have a width or a height applied using an absolute length unit? there is a concept in css of min-content and
max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapp...
...he first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. this then, is the min-content size of that string. essentially, the longest word in the string is dictating the size. the second paragraph has a value of
max-content and so it does the opposite. it gets as big as it possibly can be, taking no soft-wrapping opportunities. it would overflow the box it is in if that container was too narrow. if your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering. remember this behaviour and what effec...
...does the opposite. it gets as big as it possibly can be, taking no soft-wrapping opportunities. it would overflow the box it is in if that container was too narrow. if your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering. remember this behaviour and what effects min-content and
max-content have as we explore flex-grow and flex-shrink later in this article. positive and negative free space to talk about these properties we need to understand the concept of positive and negative free space. when a flex container has positive free space, it has more space than is required to display the flex items inside the container. for example, if i have a 500 pixel-wide container, flex-...
...And 2 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: ...
... border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content. <br>
max is auto <br>so the row expands. </div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: min
max(100px, auto); } you can also pass in a track listing, this will repeat. the following track listing will create an initial implicit row track as 100 pixels and a second as 200px. this will continue for a...
... that case you might choose to use the dense packing mode to fill in any holes in your grid. in my image gallery example i have some landscape and some portrait images. i have set landscape images – with a class of landscape to span two column tracks. i then use grid-auto-flow: dense to create a densely packed grid. ...
...And 2 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
xample below, i have a simple media object. in a non-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...container, in order to use the alignment properties that are implemented in css grids. ...
...wsers. however, things are not always so simple. in this next example, i have a set of floated cards. i have given the cards a width, in order to float them. ...
...And 2 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
">three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; grid-auto-rows: 200px; } .box1 { align-self: stretch; } .box2 { align-self: start; } the fr unit and flex-basis we have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid tracks. the fr unit, when combined with the min
max() function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions. if we look back at the example where i demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. with the flex layout, if we drag our window wider and smal...
...80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> </div> .wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } a flexible number of tracks this isn’t quite the same as flexbox. in the flexbox example, the items are larger than the 200 pixel basis before wrapping. we can achieve the same in grid by combining auto-fit and the min
max() function. in this next example, i create auto filled tracks with min
max. i want my tracks to be a minimum of 200 pixels, so i set the
maximum to be 1fr. once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr
maximum as an instruction to share out the remaining space between the items. * {box-sizing: bord...
... grid and absolutely positioned elements grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. the specification defines the behavior w...
...And 2 more matches
grid - CSS: Cascading Style Sheets
not reset by this shorthand. ...
...y this shorthand. ...
...] <'grid-auto-rows'>? / <'grid-template-columns'> value...
...And 2 more matches
min-width - CSS: Cascading Style Sheets
of the width property from becoming smaller than the value specified for min-width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the element's width is set to the value of min-width whenever min-width is larger than
max-width or width. syntax /* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width:
max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value. <percentage> defines the min-width as a percen...
... min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value. <percentage> defines the min-width as a percentage of the containing block's width. auto the browser will calculate and select a min-width for the specified element. none no limit on the size of the box.
max-content the intrinsic preferred min-width. min-content the intrinsic minimum min-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(
max-content,
max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritedno...
...
max-content,
max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content |
max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification. editor's draft css box sizing module lev...
...And 2 more matches
min() - CSS: Cascading Style Sheets
ractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). in other words, the
maximum width is 200px. think of the min() value as providing the
maximum value a property can have. syntax the min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value. the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that eva...
...fferent units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified. it is permitted to nest
max() and other min() functions as expression values. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself. the expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. make sure to put a ...
...d division without using the calc() function itself. the expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. make sure to put a space on each side of the + and - operands. the operands in the expression may be any <length> syntax value. you can (and often need to) combine min() and
max() values, or use min() within a clamp() or calc() function. you can provide more than two arguments, if you have multiple constraints to apply. formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) a...
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
form the form element that the <textarea> element is associated with (its "form owner"). the value of the attribute must be the id of a form element in the same document. if this attribute is not specified, the <textarea> element must be a descendant of a form element. this attribute enables you to place <textarea> elements anywhere within a document, not just as descendants of form elements.
maxlength the
maximum number of characters (utf-16 code units) that the user can enter. if this value isn't specified, the user can enter an unlimited number of characters. minlength the minimum number of characters (utf-16 code units) required that the user should enter. name the name of the control. placeholder a hint to the user of what can be entered in the control. carriage returns or lin...
... hand corner, which can be used to alter the size of the element on the page. this is controlled by the resize css property — resizing is enabled by default, but you can explicitly disable it using a resize value of none: textarea { resize: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength,
maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. for example, to give your textarea a different border depending on whether it is valid or invalid: textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; } examples basic example the following example show a very simple textarea, with a set numbers of rows and columns and ...
...tarea a different border depending on whether it is valid or invalid: textarea:invalid { border: 2px dashed red; } textarea:valid { border: 2px solid lime; } examples basic example the following example show a very simple textarea, with a set numbers of rows and columns and some default content. ...
...And 2 more matches
Set-Cookie - HTTP
must be filtered out from any response exposed to frontend code. for more information, see the guide on http cookies. ...
...prefix: cookies names starting with __secure- (dash is part of the prefix) must be set with the secure flag from a secure page (https). __host- prefix: cookies with names starting with __host- must be set with the secure flag, must be from a secure page (https), must not have a domain specified (and therefore aren't sent to subdomains) and the path must be /. expires=<date> optional the
maximum lifetime of the cookie as an http-date timestamp. see date for the required formatting. if unspecified, the cookie becomes a session cookie. a session finishes when the client shuts down, and session cookies will be removed. warning: many web browsers have a session restore feature that will save all tabs and restore them next time the browser is used. session cookies will also be resto...
...nishes when the client shuts down, and session cookies will be removed. warning: many web browsers have a session restore feature that will save all tabs and restore them next time the browser is used. session cookies will also be restored, as if the browser was never closed. when an expires date is set, the deadline is relative to the client the cookie is being set on, not the server.
max-age=<number> optional number of seconds until the cookie expires. a zero or negative number will expire the cookie immediately. if both expires and
max-age are set,
max-age has precedence. domain=<domain-value> optional host to which the cookie will be sent. if omitted, defaults to the host of the current document url, not including subdomains. contrary to earlier specifications, leading...
...And 2 more matches
A typical HTTP session - HTTP
sion algorithm used, hints about caching). similarly to the block of http headers for a client request, these http headers form a block ending with an empty line. the final block is a data block, which contains the optional data. ...
... hints about caching). similarly to the block of http headers for a client request, these http headers form a block ending with an empty line. the final block is a data block, which contains the optional data. ...
...s a data block, which contains the optional data. ...
...And 2 more matches
Math.random() - JavaScript
e in extremely rare cases to calculate the usually-excluded upper bound. getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
...the usually-excluded upper bound. getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
... getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
...And 2 more matches
Math.random() - JavaScript
e in extremely rare cases to calculate the usually-excluded upper bound. getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
...the usually-excluded upper bound. getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
... getting a random number between 0 (inclusive) and 1 (exclusive) function getrandom() { return math.random(); } getting a random number between two values this example returns a random number between the specified values. the returned value is no lower than (and may possibly equal) min, and is less than (and not equal)
max. ...
...And 2 more matches
Codecs used by WebRTC - Web media technologies
20 fps at a minimum resolution of 320 pixels wide by 240 pixels tall. it's encouraged that video be encoded at a frame rate and size no lower than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the
maximum resolution that is acceptable. the sender is not required to support this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple
maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all comp...
...rameter, or that a specific set of values be allowed. and sometimes the requirements are more intricate. parameters which are useful but not required these parameters don't have to be supported by the webrtc endpoint, and their use is not required either. their use can improve the user experience in various ways, but don't have to be used. indeed, some of these are pretty complicated to use.
max-br if specified and supported by the software, the
max-br parameter specifies the
maximum video bit rate in units of 1,000 bps for vcl and 1,200 bps for nal. you'll find details about this on page 47 of rfc 6184.
max-cpb if specified and supported by the software,
max-cpb specifies the
maximum coded picture buffer size. this is a fairly complicated parameter whose unit size can vary. see page ...
...ed by the software, the
max-br parameter specifies the
maximum video bit rate in units of 1,000 bps for vcl and 1,200 bps for nal. you'll find details about this on page 47 of rfc 6184.
max-cpb if specified and supported by the software,
max-cpb specifies the
maximum coded picture buffer size. this is a fairly complicated parameter whose unit size can vary. see page 45 of rfc 6184 for details.
max-dpb if specified and supported,
max-dpb indicates the
maximum decoded picture buffer size, given in units of 8/3 macroblocks. see rfc 6184, page 46 for further details.
max-fs if specified and supported by the software,
max-fs specifies the
maximum size of a single video frame, given as a number of macroblocks. ...
...And 2 more matches
JavaScript Daemons Management - Archive of obsolete content
on(…)</title> <script type="text/javascript" src="daemon.js"></script> <script type="text/javascript" src="daemon-methods.js"></script> <script type="text/javascript"> function perform (nindex, nlength, bbackw) { // http://tyleregeto.com/text-animation-in-javascript for (var oletter, nletter = 0; nletter < aletters.length; nletter++) { oletter = aletters[nletter]; var ndist = n
maxdist - n
maxdist * nindex / nlength; oletter.pos += 0.08; oletter.elem.style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nle...
... aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var n
maxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden;...
...n.js"></script> <script type="text/javascript" src="daemon-safe.js"></script> <script type="text/javascript" src="daemon-methods.js"></script> <script type="text/javascript"> function perform (nindex, nlength, bbackw) { // http://tyleregeto.com/text-animation-in-javascript for (var oletter, nletter = 0; nletter < aletters.length; nletter++) { oletter = aletters[nletter]; var ndist = n
maxdist - n
maxdist * nindex / nlength; oletter.pos += 0.08; oletter.elem.style.top = math.sin(oletter.pos) * ndist + "px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nle...
... aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var n
maxdist = 25, aletters = [], stext = "do you feel lucky, punk?", orecompose = new daemon.safe(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hi...
Dehydra Object Reference - Archive of obsolete content
bers will not include static member functions. .template template object the template from which this class was instantiated, if applicable. ...
...ed, if applicable. pointer and reference types property type description .ispointer boolean flag .isreference boolean flag .type type object the type this points to or references array type property type description .isarray boolean flag .
max integer or normal fixed-size arrays, the index of the largest element of the array. ...
...ed-size arrays, the index of the largest element of the array. ...
...gest element of the array. ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
ate of reflow, built up as reflow recursively descends the frame tree. this is "passed in" to a child frame from its parent, and provides the constraints in which the child frame must size itself; e.g. the width and height available to the child frame. ...
...vely descends the frame tree. this is "passed in" to a child frame from its parent, and provides the constraints in which the child frame must size itself; e.g. the width and height available to the child frame. ...
...edoffsets mcomputedminwidth mcomputed
maxwidth mcomputedminheight mcomputed
maxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box. nshtmlreflowmetrics the structure that is "filled in" by a frame during reflow, and is used to communicate the frame's desired size information back to its container. m
maximumwidth the
maximum width that the frame would consume if it were reflowed with an unconstrained available width. it might be better named "preferred width". this is computed when the nsblockreflowstate flag brs_compute
maxwidth is set.
maxelementwidth the
maximum width for elements within the frame that cannot be broken down further; e.g., the longest word in a paragraph. note that an out-of...
...d as a result of the generational margin collapsing logic in nsblockreflowcontext::computecollapsedtopmargin(). in this case, the flag won't be set, so subsequent calls to shouldapplytopmargin() will continue crawl the line list.) this flag is also set in the nsblockreflowstate constructor if brs_istopmarginroot is set; that is, if the frame being reflowed is a margin root by default. brs_compute
maxelementsize this flag is set if reflow should recompute an element's
maximum size. it is set in the nsblockreflowstate constructor if the "
maxelementsize" member of the nshtmlreflowmetrics object has been provided by (the parent frame?). brs_compute
maxwidth this flag is set if reflow should recompute a frame's
maximum width; for example, during first-pass table reflow. when this is set, nsblock...
Table Layout Strategy - Archive of obsolete content
these informations are very often conflicting. f...
...these informations are very often conflicting. for instance one cell co...
...these informations are very often conflicting. for instance one cell could have a large min width,the nex...
...ace if the sum of the col allocations is insufficient column width info columns get their width information from style info <col width="200px"> and from the cells that belong into this column. these informations are very often conflicting. for instance one cell could have a large min width,the next could have a specified fixed width and another a specified pct width. for a given width type the
maximum wins. special cases note: the following examples are not shown correctly due to technical constraints on wiki content. you can help by editing this page and adding screenshots or links to example pages. width = "0*" assume that you would like to give all the space to the second column in a table. poor mans choice is leave the first cell auto and specify 100%on the second one (this wor...
Adding Methods to XBL-defined Elements - Archive of obsolete content
arameter elements. you do not need to have any though, in which case the method would take no parameters. the body element contains the script that is executed when the method is called. the names of the parameters are defined as variables in the script as if they had been passed as parameters. for example, the following javascript function would be written as an xbl method like so: function get
maximum(num1,num2) { if (num1 <= num2) return num2; else return num1; } xbl: <method name="get
maximum"> <parameter name="num1"/> <parameter name="num2"/> <body> if (num1 <= num2) return num2; else return num1; </body> </method> this function, get
maximum, returns the largest of the values, each passed as a parameter to the method. note that the less-than symbol has to be esca...
...(the bound element.) the parameter tag allows you to define parameters for a method. ...
...rns the largest of the values, each passed as a parameter to the method. note that the less-than symbol has to be escaped because otherwise it would look like the start of a tag. you can also use a cdata section to escape the entire block of code. you can call the method by using code such as element.get
maximum(5, 10) where element is a reference to an element defined by the xbl containing the get
maximum method. (the bound element.) the parameter tag allows you to define parameters for a method. because mozilla uses javascript as its scripting language, and javascript is a non-typed language, you do not need to specify the types of the parameters. however, in the future, other languages may be used with xbl. methods are only available to call after the page is rendered, which may cause prob...
...ng language, and javascript is a non-typed language, you do not need to specify the types of the parameters. however, in the future, other languages may be used with xbl. methods are only available to call after the page is rendered, which may cause problems if using createelement. for example, the following code will probably fail: var element = document.createelement("my_element"); element.get
maximum() // this will fail by the way, it is safe to call methods from the constructor, other methods on the object and event handlers. accessing the anonymous content there may be times when you want to modify some aspect of the elements defined in the content element, either from a method body or elsewhere. these elements are created anonymously and are not accessible from the regular dom funct...
Box Model Details - Archive of obsolete content
we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. ...
...ls wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox. the align attribute controls this behavior on a horizontal box. you can also prevent this stretching by placing a
maximum height on the elements or, better, on the box itself. if a box has a
maximum height, the elements inside it are constrained by this. however, the problem with this is that you need to know how big the element will be beforehand. 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="mi...
...with this is that you need to know how big the element will be beforehand. 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 best interface is one that can be displayed at various sizes without problems. the box model may be difficult to understand without trying various various things out for yourself. the following is an outline of both types of boxes: horizontal boxes lay out their elements next to each other horizontally. flexible elements are...
...the left box has a flexiblity that is 3 times greater than the right one so it will always receive 3 times as much of the extra space when the window size is increased. the right box enforces a minimum width of 150 pixels. the ...
deck - Archive of obsolete content
ttributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
... selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...anels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...
... selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...
dropmarker - Archive of obsolete content
of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...er use a dropmarker, that when pressed, will reveal a popup menu. ...
...late, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
listhead - Archive of obsolete content
y which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...cept for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
... type: integer a value indicating the type of accessibility object for the element. disabled type: boolean gets and sets the value of the disabled attribute. ...
...: integer a value indicating the type of accessibility object for the element. disabled type: boolean gets and sets the value of the disabled attribute. ...
listheader - Archive of obsolete content
ditable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...uitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...late, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
member - Archive of obsolete content
riables. more information is available in the xul tutorial. ...
...ore information is available in the xul tutorial. ...
...ariable reference to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...
...erence to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...
preferences - Archive of obsolete content
root branch of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
... of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
...also executes code specified in onchanged attribute of ...
...also executes code specified in onchanged attribute of the element...
stack - Archive of obsolete content
right attributes, unlike rect, are relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set. in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "
maxwidth") inside a stack can sometimes produce unpredictable and undesireable results. more information is available in the xul tutorial. examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> in this example, the resulting width o...
...ex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
... <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
titlebar - Archive of obsolete content
properties inh...
... properties inherited prop...
...ce, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3. ...
...ource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribute did not work for title bars prior to firefox 3. ...
toolbargrippy - Archive of obsolete content
ing its theme. more information is available in the xul tutorial. ...
...me. more information is available in the xul tutorial. ...
...stext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...
...e, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object for the element. ...
toolbarspacer - Archive of obsolete content
ds | related ] firefox only a space between toolbar items. ...
...ed ] firefox only a space between toolbar items. ...
...late, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
toolbarspring - Archive of obsolete content
] firefox only a flexible space between toolbar items. ...
...only a flexible space between toolbar items. ...
...mplate, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
treecols - Archive of obsolete content
(example needed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...eeded) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...late, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
CSS - Archive of obsolete content
sion and layout orientation.-ms-content-zoom-chainingthe -ms-content-zoom-chaining css property is a microsoft extension specifying the zoom behavior that occurs when a user hits the zoom limit during page manipulation.-ms-content-zoom-limitthe -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-
max properties.-ms-content-zoom-limit-
maxthe -ms-content-zoom-limit-
max css property is a microsoft extension that specifies the selected elements'
maximum zoom factor.-ms-content-zoom-limit-minthe -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor.-ms-content-zoom-snapthe -ms-content-zoom-snap css shorthand property is a microsoft extension that s...
...css property is a microsoft extension that specifies one to three values indicating the minimum number of characters in a hyphenated word. ...
...when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.-ms-scroll-limitthe -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-
max, and -ms-scroll-limit-y-
max properties.-ms-scroll-limit-x-
maxthe -ms-scroll-limit-x-
max css property is a microsoft extension that specifies the
maximum value for the element.scrollleft property.-ms-scroll-limit-x-minthe -ms-scroll-limit-x-min css property is a microsoft extension that specifies the minimum value for the element.scrollleft property.-ms-scroll-limit-y-
maxthe -ms-scroll-limit-y-
max...
...-
maxthe -ms-scroll-limit-x-
max css property is a microsoft extension that specifies the
maximum value for the element.scrollleft property.-ms-scroll-limit-x-minthe -ms-scroll-limit-x-min css property is a microsoft extension that specifies the minimum value for the element.scrollleft property.-ms-scroll-limit-y-
maxthe -ms-scroll-limit-y-
max css property is a microsoft extension that specifies the
maximum value for the element.scrolltop property.-ms-scroll-limit-y-minthe -ms-scroll-limit-y-min css property is a microsoft extension that specifies the minimum value for the element.scrolltop property.-ms-scroll-railsthe -ms-scroll-rails css property is a microsoft extension that specifies whether scrolling locks to the primary axis of motion.-ms-scroll-snap-points-xthe -ms-scroll-snap-points-x cs...
E4X for templating - Archive of obsolete content
tions such as the following foreach (which can work with arrays, objects, or e4x objects) are quite convenient in iterating over complex structures such as e4x would not normally allow. ...
...over complex structures such as e4x would not normally allow. ...
...arguments are optional: (h is a handler with an explicit argument v only, or beginning with k, v) lev is optional argument to note recursive depth (if part of recursion) */ function foreach (min,
max, arr, h, lev) { var k, ret=<></>, it = 1; lev = lev || 0; if (typeof min === 'number') { if (typeof
max !== 'number') { lev = h; h = arr; arr =
max;
max = min; min = 1; } } else { lev = arr; h =
max; arr = min;
max = number.positive_infinity; min = 1; } if (h.length === 1) { for (k in arr) { if (it < min) { ++it; continue; } if (it >
max) { break; } ...
...break; } ret+=h(arr[k], it, lev); // need to get it or lev via arguments[] since our length detection implies no explicit additional params; otherwise define with more than one param (see below) ++it; } } else { for (k in arr) { if (it < min) { ++it; continue; } if (it >
max) { break; } ret+=h(k, arr[k], it, lev); ++it; } } return ret; } the following real case example iterates over an array of the lines in an e4x child element to produce an xmllist of multiple vbox's representing each line: <vbox> {foreach(e(someel.somechild[0]).split('\n'), function (line) <description>{line}</description> )} ...
Implementation Status - Archive of obsolete content
xpath expressions in xforms section title status notes bugs 7.1 xpath datatypes supported 7.2 evaluation context partial 7.3 r...
...xpath expressions in xforms section title status notes bugs 7.1 xpath datatypes supported 7.2 evaluation context partial 7.3 references, dependenc...
...xpath expressions in xforms section title status notes bugs 7.1 xpath datatypes supported 7.2 evaluation context partial 7.3 references, dependencies, and dynamic dependencie...
... 7.5 xforms core function library supported 7.6.1 boolean-from-string() supported 7.6.2 is-card-number() unsupported 7.7.1 avg() supported 7.7.2 min() supported 7.7.3
max() supported 7.7.4 count-non-empty() supported 7.7.5 index() partial binds using index() are not working 292333; 7.7.6 power() supported 7.7.7 random() supported 7.7.8 compare() ...
Sizing items in CSS - Learn web development
t the case! when you use margin and padding set in percentages, the value is calculated from the inline size — therefore the width when working in a horizontal language. in our example, all of the margins and padding are 10% of the width. this means you can have equal-sized margins and padding all around the box. this is a fact worth remembering if you do use percentages in this way. min- and
max- sizes in addition to giving things a fixed size, we can ask css to give an element a minimum or a
maximum size. if you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the min-height property on it. the box will always be at least this height, but will then grow taller if there is more content than the box has spac...
... more content than the box has space for at its minimum height. in the example below you can see two boxes, both with a defined height of 150 pixels. the box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels. this is very useful for dealing with variable amounts of content while avoiding overflow. ...
... of
max-width is to cause images to scale down if there is not enough space to display them at their intrinsic width while making sure they don't become larger than that width. as an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. if you instead use
max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size. in the example below, we have used the same image three times. the first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. ...
...ecome larger, causing it to look pixellated. if you instead use
max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size. in the example below, we have used the same image three times. the first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. the second image has
max-width: 100% set on it and therefore does not stretch to fill the container. the third box contains the same image again, also with
max-width: 100% set; in this case you can see how it has scaled down to fit into the box. this technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. you should, however, not use this technique to load re...
Responsive design - Learn web development
nsive design was coined by ethan marcotte in 2010 and described the use of three techniques in combination. the first was the idea of fluid grids, something which was already being explored by gillenwater, and can be read up on in marcotte's article, fluid grids (published in 2009 on a list apart). the second technique was the idea of fluid images. using a very simple technique of setting the
max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger. this enables an image to scale down to fit in a flexibly-sized column, rather than overflow it, but not grow larger and become pixellated if the column becomes wider than the image. the third key component was the media query. media queries en...
...t just change their layout between breakpoints, they are built on flexible grids. a flexible grid means that you don't need to target every possible device size that there is, and build a pixel perfect layout for it. that approach would be impossible given the vast number of differently-sized devices that exist, and the fact that on desktop at least, people do not always have their browser window
maximized. by using a flexible grid, you only need to add in a breakpoint and change the design at the point where the content starts to look bad. for example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows. in the early days of responsive design, our only option for performing layout was to use floats. fl...
... columns on the .wrapper: example, source code. responsive images the simplest approach to responsive images was as described in marcotte's early articles on responsive design. basically, you would take an image that was at the largest size that might be needed, and scale it down. this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img {
max-width: 100%; } there are obvious downsides to this approach. the image might be displayed a lot smaller than its intrinsic size, which is a waste of bandwidth — a mobile user may be downloading an image several times the size of what they actually see in the browser window. in addition, you may not want the same image aspect ratio on mobile as on desktop. for example, it might be nice to hav...
...work as intended. so you should always include the above line of html in the head of your documents. there are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use. initial-scale: sets the initial zoom of the page, which we set to 1. height: sets a specific height for the viewport. minimum-scale: sets the minimum zoom level.
maximum-scale: sets the
maximum zoom level. user-scalable: prevents zooming if set to no. you should avoid using minimum-scale,
maximum-scale, and in particular setting user-scalable to no. users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems. note: there is a css @ rule designed to replace the viewport meta tag — @viewport — how...
Other form controls - Learn web development
ve already mentioned, but still useful in some situations, so we thought it would be worth giving them a brief mention. note: you can find the examples from this section on github as other-examples.html (see it live also). meters and progress bars meters and progress bars are visual representations of numeric values. progress a progress bar represents a value that changes over time up to a
maximum value specified by the
max attribute. such a bar is created using a <progress> element. <progress
max="100" value="75">75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire. the content inside the <progress> element is a fallback for browsers that don't su...
...5/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire. the content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it. meter a meter bar represents a fixed value in a range delimited by
max and min values. this value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values: the low and high values divide the range in three parts: the lower part of the range is between the min and low values, inclusive. the medium part of the range is between the low and high values, exclusive. the higher part of the range is between ...
...es. this value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values: the low and high values divide the range in three parts: the lower part of the range is between the min and low values, inclusive. the medium part of the range is between the low and high values, exclusive. the higher part of the range is between the high and
max values, inclusive. the optimum value defines the optimum value for the <meter> element. in conjuction with the low and high value, it defines which part of the range is prefered: if the optimum value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part, and the higher range is considered to be t...
...ered part of the range, the bar is green. if the current value is in the average part of the range, the bar is yellow. if the current value is in the worst part of the range, the bar is red. such a bar is created using a <meter> element. this is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full. <meter min="0"
max="100" value="75" low="33" high="66" optimum="50">75</meter> the content inside the <meter> element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it. support for <progress> and <meter> is fairly good — there is no support in internet explorer, but other browsers support it well. test your skills! you've reached the end of this article,...
Introduction to automated testing - Learn web development
o help us automate some of this pain away. there are two main ways in which we can automate the tests we've been talking about in this module: use a task runner such as grunt or gulp, or npm scripts to run tests and clean up code during your build process. this is a great way to perform tasks like linting and minifying code, adding in css prefixes or transpiling nascent javascript features for
maximum cross-browser reach, and so on. use a browser automation system like selenium to run specific tests on installed browsers and return results, alerting you to failures in browsers as they crop up. commercial cross-browser testing apps like lambdatest, sauce labs, browserstack, and testingbot are based on selenium, but allow you to access their set up remotely using a simple interface, saving ...
...these can be retrieved from your browserstack automation dashboard. fill these in now. make sure everything is saved, and run your file ...
...these can be retrieved from your browserstack automation dashboard. fill these in now. make sure everything is saved, and run your file like so: node call_bstack below we've al...
...these can be retrieved from your browserstack automation dashboard. fill these in now. make sure everything is saved, and run your file like so: node call_bstack below we've also provided some other ready-made functions you might find useful when worki...
Add-on Repository
will immediately fail if the addonrepository is already handling another search request. to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer
maxresults, in searchcallback callback) void searchaddons(in string searchterms, in integer
maxresults, in searchcallback callback) properties property type description homepageurl string the url of the repository site's home page. issearching boolean true if a search is currently in progress; otherwise false. methods getrecommende...
...search terms. cancelsearch() cancels the search in progress. does nothing if there is no search in progress. void cancelsearch(); parameters none. retrieverecommendedaddons() begins a search for recommended add-ons in the repository. the list of recommended add-ons frequently changes. results will be passed to the given searchcallback callback. ...
...ss. does nothing if there is no search in progress. void cancelsearch(); parameters none. retrieverecommendedaddons() begins a search for recommended add-ons in the repository. the list of recommended add-ons frequently changes. results will be passed to the given searchcallback callback. void retrieverecommendedaddons( in integer
maxresults, in searchcallback callback ); parameters
maxresults the
maximum number of results to return. ...
... retrieverecommendedaddons( in integer
maxresults, in searchcallback callback ); parameters
maxresults the
maximum number of results to return. callback the searchcallback callback to which results will be delivered. searchaddons() begins a search for add-ons in this repository. results will be passed to the given callback. string searchaddons( in string searchterms, in integer
maxresults, in searchcallback callback ); parameters searchterms the search terms to pass to amo. the results will match what you would get if you typed this string in the search box on the amo web site.
maxresults the
maximum number of results to return. callback the searchcallback callback to pass results to. ...
Encrypt Decrypt MAC Keys As Session Objects
pdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned i...
...) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen,
maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; ...
...cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: if (secparam) { secitem_freeitem(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11co...
...rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encryptinit */ pk11context * encryptinit(pk11symk...
Encrypt and decrypt MAC using token
pdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned i...
...) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen,
maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; ...
...cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: if (secparam) { secitem_freeitem(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11co...
...rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encryptinit */ pk11context * encryptinit(pk11symk...
Enc Dec MAC Output Public Key as CSR
pdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned i...
...) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen,
maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; ...
...ype, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: if (secparam) { secitem_freeitem(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11co...
...rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encryptinit */ pk11context * encryptinit(pk11symk...
NSS Sample Code Sample_3_Basic Encryption and MACing
pdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned i...
...) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen,
maxlen); return rv; } /* * write to header file */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus r...
...cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: if (secparam) { secitem_freeitem(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11co...
...rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encryptinit */ pk11context * encryptinit(pk11symk...
EncDecMAC using token object - sample 3
k11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = pk11_digestfinal(ctx, mac, maclen,
maxlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "compute mac failed : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsu...
...iled : pk11_digestfinal()\n"); } return secsuccess; } /* * compute mac */ secstatus computemac(pk11context *ctxmac, unsigned char *ptext, unsigned int ptextlen, unsigned char *mac, unsigned int *maclen, unsigned int
maxlen) { secstatus rv = macinit(ctxmac); if (rv != secsuccess) return rv; rv = macupdate(ctxmac, ptext, ptextlen); if (rv != secsuccess) return rv; rv = macfinal(ctxmac, mac, maclen,
maxlen); return rv; } /* * writetoheaderfile */ secstatus writetoheaderfile(const char *buf, unsigned int len, headertype type, prfiledesc *outfile) { secstatus rv; char header[40]; char trailer[40]; char *outstring = null; switch (type) { case symkey: strcpy(header, enckey_header); strcpy(trailer, enckey_trailer); break; case mackey: strcpy(header, mackey_header); strcpy(trailer, mackey_trailer); br...
...turn null; } ctx = pk11_createcontextbysymkey(ckm_aes_cbc, operation, key, secparam); if (ctx == null) { pr_fprintf(pr_stderr, "crypt failed : can't create a context\n"); goto cleanup; } cleanup: if (secparam) { secitem_freeitem(secparam, pr_true); } return ctx; } /* * common encryption and decryption code */ secstatus crypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned ...
... unsigned char *in, unsigned int inlen) { secstatus rv; rv = pk11_cipherop(ctx, out, outlen,
maxout, in, inlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "crypt failed : pk11_cipherop returned %d\n", rv); goto cleanup; } cleanup: if (rv != secsuccess) { return rv; } return secsuccess; } /* * decrypt */ secstatus decrypt(pk11context *ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encrypt */ secstatus encrypt(pk11context* ctx, unsigned char *out, unsigned int *outlen, unsigned int
maxout, unsigned char *in, unsigned int inlen) { return crypt(ctx, out, outlen,
maxout, in, inlen); } /* * encryptinit */ pk11context * encryptinit(pk11symkey *ek, unsigned char *iv, unsigned in...
IAccessibleRelation
[propget] hresult localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok. ntargets() returns the number of targets() for this relation. [propget] hresult n...
...[propget] hresult localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok. ntargets() returns the number of targets() for this relation. [propget] hresult ntargets( [out] long ntar...
...et() returns one accessible relation target. [propget] hresult target( [in] long targetindex, [out] iunknown target ); parameters targetindex 0 based index. target return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. targets() returns multiple accessible relation targets. [propget] hresult targets( [in] long
maxtargets, [out, size_is(
maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); parameters
maxtargets
maximum size of the array allocated by the client. targets the array of target objects. note that this array is to be allocated by the client and freed when no longer needed. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. you ...
...he array allocated by the client. targets the array of target objects. note that this array is to be allocated by the client and freed when no longer needed. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. you will need to use queryinterface on the iunknown to get the iaccessible2. ntargets actual number of targets in the returned array (not more than
maxtargets) return value s_false if there is nothing to return, ntargets() is set to 0. s_ok. see also iaccessible2 ...
IAccessibleTable
[in] long row, [out] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long
maxchildren, [out, size_is(,
maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult selectedcolumns([in] long
maxcolumns, [out, size_is(,
maxcolumns), length_is(, ncolumns)] long columns, [out] long ncolumns ); [propget] hresult selectedrows([in] long
maxrows, [out, size_is(,
maxrows), length_is(, nrows)] long rows, [out] long nrows ); hresult selectrow([in]...
...passed, [out] value is 0. s_ok. selectcolumn() selects a column and unselects all previously selected columns. hresult selectcolumn( [in] long column ); parameters column 0 based index of the column to be selected. return value e_invalidarg if bad [in] passed. s_ok. selectedchildren() returns a list of cell indexes currently selected (0 based). [propget] hresult selectedchildren( [in] long
maxchildren, [out, size_is(,
maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); parameters
maxchildren this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. children an array of cell indexes of selected cells (each index is 0 based), allocated by the server. free it with cotaskmemfree. nchildren the numb...
...indexes of selected cells (each index is 0 based), allocated by the server. free it with cotaskmemfree. nchildren the number of cell indexes returned; the size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectedcolumns() returns a list of column indexes currently selected (0 based). [propget] hresult selectedcolumns( [in] long
maxcolumns, [out, size_is(,
maxcolumns), length_is(, ncolumns)] long columns, [out] long ncolumns ); parameters
maxcolumns this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. columns an array of column indexes of selected columns (each index is 0 based), allocated by the server. free it with cotaskmemfree. ncolumns the number o...
...olumn indexes of selected columns (each index is 0 based), allocated by the server. free it with cotaskmemfree. ncolumns the number of column indexes returned; the size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectedrows() returns a list of row indexes currently selected (0 based). [propget] hresult selectedrows( [in] long
maxrows, [out, size_is(,
maxrows), length_is(, nrows)] long rows, [out] long nrows ); parameters
maxrows this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. rows an array of row indexes of selected rows (each index is 0 based), allocated by the server. free it with cotaskmemfree. nrows the number of row indexes returned; the si...
nsICryptoHash
ng() has not been called. updatefromstream() calculates and updates a new hash based on a given data stream (nsiinputstream). see computing the hash of a file for an example of using this method. void updatefromstream( in nsiinputstream astream, in unsigned long alen ); parameters astream an input stream to read from. alen how much to read from the given astream. passing pr_uint32_
max indicates that all data available will be used to update the hash. exceptions thrown ns_error_not_available indicates that the requested amount of data to be calculated into the hash is not available. ns_error_not_initialized indicates that init() or initwithstring() has not been called. example computing the hash of a file you can easily compute the hash of a file using nsicryptohash...
...var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); //...
...var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); // s now contains your hash in hex this gives 5eb63bbbe01...
...ue. this example, while simple, shows most of the functionality of the interface. the first thing to note is that when you call the init() method you must specify the hash algorithm to use. all of the available algorithms are specified as constants on the interface. also note that when you call the updatefromstream() method, the second parameter is the number of bytes to read. passing pr_uint32_
max here indicates that you want the entire file read. finally, note that calling the finish() method produces the hash value. the single parameter to this method is false in this example to return binary data. passing true returns the hash as a base 64 encoded string. in this example we take the binary data and produce a hexadecimal string of the result, as is commonly output by hashing programs. ...
nsIDOMChromeWindow
dom/interfaces/base/nsidomchromewindow.idlscriptable this interface is implemented on the window object in chrome. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void
maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description browserdomwindow nsibrowserdomwindow the related nsibrowserdomwindow instance which provides access to yet another layer of utility functions by chrome script. it will be null for domwindows not corresponding to br...
...ovides access to yet another layer of utility functions by chrome script. it will be null for domwindows not corresponding to browsers. messagemanager nsichromeframemessagemanager read only. title domstring obsolete since gecko 1.9.1 windowstate unsigned short returns current window state, the value is one of state_* constants. read only. constants constant value description state_
maximized 1 the window is
maximized. state_minimized 2 the window is minimized. state_normal 3 the window is normal. state_fullscreen 4 the window is in full screen mode. methods beginwindowmove() on some operating systems, we must allow the window manager to handle window dragging. this method tells the window manager to start dragging the window. this method will fail unless called while ...
...while the left mouse button is held down, callers must check this. void beginwindowmove( in nsidomevent mousedownevent ); parameters mousedownevent exceptions thrown ns_error_not_implemented if the operating system does not support this method. getattention() void getattention(); parameters none. ...
...eptions thrown ns_error_not_implemented if the operating system does not support this method. getattention() void getattention(); parameters none. getattentionwithcyclecount() same as getattention method excepting that this can specify the
maximum number of times to animate the window per system conventions. void getattentionwithcyclecount( in long acyclecount ); parameters acyclecount the
maximum number of times to animate the window per system conventions. if set to -1, cycles indefinitely until window is brought into the foreground. this behavior is same as getattention method.
maximize()
maximizes the window. void
maximize(); parameters none. minimize() minimizes the window. void minimize(); parameters none. notifydefaultbuttonloaded() when a document has been loaded, the docume...
nsIInputStream
thod should not be used to determine the total size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire size of the underlying data source. unsigned long available(); parameters none. return value number of bytes currently available in the stream, or pr_uint32_
max if the size of the stream exceeds pr_uint32_
max. exceptions thrown <other-error> if the stream is closed due to some error condition. ns_base_stream_closed if the stream is closed normally. close() close the stream. this method causes subsequent calls to read() and readsegments() to return 0 bytes read to indicate end-of-file. note: the close method may be called more than once, but su...
...; parameters none. isnonblocking() boolean isnonblocking(); parameters none. return value true if stream is non-blocking. native code only!read this method copies data from the stream into a buffer. unsigned long read( in charptr abuf, in unsigned long acount ); parameters abuf the buffer into which the data from the stream is copied. acount the size of the buffer, or the
maximum number of bytes to copy from the stream. return value this method returns the number of bytes copied from the stream (may be less than acount). it returns 0 to indicate end-of-file. exceptions thrown <other-error> on failure. ns_base_stream_would_block indicates that reading from the input stream would block the calling thread for indeterminate amount of time. this exception may onl...
...g readsegments( in nswritesegmentfun awriter, in voidptr aclosure, in unsigned long acount ); parameters awriter the "consumer" of the data to be read. a callback function that may be called once for each buffer segment contained in the stream. see nswritesegmentfun for more details on this function. aclosure a parameter that is passed to awriter each time it is called. acount the
maximum number of bytes to read from the stream. return value the number of bytes read from the stream (may be less than acount). it returns 0 to indicate end-of-file. exceptions thrown <other-error> on failure. ns_error_not_implemented indicates that the stream does not have an internal buffer that can be accessed directly. ns_base_stream_would_block indicates that reading from the input...
...umed all of afromsegment *awritecount = acount; return ns_ok; } // copy the contents of astream into aresultbuf as one contiguous // buffer. use readsegments to avoid an intermediate buffer copy. nsresult copystream(nsiinputstream* astream, nsacstring& aresultbuf) { uint32_t numread; return astream->readsegments(appendsegment, (void*) &aresultbuf, pr_uint32_
max, &numread); } remarks this interface was frozen for gecko 1.0. see bug 124465 for details. from gecko 2.0 interfaces are no longer frozen. see also nsiwritesegmentfun nsiscriptableinputstream - if you need to read a stream from javascript. ...
nsIProgressEventSink
cease once the channel calls its listener's onstoprequest method or once the channel is canceled (via nsirequest.cancel()). note: this interface is actually not specific to channels and may be used with other implementations of nsirequest. ...
... long long aprogress
max); void onstatus(in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg); methods onprogress() called to notify the event sink that progress has occurred for the given request. void onprogress( in nsirequest arequest, in nsisupports acontext, in unsigned long long aprogress, in unsigned long long aprogress
max ); parameters arequest the request being observed (may qi to nsichannel). acontext if arequest is a channel, then this parameter is the listener context passed to nsichannel.asyncopen(). aprogress numeric value in the range 0 to aprogress
max indicating the number of bytes transfered thus far. ...
... onstatus() called to notify the event sink with a status message for the given request. ...
... onstatus() called to notify the event sink with a status message for the given request. void onstatus( in nsirequest arequest, in nsisupports acontext, in nsresult astatus, in wstring astatusarg ); parameters arequest the request being observed (may qi to nsichannel). ...
nsITransportEventSink
netwerk/base/public/nsitransport.idlscriptable implemented by clients that wish to receive transport events. inherits from: nsisupports last changed in gecko 1.7 method overview void ontransportstatus(in nsitransport atransport, in nsresult astatus, in unsigned long long aprogress, in unsigned long long aprogress
max); methods ontransportstatus() transport status notification. void ontransportstatus( in nsitransport atransport, in nsresult astatus, in unsigned long long aprogress, in unsigned long long aprogress
max ); parameters atransport the transport sending this status notification. astatus the transport status (resolvable to a string using nsierrorservice). see nsisockettransport for socket specific status codes and more comments. aprogress the amount of da...
...if unknown, 0xffffffff will be passed. ...
...if unknown, 0xffffffff will be passed. ...
...if unknown, 0xffffffff will be passed. ...
nsIUpdateItem
duced gecko 1.8 obsolete gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface is obsolete; instead of using the extension manager, you should use the addon manager. method overview void init(in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring
maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item. read only. id astring the guid of the item. read only. ...
...n astring updatekey, in long type, in astring targetappid); attributes attribute type description iconurl astring the url of the icon that can be shown for this item. read only. id astring the guid of the item. read only. installlocationkey astring the name of the install location where this item is installed. read only.
maxappversion astring the
maximum version of the application that this item works with, in fvf format. read only. minappversion astring the minimum version of the application that this item works with, in fvf format. read only. name astring the name of this item. read only. objectsource astring returns a js object source representing an nsiupdateitem...
... type_addon type_extension + type_theme + type_locale + type_plugin type_extension + type_theme + type_locale type_any type_app + type_addon 0xff type_plugin 0x10 methods init() initializes the object. void init( in astring id, in astring version, in astring installlocationkey, in astring minappversion, in astring
maxappversion, in astring name, in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid ); parameters id the item's guid. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with w...
... in astring downloadurl, in astring xpihash, in astring iconurl, in astring updateurl, in astring updatekey, in long type, in astring targetappid ); parameters id the item's guid. version the item's version. installlocationkey the name of the install location at which the item is installed. minappversion the minimum application version with which the item is compatible.
maxappversion the
maximum application version with which the item is compatible. name the item's name downloadurl the url from which the item is to be downloaded. xpihash the string hash for the xpi file. iconurl the url of the icon that can be shown for the item. updateurl the url of the update rdf for the item. updatekey the public key to use to verify updates for the item. type the ...
Building a Thunderbird extension 3: install manifest
the first portion is the short name of the extension and must be in lowercase; the last portion is a two-part period-delimited value such as yo...
...the first portion is the short name of the extension and must be in lowercase; the last portion is a two-part period-delimited value such as your first and last nam...
...ue value so that it does not conflict with other extensions. <em:name>my first extension</em:name>: the extension name is displayed in the thunderbird add-on manager. <em:version>1.0</em:version>: this is the version number of your extension. it must be updated each time you release a new version of your extension. it is not the thunderbird version number (which is stored in the minversion and
maxversion fields). <em:creator>jenzed</em:creator>: this optional value is used to store the extension author's name. <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>: this element contains the version id of the application that this add on is developed for. it is defined by mozilla. a list of valid application ids can be found here. normally the id does not change and is always the same even...
...cation ids can be found here. normally the id does not change and is always the same even for different versions of thunderbird. <em:minversion>1.5</em:minversion>: this element indicates the earliest version of thunderbird for which the extension is intended to work. do not use a wildcard (such as "*"). see valid application versions for a list of the supported version numbers and formats. <em:
maxversion>5.0.*</em:
maxversion>: this element indicates the most recent version of thunderbird for which the extension is intended to work. this cannot be higher than the currently available version. "5.0.*" indicates that the extension works with thunderbird 5.0 and any subsequent 5.0.x releases. see valid application versions for a list of the supported version numbers and formats. there are mor...
Monster example - Firefox Developer Tools
this article describes a very simple web page that we'll use to illustrate some features of the memory tool. you can try the site at https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. ...
... this article describes a very simple web page that we'll use to illustrate some features of the memory tool. you can try the site at https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. ...
... this article describes a very simple web page that we'll use to illustrate some features of the memory tool. you can try the site at https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. ...
...mdn.github.io/performance-scenarios/js-allocs/alloc.html. ...
CanvasRenderingContext2D.fillText() - Web APIs
the canvasrenderingcontext2d method filltext(), part of the canvas 2d api, draws a text string at the specified coordinates, filling the string's characters with the current fillstyle. an optional parameter allows specifying a
maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. ...
...without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. the text is rendered using the font and text layout configuration as defined by the font, textalign, textbaseline, and direction properties. to draw the outlines of the characters in a string, call the context's stroketext() method. ...
...if not specified, there is no limit to the width of the text. ...
...if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. ...
Pixel manipulation with canvas - Web APIs
o paint the entire image represented by myimagedata to the top left corner of the context, you can simply do the following: ctx.putimagedata(myimagedata, 0, 0); grayscaling and inverting colors in this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putimagedata(). the invert function simply subtracts each color from the
max value 255. the grayscale function simply uses the average of red, green and blue. you can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. see grayscale on wikipedia for more information. <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type=...
...are able to zoom into our picture and see the details. we get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. then we copy that one over to another canvas and resize the image to the size we want it to. in the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200. zoomctx.drawimage(canvas, math.min(math.
max(0, x - 5), img.width - 10), math.min(math.
max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. you can toggle the checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers). zoom example <canvas id...
...it returns a data uri containing a representation ...
...it returns a data uri containing a representation of the image in the format specified by the type parameter (defaults...
MediaDevices.getUserMedia() - Web APIs
the camera and microphone capabilities it needs and wants, using additional constraints. the following expresses a preference for 1280x720 camera resolution: { audio: true, video: { width: 1280, height: 720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it. to require a capability, use the keywords min,
max, or exact (a.k.a. min ==
max). the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that the keywords ...
...exact (a.k.a. min ==
max). the following demands a minimum resolution of 1280x720: { audio: true, video: { width: { min: 1280 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that the keywords min,
max, and exact are inherently mandatory. whereas plain values and a keyword called ideal are not. ...
...sts with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that the keywords min,
max, and exact are inherently mandatory. whereas plain values and a keyword called ideal are not. here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280,
max: 1920 }, height: { min: 576, ideal: 720,
max: 1080 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given. plain values are inherently ideal, which means that the first of our resolution examples above could have been written like this:...
...browsers, as it is going away. video.src = window.url.createobjecturl(stream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); frame rate lower frame-rates may be desirable in some cases, like webrtc transmissions with bandwidth restrictions. var constraints = { video: { framerate: { ideal: 10,
max: 15 } } }; front and back camera on mobile phones. var front = false; document.getelementbyid('flip-button').onclick = function() { front = !front; }; var constraints = { video: { facingmode: (front? "user" : "environment") } }; specifications specification status comment media capture and streamsthe definition of 'mediadevices.getusermedia()' in that specifica...
Capabilities, constraints, and settings - Web APIs
arantee that what you get will match. however, if you use simple values for properties when calling mediastreamtrack.applyconstraints(), the request will always succeed, because these values will be considered a request, not a requirement. specifying a range of values sometimes, any value within a range is acceptable for a property's value. you can specify ranges with either or both minimum and
maximum values, and you can even specify an ideal value within the range, if you choose. if you provide an ideal value, the browser will try to get as close as possible to matching that value, given the other constraints specified. let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facingmode"]) { ...
...ser will try to get as close as possible to matching that value, given the other constraints specified. let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facingmode"]) { // we're missing needed properties, so handle that error. ...
...ied. let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facingmode"]) { // we're missing needed properties, so handle that error. ...
...n 400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater than 30 frames per second. in addition, the only acceptable input device is a camera facing the user (a "selfie cam"). if the width, height, framerate, or facingmode constraints can't be met, the promise returned by applyconstraints() will be rejected. constraints which are specified using any or all of
max, min, or exact are always treated as mandatory. if any constraint which uses one or more of those can't be met when calling applyconstraints(), the promise will be rejected. advanced constraints so-called advanced constraints are created by adding an advanced property to the constraint set; this property's value is an array of additional constraint sets which are considered optional. there are...
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. ...
... the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. ...
...rcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. ...
...east 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(
maxsize); arguments
maxsize a number representing the
maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(
maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... performance.setresourcetimingbuffersize() = yes"); performance.setresourcetimingbuffersize(
maxsize); } else { log("... performance.setresourcetimingbuffersize() = not...
RTCPeerConnection.createDataChannel() - Web APIs
e following fields, any of which may be included in the object passed as the options parameter in order to configure the data channel to suit your needs: ordered optional indicates whether or not messages sent on the rtcdatachannel are required to arrive at their destination in the same order in which they were sent (true), or if they're allowed to arrive out-of-order (false). default: true. ...
... may be included in the object passed as the options parameter in order to configure the data channel to suit your needs: ordered optional indicates whether or not messages sent on the rtcdatachannel are required to arrive at their destination in the same order in which they were sent (true), or if they're allowed to arrive out-of-order (false). default: true.
maxpacketlifetime optional the
maximum number of milliseconds that attempts to transfer a message may take in unreliable mode. while this value is a 16-bit unsigned number, each user agent may clamp it to whatever
maximum it deems appropriate. default: null.
maxretransmits optional the
maximum number of times the user agent should attempt to retransmit a message which fails the first time in unreliable mode. while this value is ...
...default: null. protocol optional the name of the sub-protocol being used on the rtcdatachannel, if any; otherwise, the empty string (""). default: empty string, "". this string may not be longer than 65,535 bytes. ...
.... exceptions invalidstateerror the rtcpeerconnection is closed. typeerror this can happen in a couple of situations: the label and/or protocol string is too long; these cannot be longer than 65,535 bytes (bytes, rather than characters). the id is 65535. while this is a valid unsigned 16-bit value, it's not a permitted value for id. syntaxerror values were specified for both the
maxpacketlifetime and
maxretransmits options. you may only specify a non-null value for one of these. resourceinuse an id was specified, but another rtcdatachannel is already using the same value. operationerror either the specified id is already in use or, if no id was specified, the webrtc layer was unable to automatically generate an id because all ids are in use. examples this example show...
WebGLRenderingContext.blendEquationSeparate() - Web APIs
bglframebuffer. 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. must be either: gl.func_add: source + destination (default value), gl.func_subtract: source - destination, gl.func_reverse_subtract: destination - source, when using the ext_blend_min
max extension: ext.min_ext: minimum of source and destination, ext.
max_ext:
maximum of source and destination. when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.
max:
maximum of source and destination. modealpha a glenum specifying how the alpha component (transparency) of source an...
... return value none. ...
... modealpha a glenum specifying how the alpha component (transparency) of source and destination colors are combined. must be either: gl.func_add: source + destination (default value), gl.func_subtract: source - destination, gl.func_reverse_subtract: destination - source, when using the ext_blend_min
max extension: ext.min_ext: minimum of source and destination, ext.
max_ext:
maximum of source and destination. when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.
max:
maximum of source and destination. return value none. exceptions if mode is not one of the three possible values, a gl.invalid_enum error is thrown. examples to set the blend equations, use:...
...s if mode is not one of the three possible values, a gl.invalid_enum error is thrown. examples to set the blend equations, use: gl.blendequationseparate(gl.func_add, gl.func_subtract); to get the current blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_reverse_subtract, or if the ext_blend_min
max is enabled: ext.min_ext or ext.
max_ext. gl.getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status comment webgl 1.0the definition of 'blendequationseparate' in that specification. recommendation initial definition for webgl. opengl es 2.0the defin...
Using the Web Speech API - Web APIs
true), or just a single result each time recognition is started (false). speechrecognition.lang: sets the language of the recognition. setting this is good practice, and therefore recommended. speechrecognition.interimresults: defines whether the speech recognition system should return interim results, or just final results. final results are good enough for this simple demo. speechrecognition.
maxalternatives: sets the number of alternative potential matches that should be returned per result. this can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = s...
...ay if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.
maxalternatives = 1; starting the speech recognition after grabbing references to the output <div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. this is achieved by calling speechrecognition.start(). the foreach() method is...
...se, and a form with some simple controls. the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>enter some text in the input below and press return to hear it. ...
...text in the input below and press return to hear it. change voices using the dropdown menu.</p> <form> <input type="text" class="txt"> <div> <label for="rate">rate</label><input type="range" min="0.5"
max="2" value="1" step="0.1" id="rate"> <div class="rate-value">1</div> <div class="clearfix"></div> </div> <div> <label for="pitch">pitch</label><input type="range" min="0"
max="2" value="1" step="0.1" id="pitch"> <div class="pitch-value">1</div> <div class="clearfix"></div> </div> <select> </select> </form> javascript let's investigate the javascript that powers this app. setting variables first of all, we capture references to all the dom elements involved in the ui, but more interestingly, we capture a reference to window.speechsynthesis. this is a...
Using the aria-valuenow attribute - Accessibility
the aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. if the current value is not known, the author should not set the aria-valuenow attribute. if the aria-valuenow has a known minimum and
maximum value, authors should set the aria-valuemin and aria-value
max attributes. when the rendered value cannot be accurately represented as a number, authors should use the aria-valuetext attribute in conjunction with aria-valuenow to provide a user-friendly representation of the range's current value. for example, a slider may have rendered values of small, medium, and large. in this case, the values of aria-valuenow could range from 1 through 3, which indicate the position of each value in the value space, but the aria-va...
... small, medium, or large. aria-valuenow is a required attribute of role slider, scrollbar and spinbutton. value string representation of a number possible effects on user agents and assistive technology for elements with role progressbar and scrollbar, assistive technologies should render the actual value as a percentage, calculated as a position on the range from aria-valuemin to aria-value
max if both are defined, otherwise the actual value with a percent indicator. for elements with role slider and spinbutton, assistive technologies should render the actual value to users. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below sh...
...nbutton, assistive technologies should render the actual value to users. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a current value of 4. ...
...pinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a current value of 4. ...
Using the slider role - Accessibility
vided above is one of those opinions and therefore not normative. examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and 100. the current volume is 50. the application will programmatically update the value of aria-valuenow in response to user input. ...
... examples example 1: simple numerical range in the example below, a simple slider is used to select a value between 1 and 100. the current volume is 50. the application will programmatically update the value of aria-valuenow in response to user input. <label for="fader">volume</label> <input type="range" id="fader" min="1"
max="100" value="50" step="1" aria-valuemin="1" aria-value
max="100" aria-valuenow="50" oninput="outputupdate(value)"> <output for="fader" id="volume">50</output> the following code snippet allows you to return the output as it is updated by user input: function outputupdate(vol) { document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number. in these cas...
...ally, a number. in these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. in the example below, the slider is used to select a day of the week. ...
...y", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-value
max aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the slider role ...
Accessibility documentation index - Accessibility
ttribute were set to off. 25 using the aria-required attribute aria, accessibility, needscontent the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted. this attribute can be used with any typical html form element; it is not limited to elements that have an aria role assigned. 26 using the aria-value
max attribute aria, accessibility the aria-value
max attribute is used to define the
maximum value allowed for a range widget such as a slider, spinbutton or progressbar. 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progres...
... the aria-value
max attribute is used to define the
maximum value allowed for a range widget such as a slider, spinbutton or progressbar. 27 using the aria-valuemin attribute aria, accessibility, needscontent the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar. if the aria-valuenow has a known
maximum and minimum, the author should provide properties for aria-value
max and aria-valuemin.the value of aria-valuemin must be less than or equal to the value of aria-value
max. 28 using the aria-valuenow attribute aria, accessibility, needscontent the aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. if t...
... 29 using the aria-valuetext attribute aria, accessibility, attribute the aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider. ...
...he aria-valuenow attribute aria, accessibility, needscontent the aria-valuenow attribute is used to define the current value for a range widget such as a slider, spinbutton or progressbar. if the current value is not known, the author should not set the aria-valuenow attribute. if the aria-valuenow has a known minimum and
maximum value, authors should set the aria-valuemin and aria-value
max attributes. 29 using the aria-valuetext attribute aria, accessibility, attribute the aria-valuetext attribute is used to define the human readable text alternative of aria-valuenow for a range widget such as progressbar, spinbutton or slider. 30 using the article role aria, accessible, needscontent the article role is used to identify a section of a page ...
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
andard boolean css media feature which is an alternative to the standard resolution media feature. note: this media feature is a webkit feature. if possible, use the resolution media feature query instead. syntax the -webkit-device-pixel-ratio feature is specified as a <number> value. it is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-
max-device-pixel-ratio variants to query minimum and
maximum values, respectively. values <number> the number of device pixels used to represent each css px. although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dppx. implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @me...
...ectively. values <number> the number of device pixels used to represent each css px. although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dppx. implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dppx) { ... ...
...esent each css px. although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dppx. implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dppx) { ... } /* similarly: */ @media (-webkit-
max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (
max-resolution: 2dppx) { ... ...
...@media (-webkit-
max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (
max-resolution: 2dppx) { ... } examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /*
maximum resolution */ @media (-webkit-
max-device-pixel-ratio: 3) { p { background: yellow; } } result specifications specification status comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification. living standard initial standardization safari css reference 'media query extensions' in that document. ...
aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css media feature can be used to test the aspect ratio of the viewport. syntax the aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. it is a range feature, meaning you can also use the prefixed min-aspect-ratio and
max-aspect-ratio variants to query minimum and
maximum values, respectively. examples the example below is contained in an <iframe>, which creates its own viewport. ...
...inimum and
maximum values, respectively. examples the example below is contained in an <iframe>, which creates its own viewport. resize the <iframe> to see aspect-ratio in action. html <div id='inner'> watch this element as you resize your viewport's width and height. ...
...ctively. examples the example below is contained in an <iframe>, which creates its own viewport. resize the <iframe> to see aspect-ratio in action. html <div id='inner'> watch this element as you resize your viewport's width and height. ...
...ect ratio */ @media (
max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100"
max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100"
max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (
max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='in...
CSS Grid Layout - CSS: Cascading Style Sheets
gn elements into columns and rows. however, many more layouts are either possible or easier with css grid than they were with tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. ...
... tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a
maximum of auto. items have been placed onto the grid using line-based placement. ...
...nd-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: min
max(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; } reference css properties grid-template-columns grid-template-rows grid-template-areas grid-template...
...-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; } reference css properties grid-template-columns grid-template-rows grid-template-areas grid-template grid-auto-columns grid-auto-rows grid-auto-flow grid grid-row-start grid-column-start grid-row-end grid-column-end grid-row grid-column grid-area row-gap column-gap gap css functions repeat() min
max() fit-content() css data types <flex> glossary 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 ...
CSS values and units - CSS: Cascading Style Sheets
e of the root element. lh line height of the element. rlh line height of the root element. vw 1% of viewport's width. vh 1% of viewport's height. vi 1% of viewport's size in the root element's inline axis. vb 1% of viewport's size in the root element's block axis. vmin 1% of viewport's smaller dimension. v
max 1% of viewport's larger dimension. absolute length units are fixed to a physical length: either an inch or a centimeter. many of these units are therefore more useful when the output is a fixed size media, such as print. for example, mm is a physical millimeter, 1/10th of a centimeter. absolute length units unit name equivalent to cm centimeters 1...
...at can be used in css, and is defined in the css image values and replaced content module. position the <position> type defines 2d positioning of an object inside a positioning area, for example a background image inside a container. this type is interpreted as a background-position and therefore specified in the css backgrounds and borders specification. functional notation calc() min()
max() clamp() toggle() attr() functional notation is a type of value that can represent more complex types or invoke special processing by css. the syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). functions can take multiple arguments, which are formatted similarly to a css prop...
...ing by css. the syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). functions can take multiple arguments, which are formatted similarly to a css property value. white space is allowed, but optional inside the parentheses. (but see notes regarding whitespace within pages for min(),
max() and clamp() functions.) some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. if a comma is used to separate arguments, white space is optional before and after the comma. specifications specification status comment css values and units module level 4 editor's draft adds the vi, vb, ic, ca...
...unctional notations such as rgba() use commas, but generally commas are only used to separate items in a list. if a comma is used to separate arguments, white space is optional before and after the comma. specifications specification status comment css values and units module level 4 editor's draft adds the vi, vb, ic, cap, lh and rlh units. adds the min(),
max() and clamp() functional notation adds toggle() css values and units module level 3 candidate recommendation adds calc(), ch, rem, vw, vw, vmin, v
max, q css color module level 4 working draft adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for t...
Using media queries - CSS: Cascading Style Sheets
r, you must also specify a media type. note: in level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (
max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine multiple media queries into a single rule. each query in a comma-separated list is treated separately from the others. thus, if any of the queries in a list is true, the entire media st...
...or environment. for instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. this example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements: @media (hover: hover) { ... } many media features are range features, which means they can be prefixed with "min-" or "
max-" to express "minimum condition" or "
maximum condition" constraints. for example, this css will apply styles only if your browser's viewport width is equal to or narrower than 12450px: @media (
max-width: 12450px) { ... } if you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or none, in level 4). for example, th...
...rom applying the given styles. it has no effect on modern browsers. @media only screen and (color) { ... } syntax improvements in level 4 the media queries level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. level 4 adds a range context for writing such queries. ...
...ge" type, for example width or height, less verbose. level 4 adds a range context for writing such queries. for example, using the
max- functionality for width we might write the following: note: the media queries level 4 specification has reasonable support in modern browsers, but some media features are not well supported. see the @media browser compatibility table for more details. @media (
max-width: 30em) { ... } in media queries level 4 this can be written as: @media (width <= 30em) { ... } using min- and
max- we might test for a width between two values like so: @media (min-width: 30em) and (
max-width: 50em) { ... } this would convert to the level 4 syntax as: @media (30em <= width <= 50em ) { ... } media queries level 4 also adds ways to combine media queries using full boo...
height - CSS: Cascading Style Sheets
, the property defines the height of the content area. if box-sizing is set to border-box, however, it instead determines the height of the border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-height and
max-height properties override height. syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value. <percentage> defines the height as a percentage of the containing block's height. auto the br...
...ht: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value. <percentage> defines the height as a percentage of the containing block's height. auto the browser will calculate and select a height for the specified element.
max-content the intrinsic preferred height. min-content the intrinsic minimum height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(
max-content,
max(min-content, )). accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to ...
...ng block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. a percentage height on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content |
max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent. </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px ...
...rter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification. editor's draft css box sizing module level 3the definition of 'height' in that specification. working draft added the
max-content, min-content, fit-content keywords. css level 2 (revision 1)the definition of 'height' in that specification. recommendation adds support for the <length> values and precises on which element it applies to. css level 1the definition of 'height' in that specification. recommendation initial definition. ...
min-height - CSS: Cascading Style Sheets
he height property from becoming smaller than the value specified for min-height. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the element's height is set to the value of min-height whenever min-height is larger than
max-height or height. syntax /* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height:
max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value. <percentage> defines the min-height...
...tent; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value. <percentage> defines the min-height as a percentage of the containing block's height. auto the browser will calculate and select a min-height for the specified element. none no limit on the size of the box.
max-content the intrinsic preferred min-height. min-content the intrinsic minimum min-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(
max-content,
max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinh...
... the generated box's containing block. if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.computed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content |
max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-height' in that specification. editor's draft css box sizing module level 3the ...
... css level 2 (revision 1)the definition of 'min-height' in that specification. recommendation initial definition. ...
Creating a cross-browser video player - Developer guides
f 0.1, ensuring that it doesn't go lower than 0 or higher than 1. progress when the <progress> element was defined above in the html, only two attributes were set, value and min, both being given a value of 0. the function of these attributes is self-explanatory, with min indicating the minimum allowed value of the progress element and value indicating its current value. it also needs to have a
maximum value set so that it can display its range correctly, and this can be done via the
max attribute, which needs to be set to the
maximum playing time of the video. this is obtained from the video's duration attribute, which again is part of the media api. ideally, the correct value of the video's duration attribute is available when the loadedmetadata event is raised, which occurs when the vid...
...so something else needs to be done. more on that below. another event, timeupdate, is raised periodically as the video is being played through. ...
...centage of the total time played. this span has a solid css background colour, which helps it provide the same visual feedback as a <progress> element. coming back to the video.duration problem mentioned above, when the timeupdate event is raised, in most mobile browsers the video's duration attribute should now have the correct value. ...
...ck as a <progress> element. coming back to the video.duration problem mentioned above, when the timeupdate event is raised, in most mobile browsers the video's duration attribute should now have the correct value. this can be taken advantage of to set the progress element's
max attribute if it is currently not set: video.addeventlistener('timeupdate', function() { if (!progress.getattribute('
max')) progress.setattribute('
max', video.duration); progress.value = video.currenttime; progressbar.style.width = math.floor((video.currenttime / video.duration) * 100) + '%'; }); note: for more information and ideas on progress bars and buffering feedback, read media buffering, seeking, and time ranges. skip ahead another feature of most browser default video control sets is the ability...
HTML attribute: step - HTML: Hypertext Markup Language
and right on a range, and validating the different date types. if not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. the value can must be a positive number - integer or float -- or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and
max). the default stepping value for number inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer. the default stepping value for time is 1 second, with 900 being equal to 15 minutes. default values for step input type value example date 1 (day) <input type="date" min="2019-12-25" step="1"> month 1 (month) <in...
...for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or grea...
...for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. if omitted, <input type="number">, any integer is valid, ...
...for example, if we have <input type="number" min="10" step="2"> any even integer, 10 or great, is valid. if omitted, <input type="number">, any integer is valid, but floats, like 4.2, are not valid, as step defaults to 1. ...
Public-Key-Pins - HTTP
isk of mitm attacks with forged certificates, however, it has been removed from modern browsers and is no longer supported. use certificate transparency and expect-ct header instead. for more information, see the http public key pinning article. ...
... includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. ...
...tional parameter is specified, pin validation failures are reported to the given url. example hpkp has the potential to lock out users for a long time if used incorrectly! the use of backup certificates and/or pinning the ca certificate is recommended. ...
...this key pinning is also valid for all subdomains, which is told by the includesubdomains declaration. ...
Strict-Transport-Security - HTTP
the http strict-transport-security response header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http. header type response header forbidden header name no syntax strict-transport-security:
max-age=<expire-time> strict-transport-security:
max-age=<expire-time>; includesubdomains strict-transport-security:
max-age=<expire-time>; preload directives
max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https. includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. preload optional see preloading strict transport security for details. not part of t...
...ity header elapses, the next attempt to load the site via http will proceed as normal instead of automatically using https. whenever the strict-transport-security header is delivered to the browser, it will update the expiration time for that site, so sites can refresh this information and prevent the timeout from expiring. should it be necessary to disable strict transport security, setting the
max-age to 0 (over a https connection) will immediately expire the strict-transport-security header, allowing access via http. preloading strict transport security google maintains an hsts preload service. by following the guidelines and successfully submitting your domain, browsers will never connect to your domain using an insecure connection. while the service is hosted by google, all browsers h...
...l browsers have stated an intent to use (or actually started using) the preload list. however, it is not part of the hsts specification and should not be treated as official. information regarding the hsts preload list in chrome : https://www.chromium.org/hsts consultation of the firefox hsts preload list : nsstspreloadlist.inc examples all present and future subdomains will be https for a
max-age of 1 year. this blocks access to pages or sub domains that can only be served over http. strict-transport-security:
max-age=31536000; includesubdomains in the following example,
max-age is set to 2 years, raised from what was a former limit
max-age of 1 year. note that 1 year is acceptable for a domain to be included in browsers' hsts preload lists. 2 years is, however, the recommended goal...
...ge of 1 year. note that 1 year is acceptable for a domain to be included in browsers' hsts preload lists. ...
OPTIONS - HTTP
in this example, we will request permission for these parameters: the access-control-request-method header sent in the preflight request tells the server that...
...d to request the bar.example/resources/post-here/ url via the following: access-control-allow-methods post, get, and options are permitted methods for the url. (this header is similar to the allow response header, but used only for cors.) access-control-allow-headers any script inspecting the response is permitted to read the values of the x-pingother and content-type headers. ...
...alues of the x-pingother and content-type headers. access-control-
max-age the above permissions may be cached for 86,400 seconds (1 day). ...
...ax-age the above permissions may be cached for 86,400 seconds (1 day). ...
Array.prototype.indexOf() - JavaScript
ecma-262, 5th edition, assuming typeerror and math.abs() have their original values. // this version tries to optimize by only checking for "in" when looking for undefined and // skipping the definitely fruitless nan search. other parts are merely cosmetic conciseness. // whether it is actually faster remains to be seen. ...
...fast-path it. ...
... for (; i !== len; ++i) if (that[i] === void 0 && i in that) return i } else if (member !== member) { // nan return -1 // since nan !== nan, it will never be found. fast-path it. } else // all else for (; i !== len; ++i) if (that[i] === member) return i return -1 // if the value was not found, then return -1 } })(object, math.
max, math.min) however, if you are more interested in all the little technical bits defined by the ecma standard, and are less concerned about performance or conciseness, then you may find this more descriptive polyfill to be more useful. // production steps of ecma-262, edition 5, 15.4.4.14 // reference: http://es5.github.io/#x15.4.4.14 if (!array.prototype.indexof) { array.prototype.indexof = ...
... -1. if (len === 0) { return -1; } // 5. if argument fromindex was passed let n be // tointeger(fromindex); else let n be 0. var n = fromindex | 0; // 6. if n >= len, return -1. if (n >= len) { return -1; } // 7. if n >= 0, then let k be n. // 8. else, n<0, let k be len - abs(n). // if k is less than 0, then let k be 0. k = math.
max(n >= 0 ? n : len - math.abs(n), 0); // 9. repeat, while k < len for (; k < len; k++) { // a. let pk be tostring(k). // this is implicit for lhs operands of the in operator // b. let kpresent be the result of calling the // hasproperty internal method of o with argument pk. // this step can be combined with c // c. if kpresent is true, then ...
Math.hypot() - JavaScript
mensions can be calculated by adding more squares under the square root: math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4). this function makes this calculation easier and faster; you simply call math.hypot(v1, v2) , or math.hypot(v1, v2, v3, v4, ...). math.hypot also avoids overflow/underflow problems if the magnitude of your numbers is very large. the largest number you can represent in js is number.
max_value, which is around 10308. if your numbers are larger than about 10154, taking the square of them will result in infinity. for example, math.sqrt(1e200*1e200 + 1e200*1e200) = infinity . if you use hypot() instead, you get better answer: math.hypot(1e200, 1e200) = 1.4142...e+200 . this is also true with very small numbers. math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0, but math.hypot(1e-200, 1...
...math.hypot) math.hypot = function() { var y = 0, i = arguments.length, containsinfinity = false; while (i--) { var arg = arguments[i]; if (arg === infinity || arg === -infinity) containsinfinity = true y += arg * arg } return containsinfinity ? ...
...ue y += arg * arg } return containsinfinity ? infinity : math.sqrt(y) } a polyfill that avoids underflows and overflows: if (!math.hypot) math.hypot = function () { var
max = 0; var s = 0; var containsinfinity = false; for (var i = 0; i < arguments.length; ++i) { var arg = math.abs(number(arguments[i])); if (arg === infinity) containsinfinity = true if (arg >
max) { s *= (
max / arg) * (
max / arg);
max = arg; } s += arg === 0 &&
max === 0 ? 0 : (arg /
max) * (arg /
max); } return containsinfinity ? infinity : (
max === 1 / 0 ? ...
... 0; var containsinfinity = false; for (var i = 0; i < arguments.length; ++i) { var arg = math.abs(number(arguments[i])); if (arg === infinity) containsinfinity = true if (arg >
max) { s *= (
max / arg) * (
max / arg);
max = arg; } s += arg === 0 &&
max === 0 ? 0 : (arg /
max) * (arg /
max); } return containsinfinity ? infinity : (
max === 1 / 0 ? ...
String.prototype.repeat() - JavaScript
examples and send us a pull request. syntax str.repeat(count) parameters count an integer between 0 and +infinity, indicating the number of times to repeat the string. return value a new string containing the specified number of copies of the given string. exceptions rangeerror: repeat count must be non-negative. rangeerror: repeat count must be less than infinity and not overflow
maximum string size. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. however, you can polyfill string.prototype.repeat() with the following snippet: if (!string.prototype.repeat) { string.prototype.repeat = function(count) { 'use strict'; if (this == null) throw new typeerror('can\'t convert '...
...n infinity'); count = math.floor(count); if (str.length == 0 || count == 0) return ''; // ensuring count is a 31-bit integer allows us to heavily optimize the // main part. ...
...floor(count); if (str.length == 0 || count == 0) return ''; // ensuring count is a 31-bit integer allows us to heavily optimize the // main part. ...
..., most current (august 2014) browsers can't handle // strings 1 << 28 chars or longer, so: if (str.length * count >= 1 << 28) throw new rangeerror('repeat count must not overflow
maximum string size'); var
maxcount = str.length * count; count = math.floor(math.log(count) / math.log(2)); while (count) { str += str; count--; } str += str.substring(0,
maxcount - str.length); return str; } } examples using repeat 'abc'.repeat(-1) // rangeerror 'abc'.repeat(0) // '' 'abc'.repeat(1) // 'abc' 'abc'.repeat(2) // 'abcabc' 'abc'.repeat(3.5) // 'abcabcabc' (count will be converted to integer) 'abc'.repeat(1/0) // rangeerror ({ tostring: () => 'abc', repeat: string.prototype.repeat }).repeat(2) // 'abcabc' (repeat() is a generi...
WebAssembly.Memory() constructor - JavaScript
ytes of memory accessed by a webassembly instance. a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly. syntax new webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial size of the webassembly memory, in units of webassembly pages.
maximum optional the
maximum size the webassembly memory is allowed to grow to, in units of webassembly pages. when present, the
maximum parameter acts as a hint to the engine to reserve memory up front. however, the engine may ignore or clamp this reservation request. unshared webassembly memories don't need to set a
maximum, but shared memories do. shared optional a boolean value that defines...
...d webassembly memories don't need to set a
maximum, but shared memories do. shared optional a boolean value that defines whether the memory is a shared memory or not. if set to true, it is a shared memory. the default is false. note: a webassembly page has a constant size of 65,536 bytes, i.e., 64kib. exceptions if memorydescriptor is not of type object, a typeerror is thrown. if
maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new memory instance there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial size of 10 pages (640kib), and a
maximum size of 100 pages (6.4mib). its buffer property will return...
...wn. examples creating a new memory instance there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial size of 10 pages (640kib), and a
maximum size of 100 pages (6.4mib). its buffer property will return an arraybuffer. var memory = new webassembly.memory({initial:10,
maximum:100}); the second way to get a webassembly.memory object is to have it exported by a webassembly module. the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above. it then stores some values in that memory, then exp...
...> { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared. you can create a shared memory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:10,
maximum:100, shared:true}); this memory's buffer property will return a sharedarraybuffer. specifications specification webassembly javascript interfacethe definition of 'memory' in that specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.
Performance fundamentals - Web Performance
tain 100% of user state at all times: all applications in the system would run simultaneously, and all applications would retain the state created by the user the last time the user interacted with the application (application state is stored in computer memory, which is why the approximation is close). from this comes an important but counter-intuitive corollary: a well-designed system does not
maximize the amount of free memory. memory is a resource, and free memory is a unused resource. rather, a well-designed system has been optimized to use as much memory as possible to maintain user state, while meeting other upp goals. that doesn't mean the system should waste memory. when a system uses more memory than necessary to maintain some particular user state, the system is wasting a resourc...
...s to canvas "manually" minimize copies when being drawn to the display framebuffer. this is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware. complex scenes are rendered using the device's gpu for
maximum performance. to improve power usage, simple scenes are rendered using special dedicated composition hardware, while the gpu idles or turns off. fully static content is the exception rather than the rule for rich applications. rich applications use dynamic content with animation and transition effects. transitions and animations are particularly important to applications: developers can use c...
...to transition into an application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and animate scenes that: use pages/panels approximately the size of the device screen or smaller transition/animate the css transform and opacity properties transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run
maximally efficiently. memory and power usage improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommonly-used ui resources. do use efficient data structures and ensure resources like images are optimized well. modern cpus can enter a lower-power mode when mostly idle. applications that constantly fire timers or keep unnecessary an...
...ing. in particular, making dozens or hundreds of network requests takes longer in mobile browsers. rendering large images and css gradients can also take longer. simply downloading large files can take longer, even over a fast network, because mobile hardware is sometimes too slow to take advantage of all the available bandwidth. for useful general tips on mobile web performance, have a look at
maximiliano firtman's mobile web high performance talk. testcases and submitting bugs if the firefox and chrome developer tools don't help you find a problem, or if they seem to indicate that the web browser has caused the problem, try to provide a reduced test case that
maximally isolates the problem. that often helps in diagnosing problems. see if you can reproduce the problem by saving and load...
SVG documentation index - SVG: Scalable Vector Graphics
itude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma. 25 arabic-form deprecated, svg, svg attribute the arabic-form attribute indicates which of the four possible forms an arabic glyph represents. 26 ascent deprecated, needsexample, svg, svg attribute the ascent attribute defines the
maximum unaccented height of the font within the font coordinate system. 27 attributename needscompattable, svg, svg attribute the attributename attribute indicates the name of the css property or attribute of the target element that is going to be changed during an animation. 28 attributetype deprecated, needscompattable, svg, svg attribute the attributetype...
...rictions; it can be considered metadata. 32 baseline-shift needsexample, svg, svg attribute the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. the shifted object might be a sub- or superscript. 33 bbox deprecated, svg, svg attribute the bbox attribute defines the
maximal bounding box of a font. 34 begin needscompattable, svg, svg attribute the begin attribute defines when an animation should begin or when an element should be discarded. 35 bias filters, needsexample, svg, svg attribute the bias attribute shifts the range of the filter. after applying the kernelmatrix of the <feconvolvematrix> element to the input imag...
...tes are called custom data attributes. they let svg markup and its resulting dom share information that standard attributes can't, usually for scripting purposes. their custom data are available via the svgelement interface of the element the attributes belong to, with the svgelement.dataset property. 56 descent deprecated, svg, svg attribute the descent attribute defines the
maximum unaccented depth of the font. 57 diffuseconstant filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and...
... maskunits svg, svg attribute the maskunits attribute indicates which coordinate system to use for the geometry properties of the <mask> element. 137 mathematical deprecated, svg, svg attribute the mathematical attribute indicates the alignment coordinate for glyphs to achieve mathematical baseline alignment for horizontally oriented glyph layouts. 138
max svg, svg attribute the
max attribute specifies the
maximum value of the active animation duration. 139 media svg, svg attribute the media attribute specifies a media query that must be matched for a style sheet to apply. 140 method experimental, needsexample, svg, svg attribute the method attribute indicates the method by which text should be re...
Downloading Files - Archive of obsolete content
the browser window that the url // we are downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. ...
...e are downloading comes from. if, and only if, the url is not // related to a window, null should be used instead. ...
...indow, null should be used instead. ...
Creating a status bar extension - Archive of obsolete content
extension identification information certain information is needed so firefox can uniquely identify your extension. in this sample, these fields are: property name description id a unique identification string. befo...
...extension identification information certain information is needed so firefox can uniquely identify your extension. in this sample, these fields are: property name description id a unique identification string. before firefox 1.5, this wa...
...rget application information is contained within the em:targetapplication description block. property name description id an id indicating the target application. "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" is a guid that uniquely identifies firefox as the target. minversion the oldest version of the target application on which the extension is supported.
maxversion the most recent version of the target application on which the extension is known to work. for details on the format of an install manifest, read the install manifests section. the chrome manifest the chrome manifest is a file that tells the target application where to look for the chrome package for your extension. the chrome is the set of user interface elements outside the cont...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
_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"); lockpref("mail.server.server2.issecure", true); lockpref("mail.server.server2.login_at_startup", true); lockpref("mail.server.server2.
max_cached_connections", 5); //lockpref("mail.server.server2.name", "jehan.procaccia@int-evry.fr"); lockpref("mail.server.server2.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...
...getldapattributes("ldap2.int-evry.fr", "ou=people,dc=int-evry,dc=fr", "uid=" +env_user, "uid,cn,mail"); } catch(e) { displayerror("lockedpref", e); } eop print $page; wind...
... at least tested on netscape 4.x. in the original files below (in netscape 4.x section)...
Drag and Drop Example - Archive of obsolete content
add the wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. ...
...elves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. a
maximum size is also specified so that it doesn't resize when new elements are dragged onto it. the board will need to respond to the dragdrop event so that an element is created when the user drags onto it. <stack id="board" style="width:300px; height: 300px;
max-width: 300px;
max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events. we'll add a boardobserver to the file dragboard.js in a moment. next, a palette will be added to the right side of the window. it will contain three buttons, on...
...e final code is shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300px; height: 300px;
max-width: 300px;
max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="n...
Tuning Pageload - Archive of obsolete content
ws layout and painting to happen. if the parser gets a large chunk of data, it will try to parse it all, building the corresponding content model. since layout and painting happen asynchronously, while the parser is working there is no layout or painting. ...
...responding content model. since layout and painting happen asynchronously, while the parser is working there is no layout or painting. so this preference is used to increase responsiveness, especially on cached loads (where data comes into the parser in large chunks) content.
max.tokenizing.time controls how often the sink interrupts the parser. the parser is interrupted at least every content.
max.tokenizing.time microseconds, if it can be interrupted at all; bug 76722 may have more details on this part. content.switch.threshold determines how often we switch content sink modes. there are two modes. in mode a we interrupt the parser every content.
max.tokenizing.time microseconds. in mode b we interrupt the parser every 3000 microseconds. every content.switch.threshold microseconds, we ...
...ing rendering objects for one dom node at a time. specifically - content.notify.ontimer controls whether the frame constructor is notified off a timer at all content.notify.backoffcount controls how many times that happens for a given page (the default is arbitrarily many times). once the backoff count is reached, no more rendering model construction till after the whole page is parsed. content.
maxtextrun controls the
maximum length of data in a textnode. so if you have more than content.
maxtextrun characters of text in a row, we'll create multiple textnodes for it. this is an optimization designed to prevent long text from ending up being o(n^2). it's also really a bug per the dom spec and we should stop doing it... ...
Progress Meters - Archive of obsolete content
progress meters are used when you do not know the length of time of an operation. the progress meter will have an animation such as a spinning barber pole or a sliding box, depending on the platform and theme used. 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. if this is set to determined, the progress meter is a determinate progress meter where it fills up as the task completes. if this is set to undetermined, the progress meter is indeterminate where you do not know the length of time. the value determined is the default i...
...ned, the progress meter is indeterminate where you do not know the length of time. the value determined is the default if you do not specify this attribute. value the current value of the progress meter. you should only use this for a progress meter that is determinate. the value should be set to an integer percentage from 0 to 100. the value would be changed by a script as the task completes.
max the
maximum value of the progress meter. should be used only with determinate. the find files example let's add a progress meter to our find file dialog. we would normally put an indeterminate progress meter as we don't know how many files we'll be searching or how long the search will take. however, we'll add a normal one for now as an animating one can be distracting during development. th...
...t an indeterminate progress meter as we don't know how many files we'll be searching or how long the search will take. however, we'll add a normal one for now as an animating one can be distracting during development. the progress meter would normally only appear while the search is taking place. we'll add a script later to turn it on and off. <textbox id="find-text"/> <html:progress value="50"
max="100" style="margin: 4px;"/> <button id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the window. a margin has been set to 4 pixels so that it is separated from the edge of the window. as was stated earlier, we only want the progress bar to be displayed while the search was occurring. a script will show and hide it as necessary. to m...
Scroll Bars - Archive of obsolete content
adjusting the scroll bar. you probably won't use this too often. a scroll bar is made up of several parts: the slider, which is the main part of the scroll bar with the adjustable box, and the two arrow buttons on the end. a scroll bar creates all of these elements automatically. the syntax of a scroll bar is as follows: <scrollbar id="identifier" orient="horizontal" curpos="20"
maxpos="100" increment="1" pageincrement="10"/> the attributes are as follows: id the unique identifer of the scroll bar orient this specifies the direction of the scroll bar. the default is horizontal, which creates a scroll bar that extends from left to right. you can also specify vertical which creates a scroll bar that extends from top to bottom. c...
... this specifies the direction of the scroll bar. the default is horizontal, which creates a scroll bar that extends from left to right. you can also specify vertical which creates a scroll bar that extends from top to bottom. curpos this indicates the current position of the scroll bar thumb (the box that you can slide back and forth.) the value ranges from 0 to the value of
maxpos. this value does not need a unit. the default value is 0.
maxpos this indicates the
maximum position of the scroll bar thumb. the is a numeric value and does not have a unit. the default value is 100. increment the value here specifies how much the value of curpos changes by when the user clicks on one of the scroll bar arrows. the default value is 1. p...
...scroll bar, the value will change by 10. when the user clicks the scroll bar arrows, the thumb will move by the amount specified by the value increment. increasing the value of this attribute will cause the scroll bar to move farther with each click. the leftmost or topmost position of the scroll bar has the value 0 and the rightmost or bottommost position of the scroll bar has the value given by
maxpos. by adjusting the values of the scroll bar, you can have the thumb positioned just as you want it and the change when the user clicks the arrows just as you want it. next, we'll find out how to create toolbars. « previousnext » ...
XUL element attributes - Archive of obsolete content
ulated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or
maximum height. the css height property may also be used. hidden type: boolean if set to true, the element is not displayed. this is similar to setting the css display property to 'none'. id type: unique id a unique identifier so that you can identify the element with. you can use this as a parameter to getelementbyid() and other dom functions and to reference the element in style...
...the id of the element in the base window that the element should appear before. this value may be a comma-separated list of ids, which are scanned and the first one found in the window is used. left type: string (representing an integer) for elements placed directly within a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack.
maxheight type: string (representing an integer) the
maximum height of the element. this corresponds to the
max-height css property.
maxwidth type: string (representing an integer) the
maximum width of the element. this corresponds to the
max-width css property. menu type: id alternate name for the popup attribute, but also has a corresponding script property 'menu'. minhei...
...al cursor state call the method removeattribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear. width type: string (representing an integer) the preferred width of the element. the value should not include a unit as all values are in pixels. the actual displayed width may be different if the element or its contents have a minimum or
maximum width, or the size is adjusted by the flexibility or alignment of its parent. the css width property may also be used. ...
action - Archive of obsolete content
rs multiple times, it will have the same value in each place. for more information, see actions. ...
... times, it will have the same value in each place. for more information, see actions. ...
...ion, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(),...
assign - Archive of obsolete content
ul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...ttribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
bbox - Archive of obsolete content
e aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
...it is equivalent to using an hbox element with an align attribute set to baseline. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
binding - Archive of obsolete content
be used within the action of a rule. properties object, predicate, subject examples fixme: (example needed) 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties object type: string the object of the element. it can be a variable reference, an rd...
...e type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...i the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
bindings - Archive of obsolete content
laced directly inside the rule element. more information is available in the template guide. examples (example needed) 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width object type: string the object of the element. it can be a variable reference, an rdf resource...
...he predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...e or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
broadcaster - Archive of obsolete content
ement instead. more information is available in the broadcasters and observers xul tutorial. ...
...ad. more information is available in the broadcasters and observers xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
broadcasterset - Archive of obsolete content
et and its descendants are not displayed. more information is available in the xul tutorial. ...
...descendants are not displayed. more information is available in the xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
column - Archive of obsolete content
ements directly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...ctly inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
columns - Archive of obsolete content
tween the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...olumns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
conditions - Archive of obsolete content
and earlier instead of the query element. more information is available in the xul tutorial. ...
... instead of the query element. more information is available in the xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
dialogheader - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
...none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...
... description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...
grippy - Archive of obsolete content
llapse a sibling element of the splitter. more information is available in the xul tutorial. ...
...bling element of the splitter. more information is available in the xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
groupbox - Archive of obsolete content
<radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of acces...
...late, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
image - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element. the src attribute can be used to specify the url of the image. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying
maximum sizes using
maxheight or
maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes ...
...erties accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...
... accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...
keyset - Archive of obsolete content
xul tutorial. attributes disabled examples <keyset> <key id="sample-key" modifiers="shift" key="r"/> </keyset> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width disabled type: boolean indicates whether the element is disabled or not. if this attribute is ...
...irely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...isible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
listcell - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
... this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. ...
...ibute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. ...
menuitem - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
...d sets the value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...value of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
observes - Archive of obsolete content
and persist attributes are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
... attributes are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
page - Archive of obsolete content
lar to a window, except it should be used for xul files that are to be loaded into an iframe. ...
...ndow, except it should be used for xul files that are to be loaded into an iframe. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
query - Archive of obsolete content
ueries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
queryset - Archive of obsolete content
related ] a container for query elements when more than one query is used. for more information, see multiple queries. ...
... a container for query elements when more than one query is used. for more information, see multiple queries. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
resizer - Archive of obsolete content
is resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
... grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
row - Archive of obsolete content
lumn elements defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
...ts defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
rows - Archive of obsolete content
onding positions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...tions between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
script - Archive of obsolete content
der) javascript version is used (like you get when including a javascript file from web content without specifying a version number). ...
...ript version is used (like you get when including a javascript file from web content without specifying a version number). ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
scrollbox - Archive of obsolete content
sureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...isvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
scrollcorner - Archive of obsolete content
] this element is used for the small box where the horizontal and vertical scrollbars meet. ...
...ement is used for the small box where the horizontal and vertical scrollbars meet. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
separator - Archive of obsolete content
ontal the separator separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
... separator separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
spacer - Archive of obsolete content
ble in the xul tutorial. ...
...xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
spinbuttons - Archive of obsolete content
d and decreased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
...ased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
statusbar - Archive of obsolete content
<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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessi...
...mplate, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...ltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
<statusbarpanel> - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
... properties image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
...s image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
stringbundleset - Archive of obsolete content
| attributes | properties | methods | related ] a container for stringbundle elements. ...
...tes | properties | methods | related ] a container for stringbundle elements. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
tabpanel - Archive of obsolete content
t use any other container in place of it. more information is available in the xul tutorial. ...
...ther container in place of it. more information is available in the xul tutorial. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
template - Archive of obsolete content
ber variable. if not specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...e. if not specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
textnode - Archive of obsolete content
(example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...eeded) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
toolbarseparator - Archive of obsolete content
toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessi...
...emplate, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...oltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
toolbarset - Archive of obsolete content
element is used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
...used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
...tion, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), ...
treechildren - Archive of obsolete content
e, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...ground of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
treecol - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
...rolled horizontally if it is wider than the available space. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...zontally if it is wider than the available space. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
treerow - Archive of obsolete content
roperty names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...es sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
treeseparator - Archive of obsolete content
roperty names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...es sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
triple - Archive of obsolete content
ri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...roperty. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
where - Archive of obsolete content
s a substring subject type: string the variable or string to compare. value type: string the value to compare. ...
...ng subject type: string the variable or string to compare. value type: string the value to compare. ...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
every add-on must have a unique id. this can be in a guid form but the simpler email form is preferred now. you should aim to use a domain-name that you own and then your own unique short-name for the plugin before...
... every add-on must have a unique id. this can be in a guid form but the simpler email form is preferred now. you should aim to use a domain-name that you own and then your own unique short-name for the plugin before the @. the plugin m...
...-name that you own and then your own unique short-name for the plugin before the @. the plugin must have a name to identify the plugin to the user in the list of add-ons. the version is fairly self-descriptive, it must be a toolkit version format. the target application block says which versions of an application the plugin is compatible with. it includes the application id and the minimum and
maximum version of the application that the plugin works with. there can be multiple targetapplication blocks listed. the unpack property is necessary to tell applications using newer versions of gecko to unpack the plugin because dlls can't be loaded from xpi files. providing updates when plugins are packaged in this way they can make use of the built in add-on update system. this allows a remote ...
Introduction to Public-Key Cryptography - Archive of obsolete content
can be issued, the public key it contains and the corresponding private key must be generated. sometimes it may be useful to issue a single person one certificate and key pair for signing operations, and another certificate and key pair for encryption operations. separate signing and encryption certificates make it possible to keep the private signing key on the local machine only, thus providing
maximum nonrepudiation, and to back up the private encryption key in some central location where it can be retrieved in case the user loses the original key or leaves the company. keys can be generated by client software or generated centrally by the ca and distributed to users via an ldap directory. there are trade-offs involved in choosing between local and centralized key generation. for example,...
...k up the private encryption key in some central location where it can be retrieved in case the user loses the original key or leaves the company. keys can be generated by client software or generated centrally by the ca and distributed to users via an ldap directory. there are trade-offs involved in choosing between local and centralized key generation. for example, local key generation provides
maximum nonrepudiation, but may involve more participation by the user in the issuing process. flexible key management capabilities are essential for most organizations. key recovery, or the ability to retrieve backups of encryption keys under carefully defined conditions, can be a crucial part of certificate management (depending on how an organization uses certificates). key recovery schemes usual...
...the identities of end entities before responding to the requests. in addition, some requests need to be approved by authorized administrators or managers before being services. as previously discussed, the means used by different cas to verify an identity before issuing a certificate can vary widely, depending on the organization and the purpose for which the certificate will be used. to provide
maximum operational flexibility, interactions with end entities can be separated from the other functions of a ca and handled by a separate service called a registration authority (ra). an ra acts as a front end to a ca by receiving end entity requests, authenticating them, and forwarding them to the ca. after receiving a response from the ca, the ra notifies the end entity of the results. ras can b...
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
sion's install manifest to indicate that it can be installed in thunderbird and sunbird. ...
... to indicate that it can be installed in thunderbird and sunbird. ...
...03-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>1.5</em:minversion> <em:
maxversion>2.0.0.*</em:
maxversion> </description> </em:targetapplication> <!-- describe the sunbird versions we support --> <em:targetapplication> <description> <em:id> {718e30fb-e89b-41dd-9da7-e25a45638b28}</em:id> <em:minversion>0.2</em:minversion> <em:
maxversion>0.4.*</em:
maxversion> </description> </em:targetapplication> these two blocks indicate that the extension supports thunderbird versions 1.5 through 2.0.0.x, sunbird versions 0.2 through 0.4.x. after inserting this code, you can successfully install the extension into any (or all) of firefox, thunderbird, and sunbird, but you won't see any effect in thunderbird and sunbird. that'...
Anatomy of a video game - Game development
ntrolling the main thread. sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (vsync) and repeat. you can think about developing realtime applications as having a budget of time to do work. all of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 hz display. browsers invoke your code as early as possible to give it
maximum computation time. your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in webgl). long calculations can be performed on a web worker or a gpu at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events. while we are on the topic of budgeting time, many web brows...
...'s system cannot keep up with the workload. let us start by assuming that you will handle user input and update the game state every time you draw. we will branch out later. note: changing how your main loop deals with time is a debugging nightmare, everywhere. think about your needs carefully before working on your main loop. what most browser games should look like if your game can hit the
maximum refresh rate of any hardware you support then your job is fairly easy. you can simply update, render, and then do nothing until vsync. /* * starting with the semicolon is in case whatever line of code above this example * relied on automatic semicolon insertion (asi). the browser could accidentally * think this whole example continues from the previous line. the leading semicolon * marks the...
... the beginning of our new line if the previous one was not empty or terminated. * * let us also assume that mygame is previously defined. */ ;(function () { function main( tframe ) { mygame.stopmain = window.requestanimationframe( main ); update( tframe ); // call your update method. in our case, we give it raf's timestamp. render(); } main(); // start the cycle })(); if the
maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. the most famous example of this concept is the game from id software, rage. this game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). if computation took too long then rendered resolution would decrease, textures and other assets would fail...
Bounding volume collision detection with THREE.js - Game development
box3 and sphere objects. once instantiated, they have methods available to do intersection tests against other volumes. instantiating boxes to create a box3 instance, we need to provide the lower and upper boundaries of the box. ...
...so any transformations such as scale, position, etc. applied to the mesh will be ignored while computing the calculating box. ...
... point vs. box and sphere box vs. box and sphere sphere vs. box and sphere using boxhelper as an alternative to using raw box3 and sphere objects, three.js...
2D maze game with device orientation - Game development
{ x: 72, y: 320, t: 'w' }, { x: 200, y: 320, t: 'h' }, { x: 72, y: 150, t: 'w' } ], // ... ]; every array element holds a collection of blocks with an x and y position and t value for each. ...
...the following line in the update() function adds a listener that fires when the ball gets to the hole. this.physics.arcade.overlap(this.ball, this.hole, this.finishlevel, null, this); this works similarly to the collide method explained earlier. ...
...'); this.game.state.start('mainmenu'); } else { alert('congratulations, level '+this.level+' completed!'); this.totaltimer += this.timer; this.timer = 0; this.level++; this.timertext.settext("time: "+this.timer); this.totaltimetext.settext("total time: "+this.totaltimer); this.leveltext.settext("level: "+this.level+" / "+this.
maxlevels); this.ball.body.x = this.ballstartpos.x; this.ball.body.y = this.ballstartpos.y; this.ball.body.velocity.x = 0; this.ball.body.velocity.y = 0; this.showlevel(); } }, if the current level is equal to the
maximum number of levels (in this case 5), then the game is finished — you'll get a congratulations message along with the number of seconds e...
Supporting older browsers - Learn web development
omes a grid item loses the float behaviour, which means that by turning the wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...container. in the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. in grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the grid layout is introduced. ...
... can write some css for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout. if we add a feature query to the above example, we can use it to set the widths of our items back to auto if we know that we have grid support. ...
How CSS is structured - Learn web development
avigate the codebase as it gets larger. with this kind of commenting in place, searching for comments in your code editor becomes a way to efficiently find a section of code. /* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto;
max-width: 33em; } @media (min-width: 70em) { /* let's special case the global font size. on large screen or window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first...
...browsers ignore white space in html, browsers ignore white space inside css. the value of white space is how it can improve readability. in the example below, each declaration (and rule start/end) has its own line. this is arguably a good way to write css. it makes it easier to maintain and understand css. body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto;
max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format. although the two examples work the same, the one below is more difficul...
...size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } the next example shows the equivalent css in a more compressed format. although the two examples work the same, the one below is more difficult to read. body {font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto;
max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} for your own projects, you will format your code according to personal preference. for team projects, you may find that a team or project has its own style guide. important: t...
UI pseudo-classes - Learn web development
ve no value are counted as invalid — they will be matched with :invalid and :required. controls with built-in validation, such as <input type="email"> or <input type="url"> are (matched with) :invalid when the data entered into them does not match the pattern they are looking for (but they are valid when empty). controls whose current value is outside the range limits specified by the min and
max attributes are (matched with) :invalid, but also matched by :out-of-range, as you'll see later on. there are some other ways to make an element matched by :valid/:invalid, as you'll see in the client-side form validation article. but we'll keep things simple for now. let's go in and look at a simple example of :valid/:invalid (see valid-invalid.html for the live version, and also check out the...
...y have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address. in-range and out-of-range data as we hinted at above, there are two other related pseudo-classes to consider — :in-range and :out-of-range. these match numeric inputs where range limits are specified by the min and
max, when their data is inside or outside the specified range, respectvely. note: numeric input types are date, month, week, time, datetime-local, number, and range. it is worth noting that inputs whose data is in-range will also be matched by the :valid pseudo-class and inputs whose data is out-of-range will also be matched by the :invalid pseudo-class. so why have both? the issue is really one ...
...provide both. let's look at an example that does exactly this. our out-of-range.html demo (see also the source code) builds on top of the previous example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required. ...
Server-side web frameworks - Learn web development
as deleting database records). 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. an email field would only allow valid email addresses). the field definitions may also specify their
maximum size, default values, selection list options, help text for documentation, label text for forms etc. 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. the first code snippet below shows a very simple django model for a team object. this stores the team name and team level as character fields an...
...ault values, selection list options, help text for documentation, label text for forms etc. 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. the first code snippet below shows a very simple django model for a team object. ...
...m object. this stores the team name and team level as character fields and specifies a
maximum number of characters to be stored for each record. the team_level is a choice field, so we also provide a mapping between choices to be displayed and data to be stored, along with a default value. #best/models.py from django.db import models class team(models.model): team_name = models.charfield(
max_length=40) team_levels = ( ('u09', 'under 09s'), ('u10', 'under 10s'), ('u11', 'under 11s'), ... #list our other teams ) team_level = models.charfield(
max_length=3,choices=team_levels,default='u11') the django model provides a simple query api for searching the database. this can match against a number of fields at a time using different criteria (e...
Styling Vue components with CSS - Learn web development
e-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%;
max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css f...
...now we can go through and begin editing our comp...
...now we can go through and begin editing our components to use some of these styles. adding css classes in vue we should app...
Implementing feature detection - Learn web development
for your-feature-here" in your favorite search engine. bear in mind though that some features, however, are known to be undetectable — see modernizr's list of undetectables. matchmedia we also wanted to mention the window.matchmedia javascript feature at this point too. this is a property that allows you to run media query tests inside javascript. it looks like this: if (window.matchmedia("(
max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="te...
...script in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). ...
...page width is 480px or less: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (
max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (window.matchmedia("(
max-width: 480px)").matches) { deck.shuffleto(1); } using modernizr to implement feature detection it is possible to implement your own feature detection tests using techniques like the ones detailed above. you might as well use a dedicated feature detection library however, as it makes things much easier. the mother of all feature detection libraries is modernizr, and it can detect just about ev...
Creating a spell check dictionary add-on
k> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:
maxversion>46.0</em:
maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:
maxversion>22.0</em:
maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:ta...
... <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:
maxversion>22.0</em:
maxversion> </description> </em:targetapplication> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.15a1</em:minversion> <em:
maxversion>2.49</em:
maxversion> </description> </em:targetapplication> </description> </rdf> there are some rules about how you should adapt the install.rdf file: if you are creating a new dictionary add-on, we recommend that the em:id consists of your locale code followed by @dictionaries.addons.mozilla.org, but if there is more than one dictionary for your language (for example ...
...hould therefore be the same as in the example above (or greater). if you set em:minversion to a lower value, gecko 10-17 will not be able to update your dictionary add-on once the restartless dictionary is installed (bug 782118), and gecko 10-16 may warn the user that your dictionary is not compatible, when users try to update to a newer version of firefox/thunderbird (bug 782115). update the em:
maxversion to the greatest versions available. once you have added these files to your zip file and renamed the file to have the .xpi extension, you can install your add-on in firefox and test it. after a successful test, you can upload your add-on to addons.mozilla.org and ask for it to be included in the dictionaries & language packs page. reference creating a hunspell dictionary ...
Debugging Table Reflow
reflow the most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log. look there especially how the
maxelementsize (mes) and desired size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
...o claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log. look there especially how the
maxelementsize (mes) and desired size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
..."> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en
max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 ...
Listening to events on all tabs
ab's new uri. aflags optional: this is a value which explains the situation or the reason why the location has changed. optional from gecko 10 onprogresschange called when updated progress information for the download of a document is available. void onprogresschange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, print32 acurselfprogress, print32 a
maxselfprogress, print32 acurtotalprogress, print32 a
maxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress information is being provided. awebprogress the progress instance responsible for handling the events. arequest the nsirequest object representing the associated request. acurselfprogress the current progress for...
... onsecuritychange notification called for security progress. ...
... onsecuritychange notification called for security progress. ...
DMD
then dmd logs for content processes will be saved to ~/dmdlogs/. note: to dump dmd data from content processes, you'll need to disable the sandbox moz_dmd_shutdown_log must (currently) include the trailing separator (''/") post-processing dmd.py also takes options that control how it works. run dmd.py -h for documentation. the following options are the most interesting ones. ...
... -s / --sort-by. this controls how records are sorted. ...
... -s / --sort-by. this controls how records are sorted. acceptable values are usable (the default), req, slop and num-blocks. --clamp-contents. ...
PRIntervalTime
they are chosen to be appropriate for the host os, yet provide sufficient resolution and period to be useful to clients. the increasing interval value represented by printervaltime wraps. ...
...appropriate for the host os, yet provide sufficient resolution and period to be useful to clients. the increasing interval value represented by printervaltime wraps. it should therefore never be used for intervals greater than approximately 6 hours. interval times are accurate regardless of host processing requirements and are very cheap to acquire. the constants pr_interval_min and pr_interval_
max define a range in ticks per second. these constants bound both the period and the resolution of a printervaltime object. the reserved constants pr_interval_no_wait and pr_interval_no_timeout have special meaning for nspr. they indicate that the process should wait no time (return immediately) or wait forever (never time out), respectively. important note the counters used for interval times ar...
......> as long as the interval and the elapsed time (now - epoch) do not exceed half the namespace allowed by a printervaltime (231-1), the expression shown above provides the expected result even if the signs of now and epoch differ. the resolution of a printervaltime object is defined by the api. nspr guarantees that there will be at least 1000 ticks per second and not more than 100000. at the
maximum resolution of 10000 ticks per second, each tick represents 1/100000 of a second. at that rate, a 32-bit register will overflow in approximately 28 hours, making the
maximum useful interval approximately 6 hours. waiting on events more than half a day in the future must therefore be based on a calendar time. ...
NSS 3.22 release notes
sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
... sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
... set the nss_disable_gtests variable to 1 to disable building these tests. bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&p...
NSS 3.46 release notes
see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. bugs fixed in nss 3.46 bug 1572164 - don't unnecessarily free session in nsc_wrapkey bug 1574220 - improve controls after errors in tstcln, selfserv and vfyserv cmds bug 1550636 - upgrade sqlite in nss to a 2019 version bug 1572593 - reset ad...
... bug 1566601 - add wycheproof test vectors for aes-kw bug 1571316 - curve25519_32.c:280: undefined reference to `pr_assert' when building nss 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-uninitializ...
... bug 1564715 - read /proc/cpuinfo when at_hwcap2 returns 0 bug 1532194 - remove or fix -ddebug_$user from make builds bug 1565577 - visual studio's cl.exe -? ...
NSS 3.48 release notes
om prince distribution information the hg tag is nss_3_48_rtm. nss 3.48 requires nspr 4.24 or newer. nss 3.48 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_48_rtm/src/ other releases are available in nss releases. notable changes in nss 3.48 tls 1.3 is the default
maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. because using an iteration count higher than 1 with the legacy dbm (key3.db) storage creates files that are incompatible with previous versions of...
...n count higher than 1 with the legacy dbm (key3.db) storage creates files that are incompatible with previous versions of nss, applications that wish to enable it for key3.db are required to set environment variable nss_allow_legacy_dbm_iteration_count=1. applications may set environment variable nss_min_mp_pbe_iteration_count to request a higher iteration count than the library's default, or nss_
max_mp_pbe_iteration_count to request a lower iteration count for test environments. see bug 1562671 for details. certificate authority changes the following ca certificates were added: bug 1591178 - entrust root certification authority - g4 cert sha-256 fingerprint: db3517d1f6732a2d5ab97c533ec70779ee3270a62fb4ac4238372460e6f01e88 upcoming changes in nss 3.49 ...
... entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use
maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length >
max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendl...
nss tech note4
case ..... ...... ...
... }; static const secitem myoiditem = { (secitemtype) 0, (unsigned char *)myoid, sizeof(myoid) }; secitem myextvalue; mycertextdata data; secstat...
...now you can extract info from secitem fields of your extension data structure */ /* see "misc helper functions" below */ ....... /* free the secitem fields */ secitem_freeitem(&data.version, pr_false); secitem_freeitem(&data.streetaddress, pr_false); ...... ...
FC_FindObjects
pusobjectcount [out] pointer to location to receive the number of returned handles. ...
...pusobjectcount [out] pointer to location to receive the number of returned handles. ...
...pusobjectcount [out] pointer to location to receive the number of returned handles. ...
Introduction to the JavaScript shell
object specified by scope. countheap([start[, kind]]) added in spidermonkey 1.8 count the number of live gc things in the heap, or things reachable from start when it is given and is not null. kind is either 'all' (default) to count all things or one of 'object', 'double', 'string', 'function', 'qname', 'namespace', 'xml' to count only things of that kind. dumpheap([filename[, start[, tofind[,
maxdepth[, toignore]]]]]) added in spidermonkey 1.8 dump the graph of all existing objects (or a specific interesting subgraph) to a file. for more information, see the c/c++ version of this function, js_dumpheap. evalcx(string[, object]) evaluates the javascript code in string. if object is specified, the code is executed in that object, treating it as a sandbox. if string is empty and object is...
...s a new object with lazy standard classes. note: evalcx() is only useful for people doing deep internal work on the javascript engine, for testing evalinsandbox-like environments in the shell. gc() runs the garbage collector to free up memory. gcparam(name[, value]) added in spidermonkey 1.8 read or configure garbage collector parameters. the name must be one of the parameter keys (such as '
maxbytes', '
maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#464. if value is not specified, gcparam() returns the current value associated with gc parameter named name. if value is specified, it must be convertable to a positive uint32; gcparam() sets gc parameter name to value. for more information, se...
...this is a thin wrapper for js_dumpheap. gczeal(zeal) enable extra-frequent gc, to help find gc hazards. zeal is an integer. the meaning is the same as for the parameter to js_setgczeal. notes([function]) shows the source notes for the specified function. source notes contain information that map the bytecode to the source code, which is used when de...
JS_NewRuntime
initializes the javascript runtime. syntax jsruntime * js_newruntime(uint32_t
maxbytes, uint32_t
maxnurserybytes = js::defaultnurserybytes, jsruntime *parentruntime = nullptr); jsruntime * js_newruntime(uint32_t
maxbytes, jsusehelperthreads usehelperthreads, jsruntime *parentruntime = nullptr); // deprecated since jsapi 32 name type description
maxbytes uint32
maximum number of allocated bytes after which garbage collection is run.
maxnurserybytes uint32 nursery size in bytes.
maxnurserybytes is rounded down to a multiple of chunk size. added in spidermonkey 38 parentruntime jsruntime * the topmost parent or nullptr . added in spidermonkey 31 description js_newruntime initiali...
...multiple of chunk size. added in spidermonkey 38 parentruntime jsruntime * the topmost parent or nullptr . added in spidermonkey 31 description js_newruntime initializes the javascript runtime environment. call js_newruntime before making any other api calls except js_init. js_newruntime allocates memory for the jsruntime and initializes certain internal runtime structures.
maxbytes specifies the number of allocated bytes after which garbage collection is run. if parentruntime is specified, the resulting runtime shares significant amounts of read-only state (the self-hosting and initial atoms compartments). it is recommended to make use of this for every runtime in a process after the first one. the returned jsruntime can be used from the calling thread only. (the engi...
...null. ...
Gecko events
is supported: yes event_document_reload the document contents are being reloaded. is supported: yes event_document_load_stopped the loading of the document was inte...
... is supported: yes event_document_reload the document contents are being reloaded. is supported: yes event_document_load_stopped the loading of the document was interrupted. is supported: yes event_document_attributes_changed the document wide attri...
...ent_table_row_insert event_table_row_delete event_table_row_reorder event_table_column_description_changed a table's column description changed. event_table_column_header_changed a table's column header changed. event_table_column_insert event_table_column_delete event_table_column_reorder event_window_activate event_window_deactivate event_window_destroy event_window_
maximize event_window_minimize event_window_resize event_window_restore event_hyperlink_end_index_changed the ending index of this link within the containing string has changed. event_hyperlink_number_of_anchors_changed the number of anchors assoicated with this hyperlink object has changed. event_hyperlink_selected_link_changed the hyperlink selected state changed from selected to uns...
Index
nce this interface represents a hyperlink associated with a single substring of text or single non-text object. non-text objects can have either a single link or a collection of links such as when the non-text object is an image map. linked objects and anchors are implementation dependent. this interface is derived from iaccessibleaction. iaccessibleaction.nactions() is one greater than the
maximum value for the indices used with the methods of this interface. furthermore, the object that implements this interface has to be connected implicitly or explicitly with an object that implements iaccessibletext. startindex() and endindex() are indices with respect to the text exposed by iaccessibletext. this interface provides access to a single object which can have multiple actions. an examp...
...bility, interfaces, xpcom, xpcom api reference, xpcom interface reference a private interface to operate with tree accessible. 321 nsiaccessiblevalue accessibility, interfaces, interfaces:scriptable, needscontent, xpcom api reference, xpcom interface reference return a success condition of the value getting set. that is if the value is within the range of minimumvalue -
maximumvalue. 322 nsiaccessiblewin32object interfaces, interfaces:scriptable, xpcom, xpcom interface reference no summary! 323 nsialertsservice interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference by default a message is displayed in a small window that slides up from the bottom of the screen, holds there for a few seconds,...
...bar, xpcom, xpcom interface reference clients should provide their own implementation of this interface. depending on whether the controller is connected to an nsitaskbartabpreview or nsitaskbarwindowpreview, only certain methods and attributes need to be implemented. 999 nsitaskbarprogress sets the taskbar progress state and value for this window. the currentvalue and
maxvalue parameters are optional and should be supplied when state is one of state_normal, state_error or state_paused. 1000 nsitaskbartabpreview interfaces, interfaces:scriptable, taskbar, xpcom, xpcom interface reference tab preview support is disabled by default in gecko 1.9.2 1001 nsitaskbarwindowpreview interfaces, interfaces:scriptable, taskbar, xpcom, xpcom ...
IAccessibleHyperlink
refox 3) this interface represents a hyperlink associated with a single substring of text or single non-text object. non-text objects can have either a single link or a collection of links such as when the non-text object is an image map. linked objects and anchors are implementation dependent. this interface is derived from iaccessibleaction. iaccessibleaction.nactions() is one greater than the
maximum value for the indices used with the methods of this interface. furthermore, the object that implements this interface has to be connected implicitly or explicitly with an object that implements iaccessibletext. startindex() and endindex() are indices with respect to the text exposed by iaccessibletext. this interface provides access to a single object which can have multiple actions. an examp...
...ropget] hresult valid([out] boolean valid ); methods anchor() returns an object that represents the link anchor, as appropriate for the link at the specified index. [propget] hresult anchor( [in] long index, [out] variant anchor ); parameters index a 0 based index identifies the anchor when, as in the case of an image map, there is more than one link represented by this object. the valid
maximal index is indicated by iaccessibleaction.nactions(). anchor this is an implementation dependent value. for example, for a text link this method could return the substring of the containing string where the substring is overridden with link behavior, and for an image link this method could return an iunknown variant for iaccessibleimage. see the section about. return value e_invalidarg if bad ...
...eturn, [out] value is null. s_ok. anchortarget() returns an object representing the target of the link, as appropriate for the link at the specified index. [propget] hresult anchortarget( [in] long index, [out] variant anchortarget ); parameters index a 0 based index identifies the anchor when, as in the case of an image map, there is more than one link represented by this object. the valid
maximal index is indicated by iaccessibleaction.nactions(). anchortarget this is an implementation dependent value. for example this method could return a bstr variant of the uri. alternatively this method could return an iunknown variant of a com interface representing a target object to be activated when the link is activated. see the section about. return value e_invalidarg if bad [in] passed, [o...
IAccessibleValue
s from: iunknown last changed in gecko 1.9 (firefox 3) the iaccessiblevalue interface represents a single numerical value and should be implemented by any class that supports numerical value like progress bars and spin boxes. this interface lets you access the value and its upper and lower bounds. method overview [propget] hresult currentvalue([out] variant currentvalue ); [propget] hresult
maximumvalue([out] variant
maximumvalue ); [propget] hresult minimumvalue([out] variant minimumvalue ); hresult setcurrentvalue([in] variant value ); methods currentvalue() returns the value of this object as a number. the exact return type is implementation dependent. typical types are long and double. [propget] hresult currentvalue( [out] variant currentvalue ); parameters currentvalue r...
...thods currentvalue() returns the value of this object as a number. the exact return type is implementation dependent. typical types are long and double. [propget] hresult currentvalue( [out] variant currentvalue ); parameters currentvalue returns the current value represented by this object. see the section about. return value s_false if there is nothing to return, [out] value is null. s_ok.
maximumvalue() returns the
maximal value that can be represented by this object. the type of the returned value is implementation dependent. it does not have to be the same type as that returned by method currentvalue(). [propget] hresult
maximumvalue( [out] variant
maximumvalue ); parameters
maximumvalue returns the
maximal value in an implementation dependent type. if this object has no upper b...
...ut] variant minimumvalue ); parameters minimumvalue returns the minimal value in an implementation dependent type. if this object has no lower bound then an empty object is returned. see the section about. return value s_ok. setcurrentvalue() sets the value of this object to the given number. the argument is clipped to the valid interval whose upper and lower bounds are returned by the methods
maximumvalue() and minimumvalue(), that is if it is lower than the minimum value the new value will be the minimum and if it is greater than the
maximum then the new value will be the
maximum. hresult setcurrentvalue( [in] variant value ); parameters value the new value represented by this object. the set of admissible types for this argument is implementation dependent. return value s_ok. ...
nsIAccessibleEvent
to exit drag-and-drop mode. event_dialog_start 0x0024 0x0021 a dialog box has been displayed. event_dialog_end 0x0025 0x0022 a dialog box has been closed. event_scrolling_start 0x0026 0x0023 scrolling has started on a scroll bar. event_scrolling_end 0x0027 0x0024 scrolling has ended on a scroll bar. event_minimize_start 0x0028 0x0025 a window object is about to be minimized or
maximized. event_minimize_end 0x0029 0x0026 a window object has been minimized or
maximized. event_document_load_complete 0x002b 0x0027 the loading of the document has completed. event_document_reload 0x002c 0x0028 the document contents are being reloaded. event_document_load_stopped 0x002d 0x0029 the loading of the document was interrupted. event_document_attributes_changed 0x002...
...t_table_column_header_changed 0x0045 0x0041 a table's column header changed. event_table_column_insert 0x0046 0x0042 event_table_column_delete 0x0047 0x0043 event_table_column_reorder 0x0048 0x0044 event_window_activate 0x0049 0x0045 event_window_create 0x004a 0x0046 event_window_deactivate 0x004b 0x0047 event_window_destroy 0x004c 0x0048 event_window_
maximize 0x004d 0x0049 event_window_minimize 0x004e 0x004a event_window_resize 0x004f 0x004b event_window_restore 0x0050 0x004c event_hyperlink_end_index_changed 0x0051 0x004d the ending index of this link within the containing string has changed. event_hyperlink_number_of_anchors_changed 0x0052 0x004e the number of anchors associated with this hyperlink object has chang...
... event_dom_destroy 0x0002 an object has been destroyed. event_dom_significant_change 0x0003 an object's properties or content have changed significantly so that the type of object has really changed, ...
nsIDOMWindowUtils
firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window. ...
...rom unprivileged context (not content-accessible) will throw a dom security error if called without universalxpconnect privileges. void activatenativemenuitemat( in astring indexstring ); parameters indexstring clearmozafterpaintevents() void clearmozafterpaintevents(); parameters none. ...
...ameters none. comparecanvases() compare the two canvases, returning the number of differing pixels and the
maximum difference in a channel. this will throw an error if the dimensions of the two canvases are different. this method requires universalxpconnect privileges. pruint32 comparecanvases( in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long a
maxdifference ); parameters acanvas1 acanvas2 a
maxdifference return value computeanimationdistance() method for testing nsstyleanimation::computedistance. returns the distance between the two values as reported by nsstyleanimation::computedistance for the given element and property. double computeanimationdistance( in nsidomelement element, in astring property, in astrin...
nsIOutputStream
stream. note: though this method is scriptable, javascript code must only pass an ascii character string as the abuf parameter. c++ code may however pass any arbitrary binary data, including data with embedded null bytes. unsigned long write( in string abuf, in unsigned long acount ); parameters abuf the buffer containing the data to be written. acount the size of the buffer, or the
maximum number of bytes to copy from the buffer. return value this method returns the number of bytes copied from the buffer (may be less than acount). 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. a nsioutputstream is n...
...a from the input stream into its internal buffer (if any). if this method was provided as an external facility, a separate char* buffer would need to be used in order to call the output stream's other write() method. unsigned long writefrom( in nsiinputstream afromstream, in unsigned long acount ); parameters afromstream an nsiinputstream containing the data to be written. acount the
maximum number of bytes to write to the stream. return value this method returns the number of bytes written to the stream (may be less than acount). exceptions thrown ns_base_stream_would_block indicates that writing to the output stream would block the calling thread for an indeterminate amount of time. this exception may only be thrown if isnonblocking() returns true. ns_error_not_impleme...
...but in general it is not. this method serves as an optimization. unsigned long writesegments( in nsreadsegmentfun areader, in voidptr aclosure, in unsigned long acount ); parameters areader a callback function that may be called multiple times. see nsreadsegmentfun for more details on this function. aclosure a parameter that is passed to areader each time it is called. acount the
maximum number of bytes to write to the stream. return value this method returns the number of bytes written to the stream (may be less than acount). exceptions thrown ns_base_stream_would_block indicates that writing to the output stream would block the calling thread for an indeterminate amount of time. this exception may only be thrown if isnonblocking() returns true. ns_error_not_impleme...
nsITaskbarProgress
play a progress notification in the taskbar. this class wraps around the native functionality to do this. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void setprogressstate(in nstaskbarprogressstate state, in unsigned long long currentvalue optional, in unsigned long long
maxvalue optional); constants constant value description state_no_progress 0 stop displaying progress on the taskbar button. this should be used when the operation is complete or canceled. state_indeterminate 1 display a cycling, indeterminate progress bar. state_normal 2 display a determinate, normal progress bar. state_error 3 display a determinate, error progress bar. state_paused ...
...led. state_indeterminate 1 display a cycling, indeterminate progress bar. state_normal 2 display a determinate, normal progress bar. state_error 3 display a determinate, error progress bar. state_paused 4 display a determinate progress bar indicating that the operation has paused. methods setprogressstate() sets the taskbar progress state and value for this window. the currentvalue and
maxvalue parameters are optional and should be supplied when state is one of state_normal, state_error or state_paused. void setprogressstate( in nstaskbarprogressstate state, in unsigned long long currentvalue, optional in unsigned long long
maxvalue optional ); parameters state one of the state constants. currentvalue the current progress value.
maxvalue the
maximum progress value. excepti...
...one of state_normal, state_error or state_paused. void setprogressstate( in nstaskbarprogressstate state, in unsigned long long currentvalue, optional in unsigned long long
maxvalue optional ); parameters state one of the state constants. currentvalue the current progress value.
maxvalue the
maximum progress value. exceptions thrown ns_error_illegal_value if currentvalue is greater than
maxvalue. ns_error_invalid_arg if state is state_no_progress or state_indeterminate, and either currentvalue or
maxvalue is not 0. see also nsiwintaskbar windows 7 taskbar apis ...
nsIWebProgressListener2
an extended version of nsiwebprogresslistener. uriloader/base/nsiwebprogresslistener2.idlscriptable please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsiwebprogresslistener method overview void onprogresschange64(in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long a
maxselfprogress, in long long acurtotalprogress, in long long a
maxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onsta...
...h astateflags including the state_stop and state_is_window flags). this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values. note: if any progress value is unknown, then its value is replaced with -1. void onprogresschange64( in nsiwebprogress awebprogress, in nsirequest arequest, in long long acurselfprogress, in long long a
maxselfprogress, in long long acurtotalprogress, in long long a
maxtotalprogress ); parameters awebprogress the nsiwebprogress instance that fired the notification. arequest the nsirequest that has new progress. acurselfprogress the current progress for arequest. a
maxselfprogress the
maximum progress for arequest. acurtotalprogress the current progress for all requests associated with awebprogre...
... onrefreshattempted() notification that a refresh or redirect has been requested in awebprogress. for example, via a <meta http-equiv="refresh"> or an http refresh: header. ...
Using the Multiple Accounts API
preference: mail.server.server.empty_trash_on_exit boolean, (should not be imap-specific) - should we empty this server's trash when we quit? preference: mail.server.server.offline_download - boolean, is this server marked for offline download? preference: mail.server.server.override_namespaces - boolean, should we override namespaces on this server? ...
...pty_trash_on_exit boolean, (should not be imap-specific) - should we empty this server's trash when we quit? preference: mail.server.server.offline_download - boolean, is this server marked for offline download? preference: mail.server.server.override_namespaces - boolean, should we override namespaces on this server? ...
...offline_download - boolean, is this server marked for offline download? preference: mail.server.server.override_namespaces - boolean, should we override namespaces on this server? ...
Plug-in Basics - Plugins
e entry for the function in the reference section describes the difference. plug-ins and platform independence a plug-in is a dynamic code module that is native to the specific platform on which the browser is running. it is a code library, rather than an application or an applet, and runs only from the browser. although plug-ins are platform-specific, the plug-in api is designed to provide the
maximum degree of flexibility and to be functionally consistent across all platforms. this guide notes platform-specific differences in coding for the ms windows, mac os x, and unix platforms. you can use the plug-in api to write plug-ins that are media type driven and provide high performance by taking advantage of native code. plug-ins give you an opportunity to seamlessly integrate platform-depen...
...using the class attribute and the css block above, you can simulate the behavior of the hidden plug-in in the embed element: <object data="audiplay.aiff" type="audio/x-aiff" class="hiddenobject"></object> a full-page pl...
...using the class attribute and the css block above, you can simulate the behavior of the hidden plug-in in the embed element: <object data="audiplay.aiff" type="audio/x-aiff" class="hiddenobject"></object> a full-page plug-in is a visible plug-in that is ...
Network request details - Firefox Developer Tools
through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate,
max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "da...
... "name": "p3p", "value": "cp=\"this is not a p3p policy! ...
...ork request down into the following subset of the stages defined in the http archive specification: name description blocked time spent in a queue waiting for a network connection. the browser imposes a limit on the number of simultaneous connections that can be made to a single server. in firefox this defaults to 6, but can be changed using the network.http.
max-persistent-connections-per-server preference. if all connections are in use, the browser can't download more resources until a connection is released. dns resolution time taken to resolve a host name. connecting time taken to create a tcp connection. sending time taken to send the http request to the server. waiting waiting for a response from t...
AudioContextOptions.latencyHint - Web APIs
there are two ways this value can be specified. ...
...there are two ways this value can be specified. the best way to specify the preferred latency is to use a value form the string enum audiocontextlatencycategory. ...
... ways this value can be specified. the best way to specify the preferred latency is to use a value form the string enum audiocontextlatencycategory. in fact, the default value of latencyhint is "interactive" (meaning the browser should try to use the lowest possible and reliable latency it can). the value can also be specified as a double-precision floating-point value, specifying the preferred
maximum latency in seconds. this provides more precise control over the balance between audio latency and device energy usage. to determine the actual latency of the context after creating it, check the value of the context's baselatency property. specifications specification status comment web audio apithe definition of 'audiocontextoptions.latencyhint' in that specificati...
AudioContextOptions - Web APIs
s used to specify configuration options when constructing a new audiocontext object to represent a graph of web audio nodes. it is only used when calling the audiocontext() constructor. properties latencyhint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred
maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate ...
...true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate for the context's output device is used by default. constants standard values for latencyhint the latencyhint property can be number specifying a preferred
maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value. "interactive" the audio is involved in interactive elements, such as resp...
...io is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latency that will
maximize playback time by minimizing power consumption at the expense of latency. useful for non-interactive playback, such as playing music. example this example instantiates an audio context for music playback (optimized for power consumption over latency), with the sample rate 48,000 hz. let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specificatio...
BaseAudioContext.createDelay() - Web APIs
must be less than 180 seconds, and defaults to 1 second if not specified. returns a delaynode. the default delaynode.delaytime is 0 seconds. ...
...must be less than 180 seconds, and defaults to 1 second if not specified. returns a delaynode. the default delaynode.delaytime is 0 seconds. ...
...must be less than 180 seconds, and defaults to 1 second if not specified. returns a delaynode. the default delaynode.delaytime is 0 seconds. ...
CanvasRenderingContext2D.strokeText() - Web APIs
the canvasrenderingcontext2d method stroketext(), part of the canvas 2d api, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. an optional parameter allows specifying a
maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. use the filltext() method to fill the text characters rather than having just their outlines drawn. syntax canvasrenderingcontext2d.stroketext(text, x, y [,
maxwidth]); parameters text a domstring specifying the text string to render into the context. the text is rendered using the setting...
...if not specified, there is no limit to the width of the text. ...
...if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. ...
Applying styles and colors - Web APIs
with each other, this point is not far from the inside connection point. however, as the angles between each line decreases, the distance (miter length) between these points increases exponentially. the miterlimit property determines how far the outside connection point can be placed from the inside connection point. if two lines exceed this value, a bevel join gets drawn instead. note that the
maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges. more exactly, the miter limit is the m...
...ne transforms of paths: it only influences the effectively rendered shape of line edges. more exactly, the miter limit is the
maximum allowed ratio of the extension length (in the html canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. it can equivalently be defined as the
maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. ...
... a miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles. ...
Detecting device orientation - Web APIs
border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var
maxx = garden.clientwidth - ball.clientwidth; var
maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-180,180] var y = event.gamma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down ...
... warning: chrome and firefox do not handle the angles the same way, so on some axes the direction are reversed. processing ...
... warning: chrome and firefox do not handle the angles the same way, so on some axes the direction are reversed. processing motion events motion events are handled the s...
DeviceProximityEvent - Web APIs
the deviceproximityevent interface provides information about the distance of a nearby physical object using the proximity sensor of a device. properties deviceproximityevent.
max read only the
maximum sensing distance the sensor is able to report, in centimeters. deviceproximityevent.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. ...
...e
maximum sensing distance the sensor is able to report, in centimeters. deviceproximityevent.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. deviceproximityevent.value read only the current device proximity, in centimeters. ...
...ng distance the sensor is able to report, in centimeters. deviceproximityevent.min read only the minimum sensing distance the sensor is able to report, in centimeters. ususally zero. deviceproximityevent.value read only the current device proximity, in centimeters. examples window.addeventlistener('deviceproximity', function(event) { console.log("value: " + event.value, "
max: " + event.
max, "min: " + event.min); }); ...
DoubleRange - Web APIs
if no match can be found that is within the given range, an error will occur. ...
...if no match can be found that is within the given range, an error will occur. ...
...if no match can be found that is within the given range, an error will occur. specifications specification status comment media capture and streamsthe definition of 'doublerange' in that specification. ...
Geolocation.getCurrentPosition() - Web APIs
device. syntax navigator.geolocation.getcurrentposition(success[, error[, [options]]) parameters success a callback function that takes a geolocationposition object as its sole input parameter. error optional an optional callback function that takes a geolocationpositionerror object as its sole input parameter. options optional an optional positionoptions object. ...
...tposition(success[, error[, [options]]) parameters success a callback function that takes a geolocationposition object as its sole input parameter. error optional an optional callback function that takes a geolocationpositionerror object as its sole input parameter. options optional an optional positionoptions object. options includes:
maximumage: integer (milliseconds) | infinity -
maximum cached position age. ...
...put parameter. options optional an optional positionoptions object. options includes:
maximumage: integer (milliseconds) | infinity -
maximum cached position age. timeout: integer (milliseconds) - amount of time before the error callback is invoked, if 0 it will never invoke. ...
Using the Geolocation API - Web APIs
urrentposition() method. this initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. when the position is determined, the defined callback function is executed. you can optionally provide a second callback function to be executed if an error occurs. a third, optional, parameter is an options object where you can set the
maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position. note: by default, getcurrentposition() tries to answer as fast as possible with a low accuracy result. it is useful if you need a quick answer regardless of the accuracy. devices with a gps, for example, can take a minute or more to get a gps fix, so less accurate data (ip location ...
...ed position watcher; you use this value in tandem with the clearwatch() method to stop watching the user's location. navigator.geolocation.clearwatch(watchid); fine tuning the response both getcurrentposition() and watchposition() accept a success callback, an optional error callback, and an optional positionoptions object. this object allows you to specify whether to enable high accuracy, a
maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the browser will request fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out. a call to watchposition could look like: function success(position) { dosomething(posit...
...t fresh position data), and a timeout value that dictates how long the browser should attempt to get the position data for, before it times out. a call to watchposition could look like: function success(position) { dosomething(position.coords.latitude, position.coords.longitude); } function error() { alert('sorry, no position available.'); } const options = { enablehighaccuracy: true,
maximumage: 30000, timeout: 27000 }; const watchid = navigator.geolocation.watchposition(success, error, options); describing a position the user's location is described using a geolocationposition object instance, which itself contains a geolocationcoordinates object instance. the geolocationposition instance contains only two things, a coords property that contains the geolocationcoordinates ...
Browser storage limits and eviction criteria - Web APIs
king around in your profile at the data stored, you might see a fourth folder: persistent. basically, the persistent folder was renamed to permanent a while ago to keep upgrades/migration simpler. note: users shouldn’t add their own directories or files under <profile>/storage. this will cause storage initialization to fail; for example, open() will fire an error event. storage limits the
maximum browser storage space is dynamic — it is based on your hard drive size. the global limit is calculated as 50% of free disk space. in firefox, an internal browser tool called the quota manager keeps track of how much disk space each origin is using up, and deletes data if necessary. so if your hard drive is 500 gb, then the total storage for a browser is 250 gb. if this is exceeded, a proce...
...eviction comes into play, deleting an entire origin's worth of data until the storage amount goes under the limit again. there is no trimming effect put in place to delete parts of origins — deleting one database of an origin could cause problems with inconsistency. there's also another limit called group limit — this is defined as 20% of the global limit, but it has a minimum of 10 mb and a
maximum of 2 gb. each origin is part of a group (group of origins). there's one group for each etld+1 domain. for example: mozilla.org — group1, origin1 www.mozilla.org — group1, origin2 joe.blogs.mozilla.org — group1, origin3 firefox.com — group2, origin4 in this group, mozilla.org, www.mozilla.org, and joe.blogs.mozilla.org can aggregately use a
maximum of 20% of the global limit. f...
...is part of a group (group of origins). there's one group for each etld+1 domain. for example: mozilla.org — group1, origin1 www.mozilla.org — group1, origin2 joe.blogs.mozilla.org — group1, origin3 firefox.com — group2, origin4 in this group, mozilla.org, www.mozilla.org, and joe.blogs.mozilla.org can aggregately use a
maximum of 20% of the global limit. firefox.com has a separate
maximum of 20%. the two limits react differently to limits being reached: the group limit is also called the "hard limit": it doesn't trigger origin eviction. the global limit is a "soft limit" since there's a chance that some space will be freed and the operation can continue. note: the group limit can't be more than the global limit, despite the minimum group limit mentioned above. if you h...
MediaSettingsRange - Web APIs
mediasettingsrange.min returns the minimum value of this setting. ...
... mediasettingsrange.min returns the minimum value of this setting. ...
...adevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.
max = photocapabilities.imagewidth.
max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status comment mediastream image capturethe definition of 'mediasettingsrange' in ...
PannerNode.PannerNode() - Web APIs
pannernode.orientationx you want the pannernode to have (the default is 1.) orientationy: the pannernode.orientationy you want the pannernode to have (the default is 0.) orientationz: the pannernode.orientationz you want the pannernode to have (the default is 0.) refdistance: the pannernode.refdistance you want the pannernode to have. the default is 1, and negative values are not allowed.
maxdistance: the pannernode.
maxdistance you want the pannernode to have. the default is 10000, and non-positive values are not allowed. rollofffactor: the pannernode.rollofffactor you want the pannernode to have. the default is 1, and negative values are not allowed. coneinnerangle: the pannernode.coneinnerangle you want the pannernode to have (the default is 360.) coneouterangle: the pannernod...
...erangle you want the pannernode to have (the default is 360.) coneouterangle: the pannernode.coneouterangle you want the pannernode to have (the default is 360.) coneoutergain: the pannernode.coneoutergain you want the pannernode to have. the default is 0, and its value can be in the range 0–1. return value a new pannernode object instance. ...
... the range 0–1. return value a new pannernode object instance. exceptions rangeerror the refdistance,
maxdistance, or rollofffactor properties have been given a value that is outside the accepted range. invalidstateerror the coneoutergain property has been given a value outside the accepted range (0–1). example var ctx = new audiocontext(); var options = { positionx : 1,
maxdistance: 5000 } var mypanner = new pannernode(ctx, options); specifications specification status comment web audio apithe definition of 'pannernode()' in that specification. working draft ...
PannerNode - Web APIs
ts movement using a velocity vector and its directionality using a directionality cone. a pannernode always has exactly one input and one output: the input can be mono or stereo but the output is always stereo (2 channels); you can't have panning effects without at least two audio channels! 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. properties inherits properties from its parent, audionode. the orientation and position value are set and retrieved using different syntaxes, since they're stored as audioparam values. retrieval is done by accessing, for example, pa...
...of volume reduction outside the cone defined by the coneouterangle attribute. its default value is 0, meaning that no sound can be heard. pannernode.distancemodel an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener. possible values are "linear", "inverse" and "exponential". the default value is "inverse". pannernode.
maxdistance a double value representing the
maximum distance between the audio source and the listener, after which the volume is not reduced any further. pannernode.orientationx represents the horizontal position of the audio source's vector in a right-hand cartesian coordinate system. while this audioparam cannot be directly changed, its value can be altered using its value property. the default...
...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.panningmodel = 'hrtf'; panner.distancemodel = '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, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener =...
RTCDtlsTransport - Web APIs
de them entirely), the rtcconfiguration property bundlepolicy may be provided when creating the connection. the bundlepolicy lets you control how to negotiate with these legacy endpoints. the default policy is "balanced", which provides a balance between performance and compatibility. for example, to create the connection using the highest level of bundling: const rtcconfig = { bundlepolicy: "
max-bundle" }; const pc = new rtcpeerconnection(rtcconfig); bundling lets you use one rtcdtlstransport to carry the data for multiple higher-level transports, such as multiple rtcrtptransceivers. when not using bundle when the connection is created without using bundle, each rtp or rtcp component of each rtcrtptransceiver has its own rtcdtlstransport; that is, every rtcrtpsender and rtcrtpreceiv...
...undle, each rtp or rtcp component of each rtcrtptransceiver has its own rtcdtlstransport; that is, every rtcrtpsender and rtcrtpreceiver, has its own transport, and all rtcdatachannel objects share a transport dedicated to sctp. when using bundle when the connection is using bundle, each rtcdtlstransport object represents a group of rtcrtptransceiver objects. 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). thus, a connection that has any number of audio and video channels will always have exactly one dtls transport for audio and one for video communications. because transports are established early in the negotiation process, it's likely that it won't be know...
... looking at the rtcsctptransport object's transport property. examples this example presents a function, tallysenders(), which iterates over an rtcpeerconnection's rtcrtpsenders, tallying up how many of them are in various states. the function returns an object containing properties whose values indicate how many of the senders are in each state. let pc = new rtcpeerconnection({ bundlepolicy: "
max-bundle" }); /* ... */ function tallysenders(pc) { let results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) { results.transportmissing++; } else { switch(transport.state) { ...
ResizeObserver.observe() - Web APIs
l the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. ...
...d border-box. return value void. exceptions none. ...
...from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.
max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.
max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); an observe() call with an options object would look like so: resizeobserver.observe(divelem, { box : 'border-box' }); specifications specification status comment resize observerthe definition of 'obser...
ResizeObserver.unobserve() - Web APIs
void unobserve(target); parameters target a reference to an element or svgelement to be unobserved. return value void. exceptions none. ...
...to be unobserved. return value void. exceptions none. ...
...from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.
max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.
max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment ...
ResizeObserverEntry.contentRect - Web APIs
r-text.html (see source) example. this uses a simple feature detection test to see if the browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses contentrect. ...
... browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses contentrect. ...
...t the sizing data it needs. if not, it uses contentrect. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.
max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.
max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'contentrect' in that specification. editor's draft initial definition. ...
ResizeObserverEntry - Web APIs
er-text.html (see source) example. this uses a simple feature detection test to see if the browser supports the newer contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses the older contentrect property. ...
...e browser supports the newer contentboxsize property — if so, it uses that to get the sizing data it needs. if not, it uses the older contentrect property. ...
...t needs. if not, it uses the older contentrect property. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.
max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.
max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.
max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status comment resize observerthe definition of 'resizeobserverentry' in that specification. editor's draft initial definition. ...
ULongRange - Web APIs
if no match can be found that is within the given range, an error will occur. ...
...if no match can be found that is within the given range, an error will occur. ...
...if no match can be found that is within the given range, an error will occur. ...
Privileged features - Web APIs
ithout any of the browser's interface elements. there will be no context menu defined by default and none of the standard keyboard shortcuts will work. the page is supposed to provide a user interface of its own, usually this feature is used to open xul documents (standard dialogs like the javascript console are opened this way). dialog the dialog feature removes all icons (restore, minimize,
maximize) from the window's titlebar, leaving only the close button. mozilla 1.2+ and netscape 7.1 will render the other menu system commands (in ff 1.0 and in ns 7.0x, the command system menu is not identified with the firefox/ns 7.0x icon on the left end of the titlebar: that's probably a bug. you can access the command system menu with a right-click on the titlebar). dialog windows are windows whi...
... the close button. mozilla 1.2+ and netscape 7.1 will render the other menu system commands (in ff 1.0 and in ns 7.0x, the command system menu is not identified with the firefox/ns 7.0x icon on the left end of the titlebar: that's probably a bug. you can access the command system menu with a right-click on the titlebar). dialog windows are windows which have no minimize system command icon and no
maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. they are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. on mac systems, dialog windows have a different window border and they may get turned into a sheet. modal if on, the new window is said to be modal. the user cannot retu...
...f whether it is active or not. alwayslowered if on, the new created window floats below, under its own parent when the parent window is not minimized. alwayslowered windows are often referred as pop-under windows. the alwayslowered window can not be on top of the parent but the parent window can be minimized. in ns 6.x, the alwayslowered window has no minimize system command icon and no restore/
maximize system command. alwaysontop if on, the new window will always be displayed on top of all other windows (browser windows and otherwise), regardless of whether it is active or not. this was added in firefox 66 (see bug 1519893). z-lock same as alwayslowered. close when set to no or 0, this feature removes the system close command icon and system close menu item. it will only work for dia...
Window.open() - Web APIs
is non-empty and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. an offset is universally implemented by browser manufacturers (it is 29 pixels in ie6 sp2 with the default theme) and its purpose is to help users to notice new windows opening. if the most recently used window was
maximized, then there is no offset: the new window will be
maximized as well. size if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. width or innerwidth specifies the width of the content area, viewing area of the new secondary window in pixels. the width value includes the width of the vertical scrollbar if present. the width va...
...ould be lost. more on the window.close() method how can i bring back the window if it is minimized or behind another window? first check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the focus() method. there is no other reliable way. you can examine an example explaining how to use the focus() method. how do i force a
maximized window? you cannot. all browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users. how do i turn off window resizability or remove toolbars? you cannot force this. users with mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and too...
... of the link or by coding the cursor accordingly. the purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (back toolbar button is disabled). "users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are
maximized to fill up the screen. so a user who tries to return to the origin will be confused by a grayed out back button." quote from the top ten new mistakes of web design: 2. opening new browser windows, jakob nielsen, may 1999 when extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the chan...
Using the aria-valuemin attribute - Accessibility
the aria-valuemin attribute is used to define the minimum value allowed for a range widget such as a slider, spinbutton or progressbar. if the aria-valuenow has a known
maximum and minimum, the author should provide properties for aria-value
max and aria-valuemin.the value of aria-valuemin must be less than or equal to the value of aria-value
max. aria-valuemin is a required attribute of role slider, scrollbar and spinbutton. value string representation of a number possible effects on user agents and assistive technology if aria-valuemin is not less than or equal to the value of aria-value
max, this creates an error condition that will be handled by the assistive technology. note: opinions may differ on how assistive technology should handle this technique. the information provide...
...tes an error condition that will be handled by the assistive technology. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a minimum value of 1. ...
...pinions and therefore not normative. examples example 1: the snippet below shows a simple slider with a minimum value of 1. ...
ARIA - Accessibility
l element over using aria, if such an element exists. for instance, native elements have built-in keyboard accessibility, roles and states. however, if you choose to use aria, you are responsible for mimicking (the equivalent) browser behaviour in script. here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-value
max="100"> </div> this progress bar is built using a <div>, which has no meaning. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress b...
... using a <div>, which has no meaning. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribute informs the browser that this element is actually a javascript-powered progress bar widget. the aria-valuemin and aria-value
max attributes specify the minimum and
maximum values for the progress bar, and the aria-valuenow describes the current state of it and therefore must be kept updated with javascript. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = documen...
...ement and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-value
max", 100); // create a function that can be called at any time to update // the value of the progress bar. function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } note that aria was invented after html4, so does not validate in html4 or its xhtml variants. however, the accessibility gains it provides far outweigh any technical invalidity. in htm...
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
the -moz-device-pixel-ratio gecko-only css media feature can be used to apply styles based on the number of device pixels per css pixel. do not use this feature. use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. ...
...-only css media feature can be used to apply styles based on the number of device pixels per css pixel. do not use this feature. use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. ...
.... use the resolution feature with the dppx unit instead. note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. the min and
max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and
max--moz-device-pixel-ratio; but the same prefixes as implemented by webkit are named -webkit-min-device-pixel-ratio and -webkit-
max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. media: media/visual accepts min/
max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx. example: @media (-webkit...
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. people have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. therefore, to make
maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do. unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting. this limitation is solved by adding new css properties to extend the traditional block layout mode. using columns column count and width two...
... reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #columns_12 { columns: 12 8em; } result height balancing the css3 column specification requires that the column heights must be balanced: that is, the browser automatically sets the
maximum column height so that the heights of the content in each column are approximately equal. firefox does this. however, in some situations it is also useful to set the
maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. therefore, if the height is constrained, by setting the...
...this mode is also much more efficient for layout. column gaps there is a gap between columns. ...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
for example, i may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then i would like the row to stretch to that height. grid has a so...
...t grid or defining the sizing for automatically created rows or columns we may want to give tracks a minimum size, but also ensure they expand to fit any content that is added. for example, i may want my rows to never collapse smaller than 100 pixels, but if my content stretches to 300 pixels in height, then i would like the row to stretch to that height. grid has a solution for this with the min
max() function. in this next example i am using min
max() in the value of grid-auto-rows. this means automatically created rows will be a minimum of 100 pixels tall, and a
maximum of auto. using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-a...
...in this next example i am using min
max() in the value of grid-auto-rows. this means automatically created rows will be a minimum of 100 pixels tall, and a
maximum of auto. using auto means that the size will look at the content size and will stretch to give space for the tallest item in a cell, in this row. ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. a -moz-animation [prefixed version still accepted] -moz-animation-delay [prefixed version still accepted] -moz-animation-d...
...enuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-
maximized -moz-window-button-close -moz-window-button-
maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-
maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer resizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left s...
...nformal -moz-tamil -moz-telugu -moz-thai -moz-trad-chinese-formal -moz-trad-chinese-informal -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-center -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and
max-width -moz-min-content -moz-fit-content -moz-
max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-f...
grid-template - CSS: Cascading Style Sheets
e lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ...
...s'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | min
max( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>? ...
...ck-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | min
max( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>? ...
text-justify - CSS: Cascading Style Sheets
-character; this value is kept for backwards compatibility. formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare
maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="auto"><code>text-justify: auto</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare
maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, c...
...ext-justify: auto</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare
maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="dist"><code>text-justify: distribute</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare
maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="word"><code>text-justify: inter-word</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare
maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvi...
...duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. ...
HTML attribute reference - HTML: Hypertext Markup Language
t to the user. loop <audio>, <bgsound>, <marquee>, <video> indicates whether the media should start playing from the start when it's finished. low <meter> indicates the upper bound of the lower range. manifest <html> specifies the url of the document's cache manifest. note: this attribute is obsolete, use <link rel="manifest"> instead.
max <input>, <meter>, <progress> indicates the
maximum value allowed.
maxlength <input>, <textarea> defines the
maximum number of characters allowed in the element. minlength <input>, <textarea> defines the minimum number of characters allowed in the element. media <a>, <area>, <link>, <source>, <style> specifies a hint of the media for which the lin...
...tes have two faces: the content attribute and the idl (interface definition language) attribute. the content attribute is the attribute as you set it from the content (the html code) and you can set it or get it via element.setattribute() or element.getattribute(). the content attribute is always a string even when the expected value should be an integer. for example, to set an <input> element's
maxlength to 42 using the content attribute, you have to call setattribute("
maxlength", "42") on that element. the idl attribute is also known as a javascript property. these are the attributes you can read or set using javascript properties like element.foo. the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going...
...eturn their values as they are really used. for example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". however, the type idl attribute will return the string "text". idl attributes are not always strings; for example, input.
maxlength is a number (a signed long). when using idl attributes, you read or set values of the desired type, so input.
maxlength is always going to return a number and when you set input.
maxlength, it wants a number. if you pass another type, it is automatically converted to a number as specified by the standard javascript rules for type conversion. idl attributes can reflect other types such as uns...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
ity to use based on the contents of the <bdi>. examples no <bdi> with only ltr this example lists the winners of a competition using <span> elements only. when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text. in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionali...
......
...tl text this example lists the winners of a competition using <bdi> elements. these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6;
max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification. living standard html5the definition of '<bdi>' in that specification. recommendation ...
<img>: The Image Embed element - HTML: Hypertext Markup Language
is is unsafe because it can leak information from tls-protected resources to insecure origins. sizes one or more strings separated by commas, indicating a set of source sizes. each source size consists of: a media condition. this must be omitted for the last item in the list. a source size value. media conditions describe properties of the viewport, not of the image. for example, (
max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 500px. source size values specify the intended display size of the image. user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. the selected source size affects the intrinsic size of the ...
...s a 1x candidate in user agents that support srcset. <img src="https://udn.realityripple.com/samples/61/869e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd7824ce30c9587f0d8548b946ee9fb1293d2eccdb6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included. ...
... security and privacy concerns although <img> elements have innocent uses, they can have undesirable consequences for user security and privacy. ...
HTTP caching - HTTP
with http authentication, or response status codes that aren't normally cacheable, should now be cached. on the other hand, "private" indicates that the response is intended for a single user only and must not be stored by a shared cache. a private browser cache may store the response in this case. cache-control: private cache-control: public expiration the most important directive here is "
max-age=<seconds>" which is the
maximum amount of time a resource will be considered fresh. contrary to expires, this directive is relative to the time of the request. for the files in the application that will not change, you can usually add aggressive caching. this includes static files such as images, css files and javascript files, for example. for more details, see also the freshness section be...
...for more details, see the validation section below. ...
...ves a request for a stale resource, it forwards this request with a if-none-match to check if it is in fact still fresh. if so, the server returns a 304 (not modified) header without sending the body of the requested resource, saving some bandwidth. here is an example of this process with a shared cache proxy: the freshness lifetime is calculated based on several headers. if a "cache-control:
max-age=n" header is specified, then the freshness lifetime is equal to n. if this header is not present, which is very often the case, it is checked if an expires header is present. if an expires header exists, then its value minus the value of the date header determines the freshness lifetime. finally, if neither header is present, look for a last-modified header. if this header is present, then th...
CSP: report-to - HTTP
gains meaning in combination with other directives. csp version 1 directive type reporting directive this directive is not supported in the <meta> element. syntax content-security-policy: report-to <json-field-value>; examples see content-security-policy-report-only for more information and examples. ...
...a> element. syntax content-security-policy: report-to <json-field-value>; examples see content-security-policy-report-only for more information and examples. ...
...10886400, "endpoints": [ { "url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "
max_age": 10886400, "endpoints": [ { "url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint report-to: { "group": "endpoint-1", "
max_age": 10886400, "endpoints": [ { "url": "https://example.com/reports" }, { "url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
Keep-Alive - HTTP
the connection header needs to be set to "keep-alive" for this header to have any meaning. connection-specific header fields such as connection and keep-alive are prohibited in http/2. chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them. ...
...parameters a comma-separated list of parameters, each consisting of an identifier and a value separated by the equal sign ('='). the following identifiers are possible: timeout: indicating the minimum amount of time an idle connection has to be kept opened (in seconds). note that timeouts longer than the tcp timeout may be ignored if no keep-alive tcp message is set at the transport level.
max: indicating the
maximum number of requests that can be sent on this connection before closing it. unless 0, this value is ignored for non-pipelined connections as another request will be sent in the next response. an http pipeline can use it to limit the pipelining. examples a response containing a keep-alive header: http/1.1 200 ok connection: keep-alive content-encoding: gzip content-ty...
...losing it. unless 0, this value is ignored for non-pipelined connections as another request will be sent in the next response. an http pipeline can use it to limit the pipelining. ...
Intl.NumberFormat() constructor - JavaScript
t formatting, the defaults is "short". "long" (e.g., 16 litres) "short" (e.g., 16 l) "narrow" (e.g., 16l) usegrouping whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. possible values are true and false; the default is true. the following properties fall into two groups: minimumintegerdigits, minimumfractiondigits, and
maximumfractiondigits in one group, minimumsignificantdigits and
maximumsignificantdigits in the other. if at least one property from the second group is defined, then the first group is ignored. minimumintegerdigits the minimum number of integer digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. possible v...
...r digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
maximumfractiondigits the
maximum number of fraction digits to use. possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the defa...
...rrency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0. minimumsignificantdigits the minimum number of significant digits to use. possible values are from 1 to 21; the default is 1.
maximumsignificantdigits the
maximum number of significant digits to use. possible values are from 1 to 21; the default is 21. examples basic usage in basic use without specifying a locale, a formatted string in the default locale and with default options is returned. let amount = 3500; console.log(new intl.numberformat().format(amount)); // → '3,500' if in us english locale decimal an...
Intl.PluralRules() constructor - JavaScript
ption, see the intl page. type the type to use. possible values are: "cardinal" for cardinal numbers (refering to the quantity of things). this is the default value. "ordinal" for ordinal number (refering to the ordering or ranking of things, e.g. "1st", "2nd", "3rd" in english). the following properties fall into two groups: minimumintegerdigits, minimumfractiondigits, and
maximumfractiondigits in one group, minimumsignificantdigits and
maximumsignificantdigits in the other. if at least one property from the second group is defined, then the first group is ignored. minimumintegerdigits the minimum number of integer digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. po...
...r digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
maximumfractiondigits the
maximum number of fraction digits to use. possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the defa...
...rrency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0. minimumsignificantdigits the minimum number of significant digits to use. possible values are from 1 to 21; the default is 1.
maximumsignificantdigits the
maximum number of significant digits to use. possible values are from 1 to 21; the default is 21. examples basic usage in basic use without specifying a locale, a formatted string in the default locale and with default options is returned. this is useful to distinguish between singular and plural forms, e.g. "dog" and "dogs". var pr = new intl.pluralrules(); p...
Number - JavaScript
ns nan. literal syntax 123 // one-hundred twenty-three 123.0 // same 123 === 123.0 // true function syntax number('123') // returns the number 123 number('123') === 123 // true number("unicorn") // nan number(undefined) // nan constructor number() creates a new number value. static properties number.epsilon the smallest interval between two representable numbers. number.
max_safe_integer the
maximum safe integer in javascript (253 - 1). number.
max_value the largest positive representable number. number.min_safe_integer the minimum safe integer in javascript (-(253 - 1)). number.min_value the smallest positive representable number—that is, the positive number closest to zero (without actually being zero). number.nan special "not a number" value. number.neg...
...base"). overrides the object.prototype.tostring() method. number.prototype.valueof() returns the primitive value of the specified object. overrides the object.prototype.valueof() method. examples using the number object to assign values to numeric variables the following example uses the number object's properties to assign values to several numeric variables: const biggestnum = number.
max_value const smallestnum = number.min_value const infinitenum = number.positive_infinity const neginfinitenum = number.negative_infinity const notanum = number.nan integer range for number the following example shows the minimum and
maximum integer values that can be represented as number object. (more details on this are described in the ecmascript standard, chapter 6.1.6 the numb...
...in_value const infinitenum = number.positive_infinity const neginfinitenum = number.negative_infinity const notanum = number.nan integer range for number the following example shows the minimum and
maximum integer values that can be represented as number object. (more details on this are described in the ecmascript standard, chapter 6.1.6 the number type.) const biggestint = number.
max_safe_integer // (253 - 1) => 9007199254740991 const smallestint = number.min_safe_integer // -(253 - 1) => -9007199254740991 when parsing data that has been serialized to json, integer values falling outside of this range can be expected to become corrupted when json parser coerces them to number type. a possible workaround is to use string instead. larger numbers can be represented using ...
Media container formats (file types) - Web media technologies
etails about the profile, level, and/or other codec configuration specifics. video codecs supported by 3gp codec browser support chrome edge firefox safari avc (h.264) yes1,2 h.263 yes1 mpeg-4 part 2 (mp4v-es) yes1 vp8 yes1 [1] firefox only supports 3gp on open
max-based devices, which currently means the boot to gecko (b2g) platform. [2] firefox support for h.264 relies upon the operating system's media infrastructure, so it is available as long as the os supports it. audio codecs supported by 3gp codec browser support chrome edge firefox safari amr-nb yes1 amr-wb yes1 ...
... [2] firefox support for aac relies upon the operating system's media infrastructure, so it is available as long as the os supports it. adts audio data transport stream (adts) is a container format specified by mpeg-4 part 3 for audio data, intended to be used for streamed audio, such as for internet radio. it is, essentiall...
...ck) high compression optimized for slow connections 3gp (ideally with mp4 fallback) compatibility with older devices/browsers quicktime (ideally with avi and/or mpeg-2 fallback) these suggestions make a number of assumptions. you should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.
maximizing compatibility with multiple containers to optimize compatibility, it's worth considering providing more than one version of media files, using the <source> element to specify each source within the <audio> or <video> element. for example, you can offer an ogg or webm video as the first choice, with a fallback in mp4 format. you could even choose to offer a retro-like quicktime or avi fall...
Using the WebAssembly JavaScript API - WebAssembly
sing postmessage(), and used in multiple places. in javascript, a memory instance can be thought of as a resizable arraybuffer (or sharedarraybuffer, in the case of shared memories) and, just as with arraybuffers, a single web app can create many independent memory objects. you can create one using the webassembly.memory() constructor, which takes as arguments an initial size and (optionally) a
maximum size and a shared property that states whether it is a shared memory or not. let’s start exploring this by looking at a quick example. create another new simple html page (copy our simple template) and call it memory.html. add a <script></script> element to the page. now add the following line to the top of your script, to create a memory instance: var memory = new webassemb...
...property that states whether it is a shared memory or not. let’s start exploring this by looking at a quick example. create another new simple html page (copy our simple template) and call it memory.html. add a <script></script> element to the page. now add the following line to the top of your script, to create a memory instance: var memory = new webassembly.memory({initial:10,
maximum:100}); the unit of initial and
maximum is webassembly pages — these are fixed to 64kb in size. this means that the above memory instance has an initial size of 640kb, and a
maximum size of 6.4mb. webassembly memory exposes its bytes by simply providing a buffer getter/setter that returns an arraybuffer. for example, to write 42 directly into the first word of linear memory, you can do...
... the same value using: new uint32array(memory.buffer)[0] try this now in your demo — save what you’ve added so far, load it in your browser, then try entering the above two lines in your javascript console. growing memory a memory instance can be grown by calls to memory.prototype.grow(), where again the argument is specified in units of webassembly pages: memory.grow(1); if a
maximum value was supplied upon creation of the memory instance, attempts to grow past this
maximum will throw a webassembly.rangeerror exception. the engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient. note: since an arraybuffer’s bytelength is immutable, after a successful memory.prototype.grow() operation the buffer gette...
Progress Listeners - Archive of obsolete content
fires when the location bar changes; that is load event is confirmed // or when the user switches tabs. if you use mylistener for more than one tab/window, // use aprogress.domwindow to obtain the tab/window which triggered the change. ...
...cation bar changes; that is load event is confirmed // or when the user switches tabs. if you use mylistener for more than one tab/window, // use aprogress.domwindow to obtain the tab/window which triggered the change. ...
Deploying a Plugin as an Extension - Archive of obsolete content
we'll cover the basics. the id specifies a unique id that uniquely identifes this extension of the form. if you have written extensions for firefox in the past, you'll notice that we no longer require the use of guids as ex...
...we'll cover the basics. the id specifies a unique id that uniquely identifes this extension of the form. if you have written extensions for firefox in the past, you'll notice that we no longer require the use of guids as extension ids. the name s...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
listing 2: content for chrome.manifest content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul register the content package (content instruction) l...
... listing 2: content for chrome.manifest content helloworld content/ overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul register the content package (content instruction) line 1, beginning conten...
The Essentials of an Extension - Archive of obsolete content
little more complicated. we'll discuss localization further ahead in this section. <em:type>2</em:type> this specifies that the add-on being installed is an extension. you can read about different possible types in the install.rdf specification. <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:
maxversion>10.*</em:
maxversion> </description> </em:targetapplication> this node specifies the target application and target versions for the extension, specifically firefox, from version 4 up to version 10. the uuid is firefox's unique id. other mozilla and mozilla-based applications such as thunderbird and seamonkey have their own. you can have an extension that works on multiple applications...
...from version 4 up to version 10. the uuid is firefox's unique id. other mozilla and mozilla-based applications such as thunderbird and seamonkey have their own. you can have an extension that works on multiple applications and versions. for example, if you create a firefox extension, it would normally take little effort to port it to seamonkey, which has very similar features and ui. the min and
max version specify the version range in which the extension can be installed. here's more about the version format. if the application or version range don't match, you won't be allowed to install the extension, or the extension will be installed in a disabled state. users can disable version checks through preferences or installing add-ons like the add-on compatibility reporter. beginning with fire...
XPCOM Objects - Archive of obsolete content
d will probably break, we'll cover this later on.) in the components directory, the file xsihellocounter.idl has the following contents: #include "nsisupports.idl" /** * counter for the hello world extension. keeps track of how many times the * hello world message has been shown. */ [scriptable, uuid(bd46f689-6c1d-47d0-bc07-bb52b546b8b5)] interface xsihellocounter : nsisupports { /* the
maximum allowed count. */ const short
max_count = 100; /* the current count. */ readonly attribute short count; /** * increments the display count and returns the new count. * @return the incremented count. */ short increment(); }; the bits about nsisupports are common to most xpcom interface definitions. nsisupports is the base interface for all interfaces, so it should alway...
...le counter. you can define numeric and boolean constants in idl files, but not string constants. this is a known limitation of xpidl, and a simple workaround is to define a readonly attribute instead. this means you have to define a getter in the implementation file, though. you can access constants through a reference of the component, or directly from the interface: // these are equivalent.
max = ci.xsihellocounter.
max_count;
max = counterreference.
max_count; the implementation file, xshellocounter.js, is much longer. we'll analyze it piece by piece. const cc = components.classes; const ci = components.interfaces; const cr = components.results; const ce = components.exception; you should be familiar with this already, although there are a couple of additions, components.results...
Creating a Firefox sidebar extension - Archive of obsolete content
the chrome manifest creates a lookup for all the resource types used by the extension. the manifest also tells firefox that the extension has an overlay that needs to be merged into the browser. for more information on chr...
...the chrome manifest creates a lookup for all the resource types used by the extension. the manifest also tells firefox that the extension has an overlay that needs to be merged into the browser. for more information on chrome manifests and the p...
Getting Started - Archive of obsolete content
l xml database that describes the skin. <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> the first section requires that you establish a uuid for your theme and that you give your theme a version number. once you've done this, insert the information as above, and scroll down. ...
...'ve done this, insert the information as above, and scroll down. you will also have to update the minimum and
maximum compatible versions for the target application (seamonkey) in the following section: <em:targetapplication> <description> <!-- seamonkey's uuid --> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>min_sm_version</em:minversion> <em:
maxversion>
max_sm_version</em:
maxversion> </description> </em:targetapplication> establishing both minimum and
maximum compatible versions lets you avoid conflicts with versions of seamonkey your theme wasn't designed for -- or wasn't tested on. see install manifests for the reference information about the install.rdf file. css files the css files in these directories tell the browser how to d...
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
ml database that describes the skin. <description about="urn:mozilla:install-manifest"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> the first section requires that you establish a uuid for your theme and that you give your theme a version number. once you've done this, insert the information as above, and scroll down. ...
...ou've done this, insert the information as above, and scroll down. you will also have to update the minimum and
maximum compatible versions for the target application (firefox) in the following section: <em:targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:
maxversion>
max_ff_version</em:
maxversion> </description> </em:targetapplication> establishing both minimum and
maximum compatible versions lets you avoid conflicts with versions of firefox your theme wasn't designed for -- or wasn't tested on. see install manifests for the reference information about the install.rdf file. css files the css files in these directories tell the browser how to...
Actionscript Performance Tests - Archive of obsolete content
cated in the test/performance directory. similar to the acceptance tests set the environment variables avm, asc, builtinabc. the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time 566'. the testconfig.txt file defines groups of tests to run (e.g. sunspider, scimark, language). by default the time for each test is output. use the --memory flag to capture the
maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the m...
... 565 564 0.2 time sunspider/access-fannkuch.as 366 362 1.1 time ... # compare 2 builds with > 2 iterations $ ./runtests.py --iterations=10 --avm2=build2/avmshell sunspider/*.as test avm avm2 min :
max avg min :
max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as [ 567.0 : 585] 575.9 [ 564.0 : 580] 572.0 0.5 time sunspider/access-fannkuch.as [ 363.0 : 386] 370.0 [ 362.0 : 399] 371.8 0.3 time ... ...
sizemode - Archive of obsolete content
« xul reference home sizemode type: one of the values below the state of the window. it can have one of the following values:
maximized the window is
maximized, and occupies the full size of the screen. normal the window appears in a normal state at the desired size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the resizer grippy on
maximized windows). note: when a window is minimized, the sizemode attribute is not updated. ...
... to get the window state from javascript code, use window.windowstate. listen to the sizemodechange event dispatched to the dom window to get notified when the window state changes. ...
XUL Events - Archive of obsolete content
overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'. when there is not enough space to display the contents of the element at full size, the overflow event will be fired. depending on the value of the overflow property, scrollbars may have appeared. for example, if a box has a
maximum size of 100 pixels, and only enough space for 80 pixels is available, the overflow event will be sent to the box. if the size changes, for example, by the user resizing the window, the underflow event will be fired when enough space becomes available. attribute: onoverflow popuphidden this event ...
...t description activate sent when a window becomes active. deactivate sent when a window becomes inactive. sizemodechange sent when a window is minimized or un-minimized, switched between full screen and windowed mode, or
maximized. note: this event may fire several times or while resizing the window (for example, see bug 715867), so always check if the window state changed by inspecting window.windowstate in the event. accessibility events these events are used to notify the accessibility system of changes to an element. you would not normally use these yourself. ...
SQLite Templates - Archive of obsolete content
ementbyid method may be used to refer to it. you can add as many parameters as necessary for the query. the example above used a string parameter. if you want a numeric parameter, you should also set the type attribute. <listbox id="friends" datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name, from myfriends where age >= :minage && age <= :
maxage <param id="minage" name="minage" type="integer">30</param> <param id="
maxage" name="
maxage" type="integer">40</param> </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> here, the age is an integer number, so the type attribute is set to integer. integers are 32-bit values, but you can use the value int64 for 64-bit integers. yo...
.../template> </listbox> here, the age is an integer number, so the type attribute is set to integer. integers are 32-bit values, but you can use the value int64 for 64-bit integers. you can also use the value double for double precision floating point values. if no type is specified, a string is assumed. we could later change the age to use in the query with a short script: function adjustage(min,
max) { document.getelementbyid("minage").textcontent = min; document.getelementbyid("
maxage").textcontent =
max; document.getelementbyid("friends").builder.rebuild(); } this function takes two arguments, the minimum and
maximum values to use. we retrieve the param elements and set their textcontent properties to the desired value. finally, we rebuild the entire template. « previousnext ...
Complete - Archive of obsolete content
version checks firefox etc. check extensions for compatibility before installing them. these version checks depend on the version numbers specified in the install.rdf file. there are two approaches: pessimistic and optimistic. the approach that is normally recommended is pessimistic. the extension is assumed to fail in any future version of the application. to adopt this approach, set the
maxversion to the latest actual version where you have tested your extension. the problem with this approach is that you have to release a new xpi every time there is a new release of any of the applications it supports. if you delay releasing a new xpi, you risk annoying users who cannot upgrade until you do. the approach used here is optimistic. the extension is assumed to work in any future versio...
...sted your extension. the problem with this approach is that you have to release a new xpi every time there is a new release of any of the applications it supports. if you delay releasing a new xpi, you risk annoying users who cannot upgrade until you do. the approach used here is optimistic. the extension is assumed to work in any future version of the application. to adopt this approach, set the
maxversion to a large number like 99. the problem with this approach is that when changes in an application do make the extension fail, users might have bad experiences ranging from error messages that they cannot understand to crashes and data loss. for more information about version checks, see: extension versioning, update and compatibility the installed jar to use disk space efficiently on the en...
Custom toolbar button - Archive of obsolete content
ar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:
maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" em:
maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e25a45638b28}" em:minversion="0.2.9"...
...change the text between double-quote characters on these three lines. optionally remove the sections for...
Input Controls - Archive of obsolete content
entifier so that you can identify the textbox. class the style class of the textbox. value if you want the textbox to have default text, supply it with the value attribute. disabled set to true to have text entry disabled. textbox.type you can set this attribute to the special value password to create a textbox that hides what it types. this is usually used for password entry fields.
maxlength the
maximum number of characters that the textbox allows. note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each type. the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" va...
...note that while in html, several different kinds of fields can be created with the input element, in xul there are separate elements for each type. the following example shows some textboxes: example 1 : source view <label control="some-text" value="enter some text"/> <textbox id="some-text"/> <label control="some-password" value="enter a password"/> <textbox id="some-password" type="password"
maxlength="8"/> multiline textbox the textbox examples above will create text inputs that can only be used for entering one line of text. html also has a textarea element for creating a larger text entry area. in xul, you can use the textbox element for this purpose as well -- two separate elements are not necessary. if you set the multiline attribute to true, the text entry field will display mul...
Stack Positioning - Archive of obsolete content
stacks. the size of a stack is determined by the positions of the child elements. it is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. you can override this size with the various style properties such as width and
max-width. you can use a script to adjust the value of the left and top attributes and thus make the elements move around. stacks have the advantage that when one absolutely positioned element changes its position, the position of the other elements is not affected. if you tried to move elements in a regular box, other elements might shuffle their positions around. it is also possible to place the ...
...and "right" must be set. in this example, the resulting width of the top-most hbox will be 400px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. --> </hbox> </stack> in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "
maxwidth") inside a stack can sometimes produce unpredictable and undesireable results. the next section describes tabboxes which are like decks but provide their own navigation. « previousnext » ...
XUL controls - Archive of obsolete content
y.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displays a bar with a thumb that may be slid across the bar to select between a range of values. <scale min="1"
max="10"/> scale reference <splitter> allows the user to adjust the division of space between elements. <splitter collapse="before"> <grippy/> </splitter> splitter reference related elements: grippy <tab> description goes here. <tab label="firefox"/> tab reference related elements: tabs ta...
...down showing matches that would complete what the user types. the user can select one to have it filled into the textbox. <textbox type="autocomplete" autocompletesearch="history"/> textbox reference <textbox type="number"> a textbox for entering numbers. two arrow buttons are displayed for cycling through values. <textbox type="number" min="1"
max="20"/> textbox reference <textbox type="password"> a textbox that hides the characters typed, used for entering passwords. <textbox type="password"/> textbox reference <textbox type="search"> a textbox for searching. <textbox type="search"/> textbox reference <textbox type=...
arrowscrollbox - Archive of obsolete content
ton label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width clicktoscroll type: boolean clicktoscroll, if true, the arrows must be clicked to scroll the s...
...e tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width disabled type: boolean gets and sets the value of the disabled attribute. scrollboxobject type: nsiscrollboxobject the scroll box object implements the nsiscrollboxobject interfa...
box - Archive of obsolete content
value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
command - Archive of obsolete content
e executed. currently, the content still receives these key events, even though it can't override them. in future releases, it won't receive them. see bug 1173061 for details. ...
... currently, the content still receives these key events, even though it can't override them. in future releases, it won't receive them. see bug 1173061 for details. ...
commandset - Archive of obsolete content
if this attribute is not specified, or you set it to the value '*', all elements are valid. the command update will only occur when the event occurs to one of the specified elements. ...
...ribute is not specified, or you set it to the value '*', all elements are valid. the command update will only occur when the event occurs to one of the specified elements. ...
grid - Archive of obsolete content
<menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
hbox - Archive of obsolete content
!-- two button on the right --> <hbox> <spacer flex="1"/> <button label="connect"/> <button label="ping"/> </hbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
iframe - Archive of obsolete content
ansparent.transparentthis results in the iframe's background being transparent. ...
...ransparentthis results in the iframe's background being transparent. ...
key - Archive of obsolete content
voked. this should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out entirely for the bubbling phase. ...
... should be set to the value capturing to indicate during the event capturing phase or target to indicate at the target element or left out entirely for the bubbling phase. ...
listcol - Archive of obsolete content
gers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
listcols - Archive of obsolete content
gers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
menu - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
...ttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the sizetopopup attribute is left out or set to none, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the
maximum width of the menu itself. otherwise, the menu will size itself to at least the size of the popup. if the menu has a
maximum width, the popup will also be this width. none the width of the popup will not be constrained to the size of the menu. pref the preferred width of the menu label or button will be the size needed for the popup contents. this is the default value for menulists...
menubar - Archive of obsolete content
e type: integer a value indicating the type of accessibility object for the element. statusbar type: id of statusbar element gets and sets the value of the statusbar attribute. ...
...pe: integer a value indicating the type of accessibility object for the element. statusbar type: id of statusbar element gets and sets the value of the statusbar attribute. ...
menulist - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
...set to true, then the user cannot change the value of the element. however, the value may still be modified by a script. sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the sizetopopup attribute is left out or set to none, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the
maximum width of the menu itself. otherwise, the menu will size itself to at least the size of the popup. if the menu has a
maximum width, the popup will also be this width. none the width of the popup will not be constrained to the size of the menu. pref the preferred width of the menu label or button will be the size needed for the popup contents. this is the default value for menulists...
popupset - Archive of obsolete content
py"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
rule - Archive of obsolete content
or leaf and container nodes with different tags. parsetype type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse type of integer. ...
... container nodes with different tags. parsetype type: string if this attribute is set to integer, the rule will only match rdf nodes with a parse type of integer. ...
splitter - Archive of obsolete content
ll have no effect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
...effect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
stringbundle - Archive of obsolete content
g examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings. ...
...s (example needed) attributes src type: uri the uri of the property file that contains the localized strings. ...
tabpanels - Archive of obsolete content
ttributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
... selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
toolbaritem - Archive of obsolete content
abel="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
toolbarpalette - Archive of obsolete content
l="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
treecell - Archive of obsolete content
and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. ...
...ing the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. ...
treeitem - Archive of obsolete content
e should be set to rdf:*. elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource. elements outside will appear only once. ...
... set to rdf:*. elements that appear inside the element with the attribute will be repeated for each node in the rdf datasource. elements outside will appear only once. ...
vbox - Archive of obsolete content
ample <!-- two labels at bottom --> <vbox> <spacer flex="1"/> <label value="one"/> <label value="two"/> </vbox> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, ,...
...on, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
wizardpage - Archive of obsolete content
that identifies the page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...
...ifies the page's identifer in the wizard. this is used with the next attribute. the wizard always starts with the wizardpage that appears first in the wizard child list. ...
NPP_WriteReady - Archive of obsolete content
description the browser calls npp_writeready before each call to npp_write to determine whether a plug-in can receive data and how many bytes it can receive. ...
... description the browser calls npp_writeready before each call to npp_write to determine whether a plug-in can receive data and how many bytes it can receive. ...
Building a Theme - Archive of obsolete content
hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this theme can install into, with minimum and
maximum supported versions. --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:
maxversion>39.*</em:
maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:descri...
...installing a theme. if you were to install an extension it would be 2 (see install manifests#type for other type codes). {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - firefox's application id. 29.0 - the exact version number of the earliest version of firefox you're saying this extension will work with. never use a * in a minversion, it almost certainly will not do what you expect it to. 39.* - the
maximum version of firefox you're saying this extension will work with. set this to be no newer than the newest currently available version! in this case, "39.*" indicates that the extension works with firefox 39 and any subsequent 39.x release. themes are compatible by default, unless you set strict compatibility mode for your theme. if you get a message that the install.rdf is malformed, it is he...
Browser Feature Detection - Archive of obsolete content
cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true
maxheight true ie7 only true
maxwidth true ie7 only true minheight true true true minwidth true ie7 only true orphans true false true outline true false true outlinecolor true false true outlinestyle true false true outlinewidth true false true ...
...e}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported': false}, {name: '
maxheight', 'supported': false}, {name: '
maxwidth', 'supported': false}, {name: 'minheight', 'supported': false}, {name: 'minwidth', 'supported': false}, {name: 'orphans', 'supported': false}, {name: 'outline', 'supported': false}, {name: 'outlinecolor', 'supported': false}, {name: 'outlinestyle', 'supported': false}, {name: 'outlinewidth', 'supported': false}, {name: 'overflow', 's...
-ms-hyphenate-limit-lines - Archive of obsolete content
for instance, if 2, then no more than 2 successive lines may end with a hyphenated word. ...
...with a hyphenated word. initial valueno-limitapplies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values no-limit indicates that hyphenation is not limited based on the number of consecutive hyphenated lines. in the flow above the consecutive hyphenated lines limit would be an infinitely large positive number. <integer> indicates the
maximum number of successive hyphenated lines. for instance, if 2, then no more than 2 successive lines may end with a hyphenated word. if 0 then no lines may end with a hyphenated word. (hyphenation is effectively disabled.) negative values are not allowed. formal syntax no-limit | <integer> specifications not part of any specification. ...
-ms-scroll-snap-points-x - Archive of obsolete content
between subsequent snap-points both to the left and the right of the initial snap-point. snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor. if any value is less than -ms-scroll-limit-x-min , then -ms-scroll-limit-x-min is used. if any value is greater than -ms-scroll-limit-x-
max, then -ms-scroll-limit-x-
max is used. formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-x property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the...
... remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. starting with windows 8.1, this property is also...
-ms-scroll-snap-points-y - Archive of obsolete content
the distance between subsequent snap-points both above and below the initial snap-point. snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor. if any value is less than -ms-scroll-limit-y-min , then -ms-scroll-limit-y-min is used. if any value is greater than -ms-scroll-limit-y-
max, then -ms-scroll-limit-y-
max is used. formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-y property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the...
... remarks this property requires windows 8 or later. this property has no effect on non-scrollable elements. starting with windows 8.1, this property is also...
-ms-wrap-flow - Archive of obsolete content
n is not created. both inline flow content can flow on all sides of the exclusion. start inline flow content can wrap on the start edge of the exclusion area but must leave empty the area after the end edge of the exclusion area. end inline flow content can wrap after the end edge of the exclusion area but must leave empty the area before the start edge of the exclusion area. ...
... remarks the -ms-wrap-flow property makes an element an exclusion element when it has a computed value other than auto. ...
Building Mozilla XForms - Archive of obsolete content
/xforms.xpi. congratulations, you've successfully built your first mozilla xforms extension! the built xpi file will only install on a nightly snapshot from the same day or your self-built firefox version. ...
...or your self-built firefox version. if you are sure that older or newer firefox versions are compatible with your extension, you can unzip the xpi file (it's a regular zip file), edit the install.rdf and change the minversion and
maxversion entries. the following scheme usually works (replace {geckoversion} with the used gecko/toolkit version): <em:minversion>{geckoversion}.0</em:minversion> <em:
maxversion>{geckoversion}.*</em:
maxversion> for example, for the firefox 3.5 version of the extension, it might look like that: <em:minversion>1.9.1.0</em:minversion> <em:
maxversion>1.9.1.*</em:
maxversion> then zip the files again (or use an editor like vim that can edit files inside a zip archive). ...
Desktop mouse and keyboard controls - Game development
remember: it's a secret, so don't tell anyone! how to play we've implemented the controls, and now we should inform the player about their options to control the game — they wouldn't know about them otherwise. when showing the how to play screen where the various ways to control the ship in the game are shown, instead of showing them a...
...down || this.keyfire2.isdown) { // fire the weapon } if yes, then it's time to shoot some bullets! we can even define a secret cheat button: this.keycheat = this.input.keyboard.addkey(phaser.keycode.c); and then in the update() function whenever c is pressed we'll do this: if(this.keycheat.isdown) { this.player.health = this.player.
maxhealth; } we can set the health of the player to
maximum. remember: it's a secret, so don't tell anyone! how to play we've implemented the controls, and now we should inform the player about their options to control the game — they wouldn't know about them otherwise. when showing the how to play screen where the various ways to control the ship in the game are shown, instead of showing them all to everyone, we can detect whether the game is lau...
Visual typescript game engine - Game development
@property drawreference * @type string */ private drawreference: string = "frame"; /** * aspectratio default value, can be changed in run time. */ private aspectratio: number = 1.333; /** * domain is simple url address, * recommendent to use for local propose lan ip * like : 192.168.0.xxx if you wanna run ant test app with server. */ private domain: string = "
maximumroulette.com"; /** * networkdeeplogs control of dev logs for webrtc context only. */ private networkdeeplogs: boolean = false; /** * masterserverkey is channel access id used to connect * multimedia server channel. */ private masterserverkey: string = "multi-platformer-sever1.
maximum"; /** * rtcserverport port used to connect multimedia server. * default value...
...ip (session initiation protocol) used for signalling and controlling multimedia sessions. general networking config: config property defined in constructor from serverconfig class. this.networkdeeplogs = false; this.rtcserverport = 12034; this.rtc3serverport = 12034; this.connectorport = 1234; this.domain = "192.168.0.14"; this.masterserverkey = "multi-platformer-sever1.
maximum"; this.protocol = "http"; this.issecure = false; this.appuseaccountssystem = true; this.appusevideochat = true; this.databasename = "masterdatabase"; this.databaseroot = "mongodb://localhost:27017"; - the running server is easy : npm run rtc with this cmd: npm run rtc we run server.js and connector.ts websocket. a connector is our account session used for login, r...
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
tes have two faces: the content attribute and the idl (interface definition language) attribute. the content attribute is the attribute as you set it from the content (the html code) and you can set it or get it via element.setattribute() or element.getattribute(). the content attribute is always a string even when the expected value should be an integer. for example, to set an <input> element's
maxlength to 42 using the content attribute, you have to call setattribute("
maxlength", "42") on that element. the idl attribute is also known as a javascript property. these are the attributes you can read or set using javascript properties like element.foo. the idl attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going...
...eturn their values as they are really used. for example, the default type for <input> elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". however, the type idl attribute will return the string "text". idl attributes are not always strings; for example, input.
maxlength is a number (a signed long). when using idl attributes, you read or set values of the desired type, so input.
maxlength is always going to return a number and when you set input.
maxlength ,it wants a number. if you pass another type, it is automatically converted to a number as specified by the standard javascript rules for type conversion. idl attributes can reflect other types such as uns...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
he results to see if the program crashes or otherwise acts inappropriately. this is an important way to ensure that software is stable, reliable, and secure, and we use fuzzing a lot at mozilla. 163 gif composing, glossary gif (graphics interchange format) is an image format that uses lossless compression and can be used for animations. a gif uses up to 8 bits per pixel and a
maximum of 256 colors from the 24-bit color space. 164 gij automation, codingscripting, gaia, integration, tests gaia integration testing. marionette- and javascript- based. 165 gpl gpl, glossary, license, openpractices, remixing, sharing the (gnu) gpl (general public license) is a copyleft free software license published by the free software foundation. user...
...is without initially knowing what those capabilities are and without creating congestion. tcp slow start is an algorithm used to detect the available bandwidth for packet transmission, and balances the speed of a network connection. it prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's
maximum capacity is found. 449 tld glossary, web, webmechanics a tld (top-level domain) is the most generic domain in the internet's hierarchical dns (domain name system). a tld is the final component of a domain name, for example, "org" in developer.mozilla.org. 450 tofu http, ssh, security trust on first use (tofu) is a security model in which a client need...
Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
ize it would be based on its content, if no external factors were applied to it. for example, inline elements are sized intrinsically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do. how intrinsic sizes are calculated is defined in the css intrinsic and extrinsic sizing specification. intrinsic sizing takes into account the min-content and
max-content size of an element. for text the min-content size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the keyword value of min-content for the width property will size an element according to the min-con...
... an element. for text the min-content size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the keyword value of min-content for the width property will size an element according to the min-content size. the
max-content size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. the keyword value
max-content exposes this behavior. ...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
context. the following shows a few response headers after a get request. ...
...t-type headers are entity header: 200 ok access-control-allow-origin: * connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: mon, 18 jul 2016 16:06:00 gmt etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" keep-alive: timeout=5,
max=997 last-modified: mon, 18 jul 2016 02:36:04 gmt server: apache set-cookie: mykey=myvalue; expires=mon, 17-jul-2017 16:06:00 gmt;
max-age=31449600; path=/; secure transfer-encoding: chunked vary: cookie, accept-encoding x-backend-server: developer2.webapp.scl3.mozilla.com x-cache-info: not cacheable; meta data too large x-kuma-revision: 1085259 x-frame-options: deny ...
CSS and JavaScript accessibility best practices - Learn web development
cle outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is. objective: to gain familiarity with using css and javascript appropriately in your web documents to
maximise accessibility and not detract from it. css and javascript are accessible? css and javascript don't have the same immediate importance for accessibility as html, but they are still able to help or damage accessibility, depending on how they are used. to put it another way, it is important that you consider some best practice advice to make sure that your use of css and javascript does...
...ad (screen readers won't pick this up or alert users to it by default): <div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div> we will explain these attributes in our next article, which covers wai-aria in much more detail. note: some of you will probably be thinking about that fact that html5 forms have built-in validation mechanisms like the required, min/minlength, and
max/
maxlength attributes (see the <input> element reference for more information). we didn't end up using these in the demo because cross-browser support for them is patchy (for example ie10 and above only). note: webaim's usable and accessible form validation and error recovery provides some further useful information about accessible form validation. other javascript accessibility concerns th...
Advanced styling effects - Learn web development
t is legible without them. you can find the examples in this section at box-shadow.html (see the source code too). a simple box shadow let's look at a simple example to get things started. ...
... use any length and color units that would make sense to do so to define these values. ...
Fundamental CSS comprehension - Learn web development
om darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container. give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container. float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a
max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that targets both the card header, and card f...
... 10px rather than 16px as it is by default. (this is of course, provided the descendants in question don't have any ancestors sitting in between them and <html> in the hierarchy that have a different font-size set on them. this could affect the values you need, although in this simple example this is not an issue.) other things to think about: you'll get bonus marks if you write your css for
maximum readability, with a separate declaration on each line. you should include .card at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content. hints and tips you don't need to edit the html in any way, except to apply the css to your html. whe...
Introduction to CSS layout - Learn web development
ies that the value of the float property should be inherited from the element's parent element. in the example below we float a <div> left, and give it a margin on the right to push the text away from the element. 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. floats example body { width: 90%;
max-width: 900px; margin: 0 auto; } p { line-height: 2; word-spacing: 0.1rem; } .box { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; border-radius: 5px; } <h1>simple float example</h1> <div class="box">float</div> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat...
... est. nam id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> body {
max-width: 800px; margin: 0 auto; } .container { column-width: 200px; } summary this article has provided a brief summary of all the layout technologies you should know about. read on for more information on each individual technology! overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-colu...
create fancy boxes - Learn web development
! i want to be fancy.</div> let's create some partial drop shadow effect. the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property. ...
...th some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property. .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: center;
max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top : 80%;
max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images. also, fancy boxes themselves are quite useless if they are not part of a larger layout. if you haven't checked this out yet, you should look at the ...
Basic native form controls - Learn web development
user cannot modify the input value but it is still sent with the rest of the form data) or disabled (the input value can't be modified and is never sent with the rest of the form data). they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box. they can be constrained in size (the physical size of the box) and
maxlength (the
maximum number of characters that can be entered into the box). they can benefit from spell checking (using the spellcheck attribute), if the browser supports it. note: the <input> element is unique amongst html elements because it can take many different forms depending on its type attribute value. it is used for creating most types of form widgets including single line text field...
...ave a name attribute are sent, even if no value has been filled out. in the case of checkable items, their values are sent only if they are checked. if they are not checked, nothing is sent, not even their name. if they are checked but have no value, the name is sent with a value of on. note: you can find the examples from this section on github as checkable-items.html (see it live also). for
maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list. each individual pair of <label>/<input> elements should be contained in its own list item (or similar). the associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of r...
Example 2 - Learn web development
ition : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
...; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%;
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form...
Example 3 - Learn web development
ition : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
...; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%;
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -...
Example 4 - Learn web development
ition : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
...; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%;
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -...
Example 5 - Learn web development
ition : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden {
max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius :...
...; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%;
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -...
How to build custom form controls - Learn web development
ition : absolute; top : 100%; left : 0; } we need an extra class to handle when the list of options is hidden. this is necessary in order to manage the differences between the active state and the open state that do not exactly match. .select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */
max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see...
...ller than the control, the list of options will be as wide as the control itself */ min-width : 100%; /* in case the list is too long, its content will overflow vertically (which will add a vertical scrollbar automatically) but never horizontally (because we haven't set a width, the list will adjust its width automatically. if it can't, the content will be truncated) */
max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); background: #f0f0f0; } for the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked). .select .option { padding: .2em .3em; /* 2px 3px */ }...
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
er in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page. some hints: a click event handler can be added to most elements, including the document <body>. it makes more sense to put it on the <body> element if you want to
maximize the clickable area — the event bubbles up to its child elements. you'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't. note: try this yourself first; if you get really stuck, check out of our live example and source code. throttling a requestanimationframe() animation one limit...
... variable to later store the requestanimationframe() call that animates the spinner. a reference to the start button. a reference to the results paragraph. next, below the previous lines of code, add the following function. it simply takes two numbers and returns a random number between the two. you'll need this to generate a random timeout interval later on. function random(min,
max) { var num = math.floor(math.random()*(
max-min)) + min; return num; } next add the draw() function, which animates the spinner. this is very similar to the version from the simple spinner example, earlier: function draw(timestamp) { if(!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; if(rotatecount > 359) { rotatecount %= 360; } ...
Drawing graphics - Learn web development
es the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. this is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas. ...
...to the center of the canvas, rather than being at the top left corner. this is very useful in many situations, like this one, where we want our design to be drawn relative to the center of the canvas. now add the following code to the bottom of the javascript: function degtorad(degrees) { return degrees * math.pi / 180; }; function rand(min,
max) { return math.floor(math.random() * (
max-min+1)) + (min); } let length = 250; let moveoffset = 20; for(var i = 0; i < length; i++) { } here we are implementing the same degtorad() function we saw in the triangle example above, a rand() function that returns a random number between given lower and upper bounds, length and moveoffset variables (which we'll find out more about later), and an empty for loop. the idea here is tha...
Client-Server Overview - Learn web development
-8). the head also tells us how big it is (content-length: 41823). at the end of the message we see the body content — which contains the actual html returned by the request. ...
...age specified in the location field. the information is otherwise similar to that for the response to a get request. http/1.1 302 found server: apache x-backend-server: developer3.webapp.scl3.mozilla.com vary: cookie vary: accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:38:13 gmt location: https://developer.mozilla.org/profiles/hamishwillee keep-alive: timeout=5,
max=1000 connection: keep-alive x-frame-options: deny x-cache-info: not cacheable; request wasn't a get or head content-length: 0 note: the http responses and requests shown in these examples were captured using the fiddler application, but you can get similar information using web sniffers (e.g. websniffer) or browser extensions like httpfox. you can try this yourself. use any of the linked tools...
Beginning our React todo list - Learn web development
rit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%;
max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem so...
... } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * {
max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form {
max-width: 100%; } .todoapp > h1 { display: block;
max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input_...
Starting our Svelte Todo list app - Learn web development
rit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%;
max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem s...
... } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * {
max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form {
max-width: 100%; } .todoapp > h1 { display: block;
max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input_...
Getting started with Svelte - Learn web development
th this in mind, let's have a look at the src/app.svelte file that came with the starter template. you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em;
max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main {
max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created. variables declared (or imported) at the top level are 'visible...
...main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em;
max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main {
max-width: none; } } </style> we are applying a style to our <h1> element. what will happen other components with <h1> elements in them? in svelte, css inside a component's <style> block will be scope...
Dynamic behavior in Svelte: working with variables and props - Learn web development
work, and you'll get a console message saying "error: cannot have duplicate keys in a keyed each". we need unique ids for our todos! let's declare a newtodoid variable calculated from the number of todos plus 1, and make it reactive. ...
...d make it reactive. add the following snippet to the <script> section: let newtodoid $: { if (totaltodos === 0) { newtodoid = 1; } else { newtodoid = math.
max(...todos.map(t => t.id)) + 1; } } note: as you can see, reactive statements are not limited to one-liners. the following would work too, but it is a little less readable: $: newtodoid = totaltodos ? math.
max(...todos.map(t => t.id)) + 1 : 1 how does svelte achieve this? the compiler parses the whole reactive statement, and detects that it depends on the totaltodos variable and the todos array. so whenever either of them is modified, this code is re-evaluated, updating newtodoid accordingly. let's use this in our addtodo() function — update it like so: function addtodo() { todos = [...
Gecko info for Windows accessibility vendors
short *nodetype); the get_attributes method returns the set of attribute, value pairs for a given node, as well as the namespace id for each attribute. the return value numattribs specifies the number of attributes for this node, and the last 3 parameters return 3 arrays corresponding to attribute name, namespace id, and attribute value. hresult get_attributes( /* [in] */ unsigned short
maxattribs, /* [out] */ bstr *attribnames, /* [out] */ short *namespaceid, /* [out] */ bstr *attribvalues, /* [out] */ unsigned short *numattribs); a variation on this method is get_attributesfornames, which lets turns the attribnames array into an [in] parameter, letting you specify only those attributes you're interested in. this helps minimize the cost of marshalling for those times in whi...
..., indicates whether you want style information for the default media type (usually screen), or a set of alternative media types specified in nsisimpledomdocument::set_alternateviewmediatype(mediatypestring) . see the w3c's website for a list of official media type name. unfortunately, at this time the argument usealternateview is ignored. ...
Cookies Preferences in Mozilla
mited to. ...
...okies default value: false only used if network.cookie.lifetimepolicy is set to 1 true = accepts session cookies without prompting false = prompts for session cookies network.cookie.thirdparty.sessiononly default value: false true = restrict third party cookies to the session only false = no restrictions on third party cookies network.cookie.
maxnumber default value: 1000 configures the
maximum amount of cookies to be stored valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 300 network.cookie.
maxperhost default value: 50 configures the
maximum amount of cookies to be stored per host valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 20 network.cookie.disablecookieformailnews default value: true true = do not accept any cookies...
Debugging Frame Reflow
debug capabilities implemented in nsframe.cpp. it provides the following information for each frame at the start of its reflow reflow reason available width, available height computed width, computed height the previous and the next frame in flow and a count number. when the frame's reflow is finished the following information is displayed : reflow metric (desired) width, height
max. element width
maximum width frame status overflow area getting the log make sure that your build is a debug build (in short you need ac_add_options --enable-debug in your .mozconfig file). create a text file (for instance reflow_rules.txt). enter this line in the text file * 1 this should look like: point the gecko_display_reflow_rules_file environment variable to the ...
...he computed height is 4470 twips (c=9180,4470). the line count is 856 (cnt=856). below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer table frame is unconstrained. the table cell requires its children to compute the mes. it is reported back from the block as: block 02d7bcf8 d=300,300 me=300 the block
max. element size is 300 twips. the second table reflow is started at rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 where the previous information is used. the block has been required to compute the
max. element size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one. frames with children that overflow the parent have the ns_frame_outside_chil...
Eclipse CDT
you do this! before you use eclipse with the mozilla source you must increase its memory limits. when eclipse's indexer tries to process the mozilla source, eclipse will need considerably more memory than the limits imposed by its default configuration. you can increase eclipse's memory limits using the eclipse.ini that lives alongside the eclipse binary. set an initial heap space of 1 gb and
max heap space of 5 gb, say, by modifying the values of the following two lines in eclipse.ini: -xms1g -xmx5g if you fail to increase these limits, then you will likely find that eclipse either hangs when it tries to index the mozilla source or else that the code intelligence is very broken after the indexing "completes". express setup for the eclipse indexer to work well you must first build moz...
... rebind is "next editor". to show a filterable list of open documents (similar to the way emacs gives you a list of open buffers), use cmd-e/ctrl-e. if you click the yellow, double arrow button at the top of the project explorer tab on the left, it will keep the selected file in the project explorer tab in sync with the file that you're currently editing. organizing views use ctrl-m to toggle
maximization of the current editor view (the editor must be focused first). to tab to another view, use cmd-f7/ctrl-f7. this is useful if you have
maximized the editor using ctrl-m and you want to quickly see your search results. for example, without un-
maximizing the editor. to side-by-side edit the same file in two different tabs, select the tab of the file that you want to edit, then from the me...
IME handling guide
est all text in the editor. if we can separate editor contents per paragraph, moving selection between paragraphs generates pseudo focus move, we can reduce this size and runtime cost of contenteventhandler. however, we've not had a plan to do that yet. note that microsoft word uses this hack. mcompositionstart offset of composition string in mtext. when there is no composition, this is uint32_
max. mselection::manchor, mselection::mfocus offset of selection anchor and focus in mtext. mselection::mwritingmode writing mode at selection start. mselection::manchorcharrect, mselection::mfocuscharrect next character rect of mselection::manchor and mselection::mfocus. if correspoinding offset is end of the editor contents, its rect should be caret rect. these rects shouldn't be empty rect.
... rect of mtext. when mtext is empty string, this should be caret rect. mcaret::moffset always same as selection start offset even when selection isn't collappsed. mcaret::mrect caret rect at mcaret::moffset. if caret isn't actually exists, it's computed with a character rect at the offset. mtextrectarray::mstart if there is composition, mstart is same as mcompositionstart. otherwise, uint32_
max. mtextrectarray::mrects each character rects of composition string. meditorrect the rect of editor element. mozilla::contentcacheinchild this exists only in remote processes. this is created as a member of puppetwidget. when puppetwidget receives notifications to ime from imecontentobserver in the remote process, it makes this class modify its cached content. then, this class do that with ...
Profiling with Xperf
ck windows crt allocator is horrible about fragmentation, and causes memory usage to rise drastically even if only a small fraction of that memory is in use. however, even despite this, it's a useful way to track allocations/deallocations. capturing heap data the "-heap" option is used to set up heap tracing. firefox generates lots of events, so you may want to play with the buffersize/minbuffers/
maxbuffers options as well to ensure that you don't get dropped events. also, when recording the stack, i've found that a heap trace is often missing module information (i believe this is a bug in xperf). it's possible to get around that by doing a simultaneous capture of non-heap data. to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession -heap -pidnewp...
...und that a heap trace is often missing module information (i believe this is a bug in xperf). it's possible to get around that by doing a simultaneous capture of non-heap data. to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession -heap -pidnewprocess "./firefox.exe -p test -no-remote" -stackwalk heapalloc+heaprealloc -buffersize 512 -minbuffers 128 -
maxbuffers 512 to stop a session and merge the resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl result.etl "result.etl" will contain your merged data; you can delete main.etl and heap.etl. note that it's possible to capture even more data for the non-heap profile; for example, you might want to be able to correlate heap events with performance da...
NSPR Error Handling
y that is not empty. pr_filesystem_mounted_error attempt to delete or rename a file object while the file system is busy. pr_not_same_device_error request to rename a file to a file system on another device. pr_directory_corrupted_error the directory object in the file system is corrupted. pr_file_exists_error attempt to create or rename a file when the new name is already being used. pr_
max_directory_entries_error attempt to add new filename to directory would exceed the limit allowed. pr_invalid_device_state_error the device was in an invalid state to complete the desired operation. pr_device_is_locked_error the device needed to perform the desired request is locked. pr_no_more_files_error there are no more entries in the directory. pr_end_of_file_error unexpectedly encoun...
...n cannot be performed. pr_in_progress_error the operation is still in progress (probably a nonblocking connect). pr_already_initiated_error the (retried) operation has already been initiated (probably a nonblocking connect). pr_group_empty_error the wait group is empty. pr_invalid_state_error the attempted operation is on an object that was in an improper state to perform the request. pr_
max_error placeholder for the end of the list. ...
PRSockOption
pr_sockopt_linger time to linger on close if data is present in the socket send buffer. pr_sockopt_reuseaddr allow local address reuse. pr_sockopt_keepalive periodically test whether connection is still alive. pr_sockopt_recvbuffersize receive...
...p type-of-service and precedence. pr_sockopt_addmember join an ip multicast group. pr_sockopt_dropmember leave an ip multicast group. pr_sockopt_mcastinterface ip multicast interface address. pr_sockopt_mcasttimetolive ip multicast time-to-live. pr_sockopt_mcastloopback ip multicast loopback. pr_sockopt_nodelay disable nagle algorithm. don't delay send to coalesce packets. pr_sockopt_
maxsegment
maximum segment size. pr_sockopt_last always one greater than the
maximum valid socket option numerator. description the prsockoption enumeration consists of all the socket options supported by nspr. the option field of prsocketoptiondata should be set to an enumerator of type prsockoption. ...
PRSocketOptionData
etsocketoption and pr_setsocketoption to specify options for file descriptors that represent sockets. syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; prsize
max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_blocking nonblocking ...
...re has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_blocking nonblocking (network) i/o. reuse_addr allow local address reuse. keep_alive periodically test whether connection is still alive. mcast_loopback ip multicast loopback. no_delay disable nagle algorithm. don't delay send to coalesce packets.
max_segment tcp
maximum segment size. recv_buffer_size receive buffer size. send_buffer_size send buffer size. linger time to linger on close if data are present in socket send buffer. add_member join an ip multicast group. drop_member leave an ip multicast group. mcast_if ip multicast interface address. description prsocketoptiondata is a name-value pair for a socket option. the opti...
PR_Init
description nspr is now implicitly initialized, usually by the first nspr function called by a program. ...
... description nspr is now implicitly initialized, usually by the first nspr function called by a program. ...
PR_Initialize
provides an alternate form of explicit initialization. in addition to establishing the sequence of operations, pr_initialize implicitly calls pr_cleanup on exiting the primordial function. syntax #include <prinit.h> printn pr_initialize( prprimordialfn prmain, printn argc, char **argv, pruintn
maxptds); parameters pr_initialize has the following parameters: prmain the function that becomes the primordial thread's root function. returning from prmain leads to termination of the process. argc the length of the argument vector, whether passed in from the host's program-launching facility or fabricated by the actual main program. this approach conforms to standard c programming practice. argv the base address of an array of strings that compromise the program's argument vec...
...main leads to termination of the process. argc the length of the argument vector, whether passed in from the host's program-launching facility or fabricated by the actual main program. this approach conforms to standard c programming practice. argv the base address of an array of strings that compromise the program's argument vector. this approach conforms to standard c programming practice.
maxptds this parameter is ignored. returns the value returned from the root function, prmain. description pr_initialize initializes the nspr runtime and places nspr between the caller and the runtime library. this allows main to be treated like any other function, signaling its completion by returning and allowing the runtime to coordinate the completion of the other threads of the runtime. pr...
PR_Listen
listens for connections on a specified socket. syntax #include <prio.h> prstatus pr_listen( prfiledesc *fd, printn backlog); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket that will be used to listen for new connections. backlog the
maximum length of the queue of pending connections. returns the function returns one of the following values: upon successful completion of listen request, pr_success. ...
...s. returns the function returns one of the following values: upon successful completion of listen request, pr_success. if unsuccessful, pr_failure. further information can be obtained by calling pr_geterror. description pr_listen turns the specified socket into a rendezvous socket. it creates a queue for pending connections and starts to listen for connection requests on the socket. the
maximum size of the queue for pending connections is specified by the backlog parameter. pending connections may be accepted by calling pr_accept. ...
PR_Writev
if it is, the function will fail and the error will be set to pr_buffer_overflow_error. ...
...if it is, the function will fail and the error will be set to pr_buffer_overflow_error. timeout a value of type printervaltime describing the time limit for completion of the entire write operation. ...
Index
f files in the meta-inf directory to conform with the jar format. for example, -b signatures causes the files to be named signatures.rsa and signatures.sf. the default is signtool. -c# specifies the compression level for the -j or -z option. the symbol # represents a number from 0 to 9, where 0 means no compression and 9 means
maximum compression. the higher the level of compression, the smaller the output but the longer the operation takes. if the -c# option is not used with either the -j or the -z option, the default compression value used by both the -j and -z options is 6. -d certdir specifies your certificate database directory; that is, the direct...
...cify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g keysize set a key size to use when generating new public and private key pairs. the minimum is 512 bits and the
maximum is 8192 bits. the default is 1024 bits. any size between the minimum and
maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slot (specifically, internal slot 2). this slot can also be explicitly named with the string "internal". an inte...
NSS 3.12.6 release notes
bug 527759: add multiple roots to nss (single patch) bug 528741: pkix_hash throws a null-argument exception on empty strings bug 530907: the peerid argument to ssl_setsockpeerid should be declared const bug 531188: decompression failure with https://livechat.
... bug 527759: add multiple roots to nss (single patch) bug 528741: pkix_hash throws a null-argument exception on empty strings bug 530907: the peerid argument to ssl_setsockpeerid should be declared const bug 531188: decompression failure with https://livechat.merlin.pl/ bug 532417: build problem w...
NSS 3.14 release notes
4_rtm/src/. the cvs tag is nss_3_14_rtm. new in nss 3.14 the sections that follow discuss specific changes in nss 3.14 in more detail. support for tls 1.1 (rfc 4346) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=565047). to better support tls 1.1 and future versions of tls, a new version range api was introduced to allow applications to specify the desired minimum and
maximum versions. these functions are intended to replace the now-deprecated use of the ssl_enable_ssl3 and ssl_enable_tls socket options. the following functions have been added to the libssl library included in nss 3.14 ssl_versionrangeget (in ssl.h) ssl_versionrangegetdefault (in ssl.h) ssl_versionrangegetsupported (in ssl.h) ssl_versionrangeset (in ssl.h) ...
...e md5 hash algorithm will now be rejected by default. support for md5 may be manually enabled (but is discouraged) by setting the environment variable of "nss_hash_alg_support=+md5" or by using the nss_setalgorithmpolicy function. note that ssl cipher suites with "md5" in their names are not disabled by this change; those cipher suites use hmac-md5, not plain md5, and are still considered safe.
maximum key sizes for rsa and diffie-hellman keys have been increased to 16k bits. command line utilities tstclnt, strsclnt, and selfserv have changed. the old options to disable ssl 2, ssl 3 and tls 1.0 have been removed and replaced with a new -v option that specifies the enabled range of protocol versions (see usage output of those tools). bugs fixed in nss 3.14 this bugzilla query returns all ...
NSS 3.27 release notes
s: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig). added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig notable changes in nss 3.27 update 2016-10-02: the
maximum tls version supported has been increased to tls 1.3 (draft). although the
maximum tls version enabled by default is still tls 1.2, there are applications that query the list of tls protocol versions supported by nss, and enable all supported versions. for those applications, updating to nss 3.27 may result in tls 1.3 (draft) to be enabled. the tls 1.3 (draft) protocol can be disabled, b...
...fault is still tls 1.2, there are applications that query the list of tls protocol versions supported by nss, and enable all supported versions. for those applications, updating to nss 3.27 may result in tls 1.3 (draft) to be enabled. the tls 1.3 (draft) protocol can be disabled, by defining symbol nss_disable_tls_1_3 when building nss. npn can not be enabled anymore. hard limits on the
maximum number of tls records encrypted with the same key are enforced. disabled renegotiation in dtls. the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha256 fingerprint: b9:be:a7:86:0a:96:2e:a3:61:1d:ab:97:ab:6d:a3:e2:1c:10:68:b9:7d:55:57:5e:d0:e1:12:79:c1:1c:89:32 cn = juur-sk, o = as sertifitseerimiskeskus sha256 fingerprint: ...
NSS 3.47 release notes
mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_rtm/src/ other releases are available in nss releases. upcoming changes to default tls configuration the next nss team plans to make two changes to the default tls configuration in nss 3.48, which will be released in early december: tls 1.3 will be the default
maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. notable changes in nss 3.47 bug 1152625 - support aes hw acceleration on armv8 bug 1267894 - allow per-socket run-time ordering of the cipher suites presented in clienthello bug 1570501 - add cmac to freebl and pkcs #11 libraries bugs fixed ...
...2625 - support aes hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 1586947 - pk11_importandreturnprivatekey does not store nickname for ec keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc
maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - n...
NSS Sample Code Utilities_1
ne for each token. ...
...pk11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print32 nb; char *pwfile = arg; int i; const long
maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the file contents will be the same */ } phrases = port_zalloc(
maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \"%s\" exists.\n", pwfile); port_free(phrases); return null; } nb = pr_read(fd, phrases,
maxpwdfilesize); pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no dat...
Utilities for nss samples
ne for each token. ...
...k11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print32 nb; char *pwfile = arg; int i; const long
maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no good retrying - the files contents will be the same */ } phrases = port_zalloc(
maxpwdfilesize); if (!phrases) { return 0; /* out of memory */ } fd = pr_open(pwfile, pr_rdonly, 0); if (!fd) { fprintf(stderr, "no password file \"%s\" exists.\n", pwfile); port_free(phrases); return null; } nb = pr_read(fd, phrases,
maxpwdfilesize); pr_close(fd); if (nb == 0) { fprintf(stderr,"password file contains no dat...
NSS functions
onfigserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.4 and later ssl_getchannelinfo mxr 3.4 and later ssl_getciphersuiteinfo mxr 3.4 and later ssl_getclientauthdatahook mxr 3.2 and later ssl_get
maxservercachelocks mxr 3.4 and later ssl_getsessionid mxr 3.2 and later ssl_getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3...
...the deprecated functions are not suppor...
SSL functions
onfigserversessionidcache mxr 3.2 and later ssl_datapending mxr 3.2 and later ssl_forcehandshake mxr 3.2 and later ssl_forcehandshakewithtimeout mxr 3.11.4 and later ssl_getchannelinfo mxr 3.4 and later ssl_getciphersuiteinfo mxr 3.4 and later ssl_getclientauthdatahook mxr 3.2 and later ssl_get
maxservercachelocks mxr 3.4 and later ssl_getsessionid mxr 3.2 and later ssl_getstatistics mxr 3.2 and later ssl_handshakecallback mxr 3.2 and later ssl_importfd mxr 3.2 and later ssl_inheritmpserversidcache mxr 3.2 and later ssl_invalidatesession mxr 3.2 and later ssl_localcertificate mxr 3...
... ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_set
maxservercachelocks mxr 3.4 and later ssl_setpkcs11pinarg mxr 3.2 and later ssl_setsockpeerid mxr 3.2 and later ssl_seturl mxr 3.2 and later ssl_shutdownserversessionidcache mxr 3.7.4 and later ...
JS_DumpHeap
is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8 debug only. dump the object graph of heap-allocated things. syntax bool js_dumpheap(jsruntime *rt, file *fp, void* startthing, jsgctracekind kind, void *thingtofind, size_t
maxdepth, void *thingtoignore); name type description cx jscontext * pointer to a js context. every jscontext is permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. startthing void * null or a pointer to a gc thing (use js::value::togcthing() to obtain a pointer to pass here). whe...
...ntime roots. when non-null, dump only things reachable from the object indicated. startkind jsgctracekind trace kind of startthing, if startthing is not null. must be jstrace_object when startthing is null. thingtofind void * null or a pointer to a gc thing. if this is non-null, js_dumpheap only dumps paths in the object graph leading to the specified thing.
maxdepth size_t the upper bound on the number of edges to descend from the graph roots. thingtoignore void * null or a pointer to a gc thing that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // sh...
Secure Development Guidelines
lite3_prepare_v2(db, str, strlen(str), &stmt, null); sqlite3_bind_text(stmt, 1, name, strlen(name), sqlite_transient); sqlite3_step(stmt); sqlite3_finalize(p_stmt); writing secure code: arithmetic issues integer overflows/underflows overflows occur when an arithmetic operation attempts to create a numeric value that is larger than can be represented within the available storage space
max + 1 will be 0 and 0 – 1 will be
max! bits
maximum value that can be represented data type 8 28-1 255 char 16 216-1 65535 short 32 232-1 4294967295 int 64 264-1 18446744073709551615 long long integer overflows/underflows example of an integer overflow int main() { unsigned int foo = 0xffffff...
...le mozilla c safe string handling apis similar to libc str*cpy and str*cat some are potentially dangerous function name comments pl_strcpy, pl_strcat these functions don't verify whether the destination buffer is large enough. pl_strncpy this function doesn't null terminate. pl_strncat this function is confusing because the size argument is the
maximum number of bytes being appended, not the size of the buffer. this can lead to security bugs. pl_strncpyz this function copies a string and guarantees null termination. pl_strcatn the size argument for this function is the size of the buffer and it guarantees zero termination. using the mozilla api mozilla c++ style strings are less prone to buffer overflows an...
History Service Design
ices of data. a places query is made of of a query object (nsinavhistoryquery) and a query options object (nsinavhistoryqueryoptions) that defines the constraints results must obey to. these objects can be directly instantiated and built, setting their attributes, but places allows a more readable and manageable form for queries: place query uris. query uris (for example place:querytype=0&sort=8&
maxresults=10) can be easily built and read by users (through a built-in advanced search builder ui) and can be bookmarked, creating a so called smart bookmark. a smart bookmark can update itself automatically when bookmarks or visits change, providing a sort of saved search. once places receives a place: uri or a query object an internal query builder checks for the requested options and make up a ...
...le on shutdown expiration of pages happens when a page is no more referenced, so there are no more visits, nor bookmarks associated with it. visits are expired based on user preferences, there is an hard limit on the minimum number of days that should be retained, visits in that range won't never expire. visits inside a slushy limit (> than the hard limit) will be removed only if we are over a
maximum number of pages we can retain, for performance issues. finally expiration can be forced by the user himself to clean up the full history or slices of it (last hour, last day, ...). see places expiration for more information. ...
Places Developer Guide
r history for the ten most visited urls in the browser history. var historyservice = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var query = historyservice.getnewquery(); var options = historyservice.getnewqueryoptions(); options.sortingmode = 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... var title = node.title; var url = node.uri; var visited = node.accesscount; var l...
...ntents of these folders are updated when expanded, executing the search against the current history and bookmarks collections. saved searches can be formulated as uris, and added to the bookmarks collection as a normal bookmark. formulation of search uris is documented here. // formulate a uri to query for the 10 most visited uris in the browser history var mostvisited = "place:querytype=0&sort=8&
maxresults=10"; // create an nsiuri for the url to be bookmarked. var bookmarkuri = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice) .newuri(mostvisited, null, null); // add the search to the bookmarks toolbar var id = bookmarks.insertbookmark(bookmarks.toolbarfolder, bookmarkuri, bookmarks.default_index, "mos...
Querying Places
ime attribute unsigned long begintimereference readonly attribute boolean hasbegintime readonly attribute prtime absolutebegintime attribute prtime endtime attribute unsigned long endtimereference readonly attribute boolean hasendtime readonly attribute prtime absoluteendtime attribute astring searchterms readonly attribute boolean hassearchterms attribute long minvisits attribute long
maxvisits attribute boolean onlybookmarked attribute boolean domainishost attribute autf8string domain readonly attribute boolean hasdomain attribute boolean uriisprefix attribute nsiuri uri readonly attribute boolean hasuri attribute boolean annotationisnot attribute autf8string annotation readonly attribute boolean hasannotation readonly attribute unsigned long foldercount basic query ...
...within one query object, all parameters are anded together. the conditions for differen...
IAccessibleAction
perform the extra steps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should also be implemented. method overview [propget] hresult description([in] long actionindex, [out] bstr description ); hresult doaction([in] long actionindex ); [propget] hresult keybinding([in] long actionindex, [in] long n
maxbindings, [out, size_is(,n
maxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); [propget] hresult localizedname([in] long actionindex, [out] bstr localizedname ); hresult nactions([out,retval] long nactions ); [propget] hresult name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object. [propge...
...t (accelerator) keys. there is no need to implement this method for single action controls since that would be redundant with the standard msaa programming practice of getting the mnemonic from get_acckeyboardshortcut. an at such as an on screen keyboard might not expose these bindings but provide alternative means of activation. [propget] hresult keybinding( [in] long actionindex, [in] long n
maxbindings, [out, size_is(,n
maxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); parameters actionindex 0 based index specifying which action's key bindings should be returned. n
maxbindings this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. keybindings an array of bstrs, allocated by the server, on...
nsIAccessibleText
ngth is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being the
maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. void getcharacterextents( in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype ); parameters offset index of the character for which to return its bounding box. the valid r...
...ngth is a special case. it represents the current input position and will therefore typically be queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being the
maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. void getrangeextents( in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype ); parameters startoffset index of the character for which to return it...
nsIAccessibleValue
accessible/public/nsiaccessiblevalue.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview boolean setcurrentvalue(in double value); obsolete since gecko 1.9 attributes attribute type description currentvalue double
maximumvalue double read only. minimumincrement double read only. minimumvalue double read only. methods setcurrentvalue() obsolete since gecko 1.9 (firefox 3) return a success condition of the value getting set. that is if the value is within the range of minimumvalue -
maximumvalue. boolean setcurrentvalue( in double value ); parameters value new value for current value. return value true if the value is within the range of minimumva...
...double read only. methods setcurrentvalue() obsolete since gecko 1.9 (firefox 3) return a success condition of the value getting set. that is if the value is within the range of minimumvalue -
maximumvalue. boolean setcurrentvalue( in double value ); parameters value new value for current value. return value true if the value is within the range of minimumvalue -
maximumvalue, false if it is not. ...
nsIMsgFolder
etch, in unsigned long anumkeys, in boolean alocalonly, in nsiurllistener aurllistener); void addkeywordstomessages(in nsisupportsarray amessages, in acstring akeywords); void removekeywordsfrommessages(in nsisupportsarray amessages, in acstring akeywords); autf8string getmsgtextfromstream(in nsimsgdbhdr amsghdr, in nsiinputstream astream, in long abytestoread, in long a
maxoutputlen, in boolean acompressquotes); attributes attribute type description supportsoffline boolean readonly offlinestoreoutputstream nsioutputstream readonly offlinestoreinputstream nsiinputstream readonly retentionsettings nsimsgretentionsettings downloadsettings nsimsgdownloadsettings ...
...rray amessages, in acstring akeywords); getmsgtextfromstream() extract the message preview text from astream, storing it as a string property on amsghdr. autf8string getmsgtextfromstream(in nsimsgdbhdr amsghdr, in nsiinputstream astream, in long abytestoread, in long a
maxoutputlen, in boolean acompressquotes); ...
nsINavHistoryQueryOptions
includehidden boolean most items in history are marked "hidden." only toplevel pages that the user sees in the url bar are not hidden. hidden things include the content of iframes and all images on web pages. normally, you don't want these things. if you do, set this flag and you'll get all items, even hidden ones. does nothing for bookmark queries. defaults to false.
maxresults long this is the
maximum number of results that you want. the query is exeucted, the results are sorted, and then the top
maxresults results are taken and returned. set to "0" (the default) to get all results. this does not work in conjunction with sorting by title. this is because sorting by title requires us to sort after using locale-sensetive sorting (as opposed to ...
... querytype short the type of search to use when querying the db; this attribute is only honored by query nodes. it is silently ignored for simple folder queries. see query type constants for possible values. ...
Component; nsIPrefBranch
ers aprefname the boolean preference to set the state of. avalue the boolean value to set the preference to. setcharpref() called to set the state of an individual string preference. note: the preferences system is not designed to store large amounts of data: all preferences are stored in a single file, which is read at the application startup. if you find yourself wondering what is the
maximum amount of data you can store in a string preference, consider storing data separately, for example in a flat file or an sqlite database. void setcharpref( in string aprefname, in string avalue ); parameters aprefname the string preference to set. avalue the string value to set the preference to. setstringpref() requires gecko 58 (firefox 58 / thunderbird 58 / seamonk...
...lue to set the preference to. setstringpref() requires gecko 58 (firefox 58 / thunderbird 58 / seamonkey 2.55) called to set the state of an individual utf-8 string preference. note: the preferences system is not designed to store large amounts of data: all preferences are stored in a single file, which is read at the application startup. if you find yourself wondering what is the
maximum amount of data you can store in a string preference, consider storing data separately, for example in a flat file or an sqlite database. void setstringpref( in string aprefname, in utf8string avalue ); parameters aprefname the string preference to set. avalue the utf-8 string value to set the preference to. setcomplexvalue() called to set the state of an individual complex pre...
nsIScriptableInputStream
s method will return a truncated string. note: it is also important to consider how a language bindings may interpret the string data type. in particular, some bindings may convert the byte values into unicode code points, by assuming the byte values are encoded as iso-latin-1. this is the case for the javascript bindings. string read( in unsigned long acount ); parameters acount the
maximum number of bytes to read from the stream. return value the data read as a string, which will be an empty string if the stream is at eof. exceptions thrown ns_error_not_initialized if init() was not called. ns_base_stream_closed if called after the stream has been closed. ns_base_stream_would_block indicates that reading from the input stream would block the calling th...
...he stream has been closed. ns_base_stream_would_block indicates that reading from the input stream would block the calling thread for an indeterminate amount of time. this exception may only be thrown if nsiinputstream.isnonblocking() returns true. readbytes() read data from the stream, including null bytes. acstring readbytes( in unsigned long acount ); parameters acount the
maximum number of bytes to read. return value the data from the stream, which will be an empty string if eof has been reached. exceptions thrown ns_error_failure if there are not enough bytes available to read acount amount of data. ns_base_stream_would_block if reading from the input stream would block the calling thread (non-blocking mode only). remarks this interface provides ja...
nsIServerSocket
in long abacklog ); parameters aport the port of the server socket. pass -1 to indicate no preference, and a port will be selected automatically. aloopbackonly if true, the server socket will only respond to connections on the local loopback interface. otherwise, it will accept connections from any interface. to specify a particular network interface, use initwithaddress(). abacklog the
maximum length to which the queue of pending connections may grow. this parameter may be silently limited by the operating system. pass -1 to use the default value. the default value is 5. native code only!initwithaddress this method initializes a server socket and binds it to a particular local address (and hence a particular local network interface). void initwithaddress( [const] in prnetaddr...
...pass -1 to use the default value. the default value is 5. native code only!initwithaddress this method initializes a server socket and binds it to a particular local address (and hence a particular local network interface). void initwithaddress( [const] in prnetaddrptr aaddr, in long abacklog ); parameters aaddr the address to which this server socket should be bound. abacklog the
maximum length the queue of pending connections may grow to. this parameter may be silently limited by the operating system. pass -1 to use the default value. the default value is 5. ...
nsISocketTransport
n value an prnetaddr containing the resolved ip address. gettimeout() retrieves a socket timeout. unsigned long gettimeout( in unsigned long atype ); parameters atype the timeout type, who's associated value should be retrieved. can be one of the constants timeout_connect or timeout_read_write. return value returns the timeout in seconds for the given type. a value of pr_uint32_
max is equivalent to no timeout. isalive() test if this socket transport is (still) connected. boolean isalive(); parameters none. return value returns true if the socket is connected. otherwise false. settimeout() sets a socket timeout. void settimeout( in unsigned long atype, in unsigned long avalue ); parameters atype the timeout type which should be set to avalue. can be one...
...one. return value returns true if the socket is connected. otherwise false. settimeout() sets a socket timeout. void settimeout( in unsigned long atype, in unsigned long avalue ); parameters atype the timeout type which should be set to avalue. can be one of the constants timeout_connect or timeout_read_write. avalue defines the timeout in seconds, pass pr_uint32_
max to specify no timeout. the implementation may truncate timeout values to a smaller range of values (for example, 0 to 0xffff). remarks this is a free-threaded interface, meaning that the methods on this interface may be called from any thread. see also nsitransport nsisockettransportservice ...
nsITelemetry
taset, in boolean asubsession, in boolean aclear); void sethistogramrecordingenabled(in acstring id, in boolean enabled); void asyncfetchtelemetrydata(in nsifetchtelemetrydatacallback acallback); double mssinceprocessstart(); void scalaradd(in acstring aname, in jsval avalue); void scalarset(in acstring aname, in jsval avalue); void scalarset
maximum(in acstring aname, in jsval avalue); jsval snapshotscalars(in uint32_t adataset, [optional] in boolean aclear); void keyedscalaradd(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset(in acstring aname, in astring akey, in jsval avalue); void keyedscalarset
maximum(in acstring aname, in astring akey, in jsval avalue); jsval sna...
...y is recording pre-release data. does not indicate whether telemetry will send any data. that is governed by user preference and other mechanisms. histogramsnapshots jsval an object containing a snapshot from all of the currently registered histograms. { name1: {data1}, name2:{data2}...} where data consists of the following properties: min - minimal bucket size
max -
maximum bucket size histogram_type - histogram_exponential or histogram_linear counts - an array representing the values of buckets in the histogram. ranges - an array with corresponding bucket sizes. sum - sum of the counts array. static - true for histograms defined in histograms.json, false for ones defined with newhistogram(). read only. constants h...
nsIThreadPool
thread pool provides a convenient way to process events off the main thread. when you send events to the thread pool, the pool creates a new thread to process the event, up to the number of threads specified by the threadlimit attribute. method overview void shutdown(); attributes attribute type description idlethreadlimit unsigned long get/set the
maximum number of idle threads that are kept alive. once there are more than this many idle worker threads, the idle threads start getting destroyed. idlethreadtimeout unsigned long get/set the amount of time in milliseconds that a thread must be idle before it becomes eligible to be destroyed. listener nsithreadpoollistener an optional listener that will be notifie...
...huttingdown() notification. the thread pool takes ownership of the listener and releases it when the shutdown() method is called. threads created after the listener is set will also take ownership of the listener so that the listener will be kept alive long enough to receive the guaranteed nsithreadpoollistener.onthreadshuttingdown() notification. threadlimit unsigned long the
maximum number of threads allowed at once in the pool; you may change this value by altering this attribute. methods shutdown() shuts down the thread pool. you must not call this method from any thread within the thread pool. instead, you should call it from another thread (typically the one that created the thread pool). when this method returns, the thread pool and all its threads will h...
nsITransactionManager
this is commonly referred to as the number of levels of undo. a value of -1 means no limit. a value of zero means the transaction manager will execute each transaction, then immediately release all references it has to the transaction without pushing it on the undo stack. a value ...
... dotransaction(in nsitransaction atransaction); void endbatch(); nsitransactionlist getredolist(); nsitransactionlist getundolist(); nsitransaction peekredostack(); nsitransaction peekundostack(); void redotransaction(); void removelistener(in nsitransactionlistener alistener); void undotransaction(); attributes attribute type description
maxtransactioncount long sets the
maximum number of transaction items the transaction manager will maintain at any time. this is commonly referred to as the number of levels of undo. a value of -1 means no limit. a value of zero means the transaction manager will execute each transaction, then immediately release all references it has to the transaction without pushing it on the undo stack. a value greater than zero indicates the
max...
nsITransport
can again be read. open_unbuffered if specified, the resulting stream may not support readsegments. readsegments is only guaranteed to be implemented when this flag is not specified. asegmentsize if open_unbuffered is not set, then this parameter specifies the size of each buffer segment (pass 0 to use default value). asegmentcount if open_unbuffered is not set, then this parameter specifies the
maximum number of buffer segments (pass 0 to use default value). return value openoutputstream() open an output stream on this transport. nsioutputstream openoutputstream( in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount ); parameters aflags optional transport specific flags. flags have the following meaning: open_blocking if specified, then the resulti...
...red if specified, the resulting stream may not support writesegments and writefrom. writesegments and writefrom are only guaranteed to be implemented when this flag is not specified. asegmentsize if open_unbuffered is not set, then this parameter specifies the size of each buffer segment (pass 0 to use default value). asegmentcount if open_unbuffered is not set, then this parameter specifies the
maximum number of buffer segments (pass 0 to use default value). return value seteventsink() set the transport event sink. void seteventsink( in nsitransporteventsink asink, in nsieventtarget aeventtarget ); parameters asink receives transport layer notifications. aeventtarget indicates the event target to which the notifications should be delivered. if null, then the notifications may occur ...
nsITreeSelection
lscriptable this interface is used by the tree widget to get information about what is selected. ...
...change. count number of rows changed. clearrange() clears the range. void clearrange( in long startindex, in long endindex ); parameters startindex index to clearing at. endindex index to stop clearing at. clearselection() clears the selection. void clearselection(); parameters none. getrangeat() returns two objects whose value properties represent the minimum and
maximum indices of the given selection range. see the tree selection tutorial. void getrangeat( in long i, out long min, out long
max ); parameters i index of range to get (0 <= i < getrangecount()) min index of first object in range.
max index of last object in this range. for single selections, min ==
max. getrangecount() returns a count of selection ra...
NS_CStringCutData
low-level api. #include "nsstringapi.h" nsresult ns_cstringcutdata( nsacstring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsacstring instance to be modified. acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. pass pr_uint32_
max to specify the length from acutstart to the end of the string. return values the ns_cstringcutdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a wrapper around ns_cstringsetdatarange . example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello world"); // remove " world" po...
...e string. return values the ns_cstringcutdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a wrapper around ns_cstringsetdatarange . example code nscstringcontainer str; ns_cstringcontainerinit(str); ns_cstringsetdata(str, "hello world"); // remove " world" portion of string ns_cstringcutdata(str, 5, pr_uint32_
max); const char* data; ns_cstringgetdata(str, &data); printf("%s\n", data); // prints out "hello" ns_cstringcontainerfinish(str); history this function was frozen for mozilla 1.7. see bug 239123 for details. see also ns_cstringsetdatarange , nsacstring ...
NS_CStringGetMutableData
ference summary the ns_cstringgetmutabledata function gives the caller write access to the string's internal buffer. #include "nsstringapi.h" pruint32 ns_cstringgetmutabledata( nsacstring& astring, pruint32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify. adatalength [in] the number of characters to resize the string's internal buffer to or pr_uint32_
max to return the buffer as-is. adata [out] upon return, if the function was successful, then *adata references the string's internal buffer. return values this function returns the number of characters contained in the string's internal buffer (excluding any null-terminator). this value will be zero if the function failed to resize its internal buffer to the size requested. remarks this function pr...
...izing it. that behavior depends on the implementation of astring. if astring is a reference to a nscstringcontainer, then its data will be null-terminated by this function. the caller is not responsible for writing a null-terminator. example // convert any uppercase ascii letters to lowercase void tolowercase(nscstring &str) { char *iter; pruint32 len = ns_cstringgetmutabledata(str, pr_uint32_
max, &iter); char *end = iter + len; while (iter != end) { char c = *iter; if (c >= 'a' && c <= 'z') *iter = c + ('a' - 'a'); ++iter; } } history this function was finalized for mozilla 1.8. see bug 288786 for details. see also ns_cstringgetdata ...
NS_StringCutData
-level api. #include "nsstringapi.h" nsresult ns_stringcutdata( nsastring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsastring instance to be modified. acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. pass pr_uint32_
max to specify the length from acutstart to the end of the string. return values the ns_stringcutdata function returns ns_ok if successful. otherwise, it returns an error code. remarks this function is defined inline as a wrapper around ns_stringsetdatarange. note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short. this example should compile by ...
...d inline as a wrapper around ns_stringsetdatarange. note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short. this example should compile by default under msvc. example code nsstringcontainer str; ns_stringcontainerinit(str); ns_stringsetdata(str, l"hello world"); // remove " world" portion of string ns_stringcutdata(str, 5, pr_uint32_
max); const prunichar* data; ns_stringgetdata(str, &data); // data now ponts to the string: l"hello" ns_stringcontainerfinish(str); history this function was frozen for mozilla 1.7. see bug 239123 for details. see also ns_stringsetdatarange, nsastring ...
Mail composition back end
pruint32 amsgsize) = 0; - the total message size for the message being sent onprogress the onprogress interface is called with progress notification on the send operation. ns_imethod onprogress(const char *amsgid, - the message id for the message being sent pruint32 aprogress, - the progress so far pruint32 aprogress
max) = 0; - the
maximum progress (aprogress should be used as a numerator and aprogress
max as a denominator for a message sent percentage) onstatus the onstatus gives the listener status updates for the current operation. ns_imethod onstatus(const char *amsgid, - the message id for the message being sent const prunichar *amsg) = 0; - a message concerni...
..._imethod onstartcopy( nsisupports *listenerdata) = 0; - the nsisupports pointer passed in to the original copy operation onprogress the onprogress interface is called with progress notification for the copy operation. ns_imethod onprogress( pruint32 aprogress, - the progress so far pruint32 aprogress
max) = 0; - the
maximum progress (aprogress should be used as a numerator and aprogress
max as a denominator for a message sent percentage) nsisupports *listenerdata) = 0; - the nsisupports pointer passed in to the original copy operation onstopcopy the onstopcopy interface is called when the copy operation has completed. this will be called in the case o...
Theme Packaging
you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the appearance section of the add-ons manager. preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the add-ons manager. it can be any size. icon.png is a 32x32 (
max. 48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager. install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:type>4</em:type> ...
...df file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this extension can install into, with minimum and
maximum supported versions. --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:
maxversion>0.9</em:
maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:descri...
Working with data
he high and low 32-bit portions and doing math on them, then joining them back together if necessary to get the complete result. you'll also have to handle carry from the low to high word and back as appropriate. for example, adding two 64-bit integers can be done like this. this example is for unsigned numbers, but a similar approach can be taken for signed values. ...
...e. for example, adding two 64-bit integers can be done like this. this example is for unsigned numbers, but a similar approach can be taken for signed values. function add(a, b) { const
max_int = math.pow(2, 32); var alo = ctypes.uint64.lo(a); var ahi = ctypes.uint64.hi(a); var blo = ctypes.uint64.lo(b); var bhi = ctypes.uint64.hi(b); var lo = alo + blo; var hi = 0; if (lo >=
max_uint) { hi = lo -
max_uint; lo -=
max_uint; } hi += (ahi + bhi); return ctypes.uint64.join(hi, lo); }; this splits each of the two source numbers into their high and low components, then adds the low 32 bits of each, handling carry into the high 32 bits. once the math is done, the two values are joined back together. join() will throw an exception if the resulting number exceeds...
CData
ontents. invalid encoded characters will be replaced by �(u+fffd). ...
...95" //"stringptr.tostring()" "ctypes.unsigned_char.ptr(ctypes.uint64("0x7f73d5c87650"))" // so as we see neither of these is 77, this is for the example of "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" // tries to do read string on stringptr, if it fails then it falls to read as jschar var readjscharstring = function() { var assumption_
max_len = known_len ? known_len : 500; var ptrasarr = ctypes.cast(stringptr, ctypes.unsigned_char.array(assumption_
max_len).ptr).contents; // must cast to unsigned char (not ctypes.jschar, or ctypes.char) as otherwise i dont get foreign characters, as they are got as negative values, and i should read till i find a 0 which is null terminator which will have unsigned_char code of 0 // can test...
Streams - Plugins
some action, such as by deleting the instance or initiating higher-priority network operations. npres_network_err: the stream failed because of problems with the network, disk i/o error, lack of memory, or some other problem. finding out how much data the plug-in can accept after a call to npp_newstream and before writing data to the plug-in, the browser calls npp_writeready to determine the
maximum number of bytes that the plug-in can consume. this function allows the browser to send only as much data to the instance as it can handle at one time, and it helps both the browser and the plug-in to use their resources efficiently. after a call to npp_newstream, in which the plug-in requested a normal-mode stream, the browser delivers the data in the stream progressively in a series of call...
...ata is copied from the browser's buffer to the plug-in's buffer, the plug-in begins to process the data asynchronously. at the next npp_writeready call, only half of the data has been processed. to avoid allocating additional buffers, the plug-in could return 4096, resulting in a call to npp_write with a buffer of up to 4k bytes. the buffer passed to npp_write may accommodate more bytes than the
maximum number returned from npp_writeready . this
maximum is only a promise to consume a certain amount of data from the buffer, not an upper limit on the buffer size. in the example above, suppose that the plug-in allocates an 8k buffer and returns 8192 from npp_writeready. if the plug-in gets 10000 bytes from the browser in a subsequent call to npp_write, the plug-in should copy the first 8192 byt...
DOM allocation example - Firefox Developer Tools
this article describes a very simple web page that we'll use to illustrate some features of the memory tool. you can try out the site at https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html. ...
...is article describes a very simple web page that we'll use to illustrate some features of the memory tool. you can try out the site at https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html. ...
AnalyserNode.minDecibels - Web APIs
representing the minimum decibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -100 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of mindecibels or lower will be returned as 0.0 or 0, respectively. note: if a value greater than analysernode.
maxdecibels is set, an index_size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js ...
...as> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.
maxdecibels = -10; ... analyser.fftsize = 256; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height...
AnalyserNode - Web APIs
dionode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations. an analysernode has exactly one input and one output. the node works even if the output is not connected. ...
... size. this generally equates to the number of data values you will have to play with for the visualization. analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getbytefrequencydata(). analysernode.
maxdecibels is a double value representing the
maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the
maximum value for the range of results when using getbytefrequencydata(). analysernode.smoothingtimeconstant is a double value representing the averaging constant with the last analysis frame — basically, it ma...
AudioBufferSourceNode.loopEnd - Web APIs
loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = ...
... loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.valu...
AudioBufferSourceNode.loopStart - Web APIs
loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = ...
... loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.valu...
AudioContext() - Web APIs
arameters options optional an object based on the audiocontextoptions dictionary that contains zero or more optional properties to configure the new context. available properties are as follows: latencyhint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred
maximum latency of the context in seconds. the user agent may or may not choose to meet this request; check the value of audiocontext.baselatency to determine the true latency after creating the context. samplerate optional the samplerate to be used by the audiocontext, specified in samples per second. the value may be any value supported by audiobuffer. if not specified, the preferred sample rate ...
... if not specified, the preferred sample rate for the context's output device is used by default. return value the newly constructed audiocontext instance. exceptions notsupportederror the specified samplerate isn't supported by the context. usage notes the specification doesn't go into a lot of detail about things like how many audio contexts a user agent should support, or minimum or
maximum latency requirements (if any), so these details can vary from browser to browser. be sure to check the values if they matter to you. in particular, the specification doesn't indicate a
maximum or minimum number of audio contexts that must be able to be open at the same time, so this is left up to the browser implementations to decide. google chrome per-tab audio context limitation in chrom...
AudioContextLatencyCategory - Web APIs
by using these strings rather than a numeric value when specifying a latency to a audiocontext, you can allow the user agent to select an appropriate latency for your use case that makes sense on the device on which your content is being used. audiocontextlatencycategory can be used when constructing a new audiocontext by passing one of these values as the latencyhint option in the audiocontext() constructor's options dictionary. ...
...io is involved in interactive elements, such as responding to user actions or needing to coincide with visual cues such as a video or game action. the user agent should select the lowest possible latency that doesn't cause glitches in the audio. this is likely to require increased power consumption. this is the default value. "playback" the user agent should select a latency that will
maximize playback time by minimizing power consumption at the expense of latency. useful for non-interactive playback, such as playing music. specifications specification status comment web audio apithe definition of 'audiocontextlatencycategory' in that specification. working draft initial definition. ...
AudioDestinationNode - Web APIs
presents the end destination of an audio graph in a given context — usually the speakers of your device. it can also be the node that will "record" the audio data when used with an offlineaudiocontext. audiodestinationnode has no output (as it is the output, no more audionode can be linked after it in the audio graph) and one input. the number of channels in the input must be between 0 and the
maxchannelcount value or an exception is raised. the audiodestinationnode of a given audiocontext can be retrieved using the audiocontext.destination property. number of inputs 1 number of outputs 0 channel count mode "explicit" channel count 2 channel interpretation "speakers" properties inherits properties from its parent, audion...
...ption is raised. the audiodestinationnode of a given audiocontext can be retrieved using the audiocontext.destination property. 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. audiodestinationnode.
maxchannelcount is an unsigned long defining the
maximum number of channels that the physical device can handle. methods no specific method; inherits methods from its parent, audionode. example there is no complex set up for using an audiodestinationnode — by default, this simply represents the output of the user's system (e.g. their speakers), so you can get it hooked up inside an audio grap...
AudioNode.channelCountMode - Web APIs
the channelcountmode 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 channelcountmode 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. in this case, channelcount is ignored and only up-mixing happens. gainnode, delaynode, scriptprocessornode, channelmergernode, biquadfilternode, waveshapernode clamped-
max the number of channels is equal to the
maximum number of channels of all connections, clamped to the value of channelcount. pannernode, convolvernode, dynamicscompressornode ...
... syntax var oscillator = audioctx.createoscillator(); oscillator.channelcountmode = 'explicit'; value a enumerated value representing a channelcountmode. ...
AudioNode - Web APIs
io has two channels. the web audio api will up-mix or down-mix the number of channels as required; check the web audio spec for details. for a list of all audio nodes, see the web audio api homepage. creating an audionode there are two ways to create an audionode: via the constuctor and via the factory method. ...
...audio api homepage. creating an audionode there are two ways to create an audionode: via the constuctor and via the factory method. // constructor const analysernode = new analysernode(audioctx, { fftsize: 2048,
maxdecibels: -25, mindecibels: -60, smoothingtimeconstant: 0.5, }); // factory method const analysernode = audioctx.createanalyser(); analysernode.fftsize = 2048; analysernode.
maxdecibels = -25; analysernode.mindecibels = -60; analysernode.smoothingtimeconstant = 0.5; you are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors: all parameters can be set during construction time and don't need to be set individually. you can sub-class an audio node. while the actual processing is done internally by the...
AudioParamDescriptor - Web APIs
the parameters property of the node, and under this name the audioworkletprocessor.process method will acquire the calculated values of this audioparam. automationrate optional either "a-rate", or "k-rate" string which represents an automation rate of this audioparam. defaults to "a-rate". minvalue optional a float which represents minimum value of the audioparam. defaults to -3.4028235e38.
maxvalue optional a float which represents
maximum value of the audioparam. defaults to 3.4028235e38. defaultvalue optional a float which represents initial value of the audioparam. defaults to 0. examples to demonstrate creation and usage of custom audioparams, we'll expand the example from audioworkletnode page. there we've created a simple node which outputs white noise. here, additionally, ...
...processor by adding a static parameterdescriptors getter. it will be used internally by the audioworkletnode constructor to populate its parameters with instantiated audioparam objects. ...
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
the parameters property of the node, and under this name the audioworkletprocessor.process method will acquire the calculated values of this audioparam. automationrate optional either "a-rate", or "k-rate" string which represents an automation rate of this audioparam. defaults to "a-rate". minvalue optional a float which represents minimum value of the audioparam. defaults to -3.4028235e38.
maxvalue optional a float which represents
maximum value of the audioparam. defaults to 3.4028235e38. defaultvalue optional a float which represents initial value of the audioparam. defaults to 0. examples to demonstrate creation and usage of custom audioparams, we'll expand the example from audioworkletnode page. there we've created a simple node which outputs white noise. here, additionally, ...
...processor by adding a static parameterdescriptors getter. it will be used internally by the audioworkletnode constructor to populate its parameters with instantiated audioparam objects. ...
BiquadFilterNode - Web APIs
dfilternode interface represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method. it is an audionode that can represent different kinds of filters, tone control devices, and graphic equalizers. a biquadfilternode always has exactly one input and one output. 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. properties inherits properties from its parent, audionode. note: though the audioparam objects returned are read-only, the values they represent are not. biquadfilternode.frequency rea...
...ss through; frequencies inside it are attenuated. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, the smaller the frequency band. not used allpass standard second-order allpass filter. it lets all frequencies through, but changes the phase-relationship between the various frequencies. the frequency with the
maximal group delay, that is, the frequency where the center of the phase transition occurs. controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used methods inherits methods from its parent, audionode. biquadfilternode.getfrequencyresponse() from the current filter parameter settings ...
CSS numeric factory functions - Web APIs
me of the method used. these functions create new numeric values less verbosely than using the cssunitvalue.cssunitvalue() constructor. ...
...umber); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.v
max() numeric factory function to create a cssunitvalue: let height = css.v
max(50); console.log( height ); // cssunitvalue {value: 50, unit: "v
max"} console.log( height.value ) // 50 console.log( height.unit ) // v
max 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.
CSSNumericValue - Web APIs
the cssnumericvalue interface of the css typed object model api represents operations that all numeric values can perform. interfaces based on cssnumericvalue below is a list of interfaces based on the cssnumericvalue interface. cssmathinvert cssmath
max cssmathmin cssmathnegate cssmathproduct cssmathsum cssmathvalue cssnumericarray cssperspective csspositionvalue cssrotate cssskew cssskeyx cssskeyw csstranslate cssunitvalue properties none. event handlers no methods cssnumericvalue.add adds a supplied number to the cssnumericvalue. cssnumericvalue.sub subtracts a supplied number from the cssnumericvalue. cssnumericvalue.mul multiplies the cssnumericvalue by the supplied value. cssnumericvalue.div divides the cssnumericvalue by the supplied value. css...
...e. event handlers no methods cssnumericvalue.add adds a supplied number to the cssnumericvalue. cssnumericvalue.sub subtracts a supplied number from the cssnumericvalue. cssnumericvalue.mul multiplies the cssnumericvalue by the supplied value. cssnumericvalue.div divides the cssnumericvalue by the supplied value. cssnumericvalue.min returns the minimum value passed cssnumericvalue.
max returns the
maximum value passed cssnumericvalue.equals true if all the values are the exact same type and value, in the same order. otherwise, false. cssnumericvalue.to converts value into another one with the specified unit. cssnumericvalue.tosum tbd cssnumericvalue.type tbd cssnumericvalue.parse allows a cssnumericvalue to be constructed directly from a string containing css. s...
CSSStyleDeclaration.setProperty() - Web APIs
mple boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px;
max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; he...
...ont-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,
max) { const num = math.floor(math.random()*(
max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrul...
Document.cookie - Web APIs
faults to the host portion of the current document location. contrary to earlier specifications, leading dots in domain names are ignored, but browsers may decline to set the cookie containing such dots. if a domain is specified, subdomains are always included. note: the domain must match the domain of the javascript origin. setting cookies to foreign domains will be silently ignored. ;
max-age=
max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year) ;expires=date-in-gmtstring-format if neither expires nor
max-age specified it will expire at the end of session. when user privacy is a concern, it's important that any web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it. many browsers let users specify that ...
...simply updating its expiration time to zero. keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. this will make each request slower. it is highly recommended for you to use whatwg dom storage if you are going to keep "client-only" data. rfc 2965 (section 5.3, "implementation limits") specifies that there should be no
maximum length of a cookie's key or value size, and encourages implementations to support arbitrarily large cookies. each browser's implementation
maximum will necessarily be different, so consult individual browser documentation. the reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (...
EXT_texture_filter_anisotropic - Web APIs
exture access when viewing a textured primitive at an oblique angle. using just mipmapping, these lookups have a tendency to average to grey. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to both, webgl1 and webgl2 contexts. constants ext.
max_texture_
max_anisotropy_ext this is the pname argument to the gl.getparameter() call, and it returns the
maximum available anisotropy. ext.texture_
max_anisotropy_ext this is the pname argument to the gl.gettexparameter() and gl.texparameterf() / gl.texparameteri() calls and sets the desired
maximum anisotropy for a texture. examples var texture = gl.createtexture(); gl.bindtexture(gl.texture...
...er() and gl.texparameterf() / gl.texparameteri() calls and sets the desired
maximum anisotropy for a texture. examples var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); var ext = ( gl.getextension('ext_texture_filter_anisotropic') || gl.getextension('moz_ext_texture_filter_anisotropic') || gl.getextension('webkit_ext_texture_filter_anisotropic') ); if (ext){ var
max = gl.getparameter(ext.
max_texture_
max_anisotropy_ext); gl.texparameterf(gl.texture_2d, ext.texture_
max_anisotropy_ext,
max); } specifications specification status comment ext_texture_filter_anisotropicthe definition of 'ext_texture_filter_anisotropic' in that specification. recommendation initial definition. ...
EffectTiming.delay - Web APIs
es.delay = delayinmilliseconds; value a number specifying the delay, in milliseconds, from the start of the animation's play cycle to the beginning of its active interval (the time index at which actual animation begins). defaults to 0. ...
... value a number specifying the delay, in milliseconds, from the start of the animation's play cycle to the beginning of its active interval (the time index at which actual animation begins). defaults to 0. ...
EffectTiming.duration - Web APIs
on of any child effects. consider using "auto" rather than 0 if that makes sense. exceptions typeerror the specified value is either a string other than "auto", a number less than zero, nan, or some other type of object entirely. ...
... using "auto" rather than 0 if that makes sense. exceptions typeerror the specified value is either a string other than "auto", a number less than zero, nan, or some other type of object entirely. ...
Element.scrollTop - Web APIs
lled upwards. // set the number of pixels scrolled. element.scrolltop = intvalue; scrolltop can be set to any integer value, with certain caveats: if the element can't be scrolled (e.g. it has no overflow or if the element has a property of "non-scrollable"), scrolltop is 0. scrolltop doesn't respond to negative values; instead, it sets itself back to 0. if set to a value greater than the
maximum available for the element, scrolltop settles itself to the
maximum value. example padding-top if you can see this, scrolltop = 0 lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. if you can see this, scroll...
...qua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. if you can see this, scrolltop is > 0 duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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. working draft ...
EventSource - Web APIs
r's web browser). that makes them an excellent choice when there's no need to send data from the client to the server in message form. for example, eventsource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like indexeddb or web storage. when not used over http/2, sse suffers from a limitation to the
maximum number of open connections, which can be specially painful when opening various tabs as the limit is per browser and set to a very low number (6). the issue has been marked as "won't fix" in chrome and firefox. this limit is per browser + domain, so that means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com. (fro...
...n be specially painful when opening various tabs as the limit is per browser and set to a very low number (6). the issue has been marked as "won't fix" in chrome and firefox. this limit is per browser + domain, so that means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com. (from stackoverflow). when using http/2, the
maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100). constructor eventsource() creates a new eventsource to handle receiving server-sent events from a specified url, optionally in credentials mode. properties this interface also inherits properties from its parent, eventtarget. eventsource.readystate read only a number representi...
Using FormData Objects - Web APIs
nformation that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...iles using formdata. ...
MediaSession.setActionHandler() - Web APIs
0; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial definition. ...
Media Session action types - Web APIs
0; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial definition. ...
MediaSessionActionDetails - Web APIs
0; // time to skip in seconds navigator.mediasession.setactionhandler('seekforward', evt => { // user clicked "seek forward" media notification icon. audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); }); navigator.mediasession.setactionhandler('seekbackward', evt => { // user clicked "seek backward" media notification icon. ...
... specifications specification status comment media session standardthe definition of 'media session action types' in that specification. draft initial definition. ...
NetworkInformation - Web APIs
essed through the connection property of the navigator interface. note: this feature is available in web workers. properties this interface also inherits properties of its parent, eventtarget. networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds. networkinformation.downlink
max read only returns the
maximum downlink speed, in megabits per second (mbps), for the underlying connection technology. networkinformation.effectivetype read only returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'. this value is determined using a combination of recently observed round-trip time and downlink values. networkinformation.rtt read only r...
...t connection, rounded to the nearest multiple of 25 milliseconds. networkinformation.savedata read only returns true if the user has set a reduced data usage option on the user agent. networkinformation.type read only returns the type of connection a device is using to communicate with the network. it will be one of the following values: bluetooth cellular ethernet none wifi wi
max other unknown event handlers networkinformation.onchange the event that's fired when connection information changes and the change is fired on this object. methods this interface also inherits methods of its parent, eventtarget. specifications specification status comment network information apithe definition of 'networkinformation' in that specifica...
PannerNode.distanceModel - Web APIs
the distancemodel 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 distancemodel.
...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.panningmodel = 'hrtf'; panner.distancemodel = '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, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener =...
PointerEvent.pressure - Web APIs
the pressure read-only property of the pointerevent interface indicates the normalized pressure of the pointer input. syntax var pressure = pointerevent.pressure; return value pressure the normalized pressure of the pointer input in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and
maximum pressure the hardware is capable of detecting, respectively. for hardware that does not support pressure, such as a mouse, the value is 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's pressure property. someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressu...
... 0.5 when the pointer is active buttons state and 0 otherwise. example in this snippet, when a pointerdown event is fired, different functions are called depending on the value of the event's pressure property. someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { //
maximum pressure process_
max_pressure(event); } else { // default process_pressure(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'pressure' in that specification. recommendation non-stable version. pointer eventsthe definition of 'pressure' in that specification. obsolete ini...
Pointer events - Web APIs
only .) pointerid a unique identifier for the pointer causing the event. width the width (magnitude on the x axis), in css pixels, of the contact geometry of the pointer. height the height (magnitude on the y axis), in css pixels, of the contact geometry of the pointer. pressure the normalized pressure of the pointer input in the range of 0 to 1, where 0 and 1 represent the minimum and
maximum pressure the hardware is capable of detecting, respectively. tangentialpressure the normalized tangential pressure of the pointer input (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control. tiltx the plane angle (in degrees, in the range of -90 to 90) between the y–z plane and the plane containing both the pointer (e.g. ...
... fired after pointer capture is released for a pointer. element extensions there are three extensions to the element interface: setpointercapture() designates a specific element as the capture target of future pointer events. releasepointercapture() this method releases (stops) pointer capture that was previously set for a specific pointer event. navigator extension the navigator.
maxtouchpoints property is used to determine the
maximum number of simultaneous touch points that are supported at any single point in time. examples this section contains examples of basic usage of using the pointer events interfaces. registering event handlers this example registers a handler for every event type for the given element. <html> <script> function over_handler(event) { } ...
RTCSctpTransport - Web APIs
ides a way to access the underlying datagram transport layer security (dtls) transport over which sctp packets for all of an rtcpeerconnection's data channels are sent and received. you don't create rtcsctptransport objects yourself; instead, you get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property. ...
...self; instead, you get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property. possibly the most useful property on this interface is its
maxmessagesize property, which you can use to determine the upper limit on the size of messages you can send over a data channel on the peer connection. properties also inherits properties from: eventtarget rtcsctptransport.
maxchannelsread only an integer value indicating the
maximum number of rtcdatachannels that can be open simultaneously. rtcsctptransport.
maxmessagesizeread only an integer value indicating the
maximum size, in bytes, of a message which can be sent using the rtcdatachannel.send() method. rtcsctptransport.stateread only a domstring enumerated value indicating the state of the sctp transport. r...
ReadableStream.cancel() - Web APIs
re = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ? ...
...see devtools for deta...
Using server-sent events - Web APIs
time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that information. when not used over http/2, sse suffers from a limitation to the
maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6). the issue has been marked as "won't fix" in chrome and firefox. this limit is per browser + domain, which means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (...
...be especially painful when opening multiple tabs, as the limit is per browser and is set to a very low number (6). the issue has been marked as "won't fix" in chrome and firefox. this limit is per browser + domain, which means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (per stackoverflow). when using http/2, the
maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100). sending events from the server the server-side script that sends events needs to respond using the mime type text/event-stream. each notification is sent as a block of text terminated by a pair of newlines. for details on the format of the event stream, see event stream format. the php c...
SpeechRecognition - Web APIs
r. speechrecognition.continuous controls whether continuous results are returned for each recognition, or only a single result. defaults to single (false.) speechrecognition.interimresults controls whether interim results should be returned (true) or not (false.) interim results are results that are not yet final (e.g. the speechrecognitionresult.isfinal property is false.) speechrecognition.
maxalternatives sets the
maximum number of speechrecognitionalternatives provided per result. the default value is 1. speechrecognition.serviceuri specifies the location of the speech recognition service used by the current speechrecognition to handle the actual recognition. the default is the user agent's default speech service. methods speechrecognition also inherits methods from its paren...
...on | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.
maxalternatives = 1; var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.backgroundcolor = ...
Storage API - Web APIs
he storage standard and interacted with using the storage api consists of a single site storage unit for each origin. in essence, every web site or web application has its own storage unit into which its data gets placed. the diagram below shows a site storage pool with three storage units within, showing how storage units can have different data types stored within and may have different quotas (
maximum storage limits). origin 1 has some web storage data as well as some indexeddb data, but also has some free space left; its current usage hasn't yet reached its quota. origin 2 has no data stored in it yet; it's just an empty box waiting for content. this origin, however, has a lower quota than the other two do. it may be a less-visited site, or one known to have lower data storage requi...
...on't be cleared by the user agent without either the data's origin itself or the user specifically doing so. this includes scenarios such as the user selecting a "clear caches" or "clear recent history" option. the user will be asked specifically for permission to remove persistent site storage units. quotas and usage estimates the user agent determines, using whatever mechanism it chooses, the
maximum amount of storage a given site can use. this
maximum is the origin's quota. the amount of this space which is in use by the site is called its usage. both of these values are estimates; there are several reasons why they're not precise: user agents are encouraged to obscure the exact size of the data used by a given origin, to prevent these values from being used for fingerprinting purpose...
Touch.force - Web APIs
a value of 0.0 is returned if no value is known (for example the touch device does not support this property). ...
...the force value of each touch point but the code could invoke different processing depending on the value. someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force. for (var i=0; i < e.targettouches.length; i++) { // add code to "switch" based on the force value. for example // minimum pressure vs.
maximum pressure could result in // different handling of the user's input. console.log("targettouches[" + i + "].force = " + e.targettouches[i].force); } }, false); specifications specification status comment touch events – level 2 draft initial definition. ...
validityState.tooLong - Web APIs
specifications specification status comment html living standardthe definition of 'validitystate.toolong' in that specification. ...
... specifications specification status comment html living standardthe definition of 'validitystate.toolong' in that specification. ...
ValidityState - Web APIs
the element's custom validity message has been set to a non-empty string by calling the element's setcustomvalidity() method. patternmismatch read only a boolean that is true if the value does not match the specified pattern, and false if it does match. if true, the element matches the :invalid css pseudo-class. rangeoverflow read only a boolean that is true if the value is greater than the
maximum specified by the
max attribute, or false if it is less than or equal to the
maximum. if true, the element matches the :invalid and :out-of-range and css pseudo-classes. rangeunderflow read only a boolean that is true if the value is less than the minimum specified by the min attribute, or false if it is greater than or equal to the minimum. if true, the element matches the :invalid and :ou...
...f-range css pseudo-classes. stepmismatch read only a boolean that is true if the value does not fit the rules determined by the step attribute (that is, it's not evenly divisible by the step value), or false if it does fit the step rule. if true, the element matches the :invalid and :out-of-range css pseudo-classes. toolong read only a boolean that is true if the value exceeds the specified
maxlength for htmlinputelement or htmltextareaelement objects, or false if its length is less than or equal to the
maximum length. note: this property is never true in gecko, because elements' values are prevented from being longer than
maxlength. if true, the element matches the the :invalid and :out-of-range css pseudo-classes. tooshort read only a boolean that is true if the value fails to meet...
WebGLRenderingContext.activeTexture() - Web APIs
the webglrenderingcontext.activetexture() method of the webgl api specifies which texture unit to make active. syntax void gl.activetexture(texture); parameters texture the texture unit to make active. the value is a gl.texturei where i is within the range from 0 to gl.
max_combined_texture_image_units - 1. return value none. exceptions if texture is not one of gl.texturei, where i is within the range from 0 to gl.
max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. ...
...i, where i is within the range from 0 to gl.
max_combined_texture_image_units - 1, a gl.invalid_enum error is thrown. examples the following call selects gl.texture1 as the current texture. subsequent calls that modify the texture state will affect this texture. gl.activetexture(gl.texture1); the number of texture units is implementation dependent, you can get this number with the help of the
max_combined_texture_image_units constant. it is, per specification, at least 8. gl.getparameter(gl.
max_combined_texture_image_units); to get the active texture, query the active_texture constant. gl.activetexture(gl.texture0); gl.getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status comment webgl 1.0the...
WebGLRenderingContext.blendEquation() - Web APIs
d equation determines how a new pixel is combined with a pixel already in the webglframebuffer. syntax void gl.blendequation(mode); parameters mode a glenum specifying how source and destination colors are combined. must be either: gl.func_add: source + destination, gl.func_subtract: source - destination, gl.func_reverse_subtract: destination - source when using the ext_blend_min
max extension: ext.min_ext: minimum of source and destination, ext.
max_ext:
maximum of source and destination. when using a webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.
max:
maximum of source and destination. default value: gl.func_add exception if mode is not one of the three possible ...
...num error is thrown. return value none. examples to set the blend equation, use: gl.blendequation(gl.func_add); gl.blendequation(gl.func_subtract); gl.blendequation(gl.func_reverse_subtract); to get the blend equations, query the blend_equation, blend_equation_rgb and blend_equation_alpha constants which return gl.func_add, gl.func_subtract, gl.func_reverse_subtract, or if the ext_blend_min
max is enabled: ext.min_ext or ext.
max_ext. gl.getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status comment webgl 1.0the definition of 'blendequation' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of...
WebGLRenderingContext.getSupportedExtensions() - Web APIs
ngcontext.getsupportedextensions() method returns a list of all the supported webgl extensions. syntax gl.getsupportedextensions(); return value an array of strings with all the supported webgl extensions. ...
...= canvas.getcontext('webgl'); var extensions = gl.getsupportedextensions(); // array [ 'angle_instanced_arrays', 'ext_blend_min
max', ... ] see also the webglrenderingcontext.getextension() method to get a specific extension object. webgl extensions extensions for the webgl api are registered in the webgl extension registry. ...
WebGLRenderingContext.getTexParameter() - Web APIs
glenum wrapping function for texture coordinate s gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t glenum wrapping function for texture coordinate t gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.texture_
max_anisotropy_ext glfloat
maximum anisotropy for a texture any float values. additionally available when using a webgl 2 context gl.texture_base_level glint texture mipmap level any int values. gl.texture_compare_func glenum comparison function gl.lequal (default value), gl.gequal, gl.less, gl.greater, gl.equal, gl.notequal, gl.
...r, gl.equal, gl.notequal, gl.always, gl.never. gl.texture_compare_mode glenum texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_immutable_format glboolean immutability of the texture format and size true or false. gl.texture_immutable_levels gluint ? any uint values. gl.texture_
max_level glint
maximum texture mipmap array level any int values. gl.texture_
max_lod glfloat texture
maximum level-of-detail value any float values. gl.texture_min_lod glfloat texture minimum level-of-detail value any float values. gl.texture_wrap_r glenum wrapping function for texture coordinate r gl.repeat (default...
WebGLRenderingContext.stencilOp() - Web APIs
passes and there is no depth buffer or depth testing is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. ...
...ent value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the
maximum representable unsigned value. gl.incr_wrap increments the current stencil buffer value. wraps stencil buffer value to zero when incrementing the
maximum representable unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_wrap decrements the current stencil buffer value. wraps stencil buffer value to the
maximum representable unsigned value when decrementing a stencil buffer value of 0. gl.invert inverts the current stencil buffer value bitwise. examples the stencil testing is disabled by default. t...
WebGLRenderingContext.stencilOpSeparate() - Web APIs
passes and there is no depth buffer or depth testing is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. ...
...ent value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the
maximum representable unsigned value. gl.incr_wrap increments the current stencil buffer value. wraps stencil buffer value to zero when incrementing the
maximum representable unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_wrap decrements the current stencil buffer value. wraps stencil buffer value to the
maximum representable unsigned value when decrementing a stencil buffer value of 0. gl.invert inverts the current stencil buffer value bitwise. examples the stencil testing is disabled by default. t...
WebGLRenderingContext.texParameter[fi]() - Web APIs
ap_linear. gl.texture_wrap_s wrapping function for texture coordinate s gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. gl.texture_wrap_t wrapping function for texture coordinate t gl.repeat (default value),gl.clamp_to_edge, gl.mirrored_repeat. additionally available when using the ext_texture_filter_anisotropic extension ext.texture_
max_anisotropy_ext
maximum anisotropy for a texture a glfloat value. additionally available when using a webgl 2 context gl.texture_base_level texture mipmap level any int values. gl.texture_compare_func texture comparison function gl.lequal (default value), gl.gequal, gl.less, gl.greater, gl.equal, gl.notequal, gl.always, gl.never. gl.texture_com...
...ng a webgl 2 context gl.texture_base_level texture mipmap level any int values. gl.texture_compare_func texture comparison function gl.lequal (default value), gl.gequal, gl.less, gl.greater, gl.equal, gl.notequal, gl.always, gl.never. gl.texture_compare_mode texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_
max_level
maximum texture mipmap array level any int values. gl.texture_
max_lod texture
maximum level-of-detail value any float values. gl.texture_min_lod texture minimum level-of-detail value any float values. gl.texture_wrap_r wrapping function for texture coordinate r gl.repeat (default value), gl.clamp_to_edge, gl.mirrored_repeat. return v...
WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecisionformat interface is part of the webgl api and represents the information returned by calling the webglrenderingcontext.getshaderprecisionformat() method. properties webglshaderprecisionformat.rangemin read only the base 2 log of the absolute value of the minimum value that can be represented. webglshaderprecisionformat.range
max read only the base 2 log of the absolute value of the
maximum value that can be represented. webglshaderprecisionformat.precision read only the number of bits of precision that can be represented. for integer formats this value is always 0. examples a webglshaderprecisionformat object is returned by the webglrenderingcontext.getshaderprecisionformat() method. var canvas = document.getelementbyid('canvas'); var gl = canvas.getcon...
...sion that can be represented. for integer formats this value is always 0. examples a webglshaderprecisionformat object is returned by the webglrenderingcontext.getshaderprecisionformat() method. var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, range
max: 127, precision: 23 } specifications specification status comment webgl 1.0the definition of 'webglshaderprecisionformat' in that specification. recommendation initial definition. ...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
of view (fov). the field of view is an angle defining the length of the arc on the entire viewable area surrounding the camera that should be visible at once. this is an effect of the focal length in a physical camera, so since there is no true camera, altering the fov is a passable substitute. recall that the circumference of a circle is 2π⋅r radians (360°); as such, this is the theoretical
maximum fov. realistically, though, not only do humans not see anywhere near that much, but viewing devices such as monitors and vr goggles tend to reduce the field of view even further. human eyes typically have a horizontal field of view of around 135° (about 2.356 radians) and a vertical fov of about 180° (π or around 3.142 radians). making the camera's fov smaller reduces the arc that will be...
...ich nothing gets drawn. any vertices which lie on the same side of that plane as the camera are not drawn. conversely, the far clipping plane is the distance in meters to a plane beyond which no vertices are drawn. to zoom using a scaling factor or percentage, you can map 1x (100% of normal size) to the largest value of fov you allow (which leads to the most content being visible), then map your
maximum magnification to the
maximum value of fov you support and map corresponding values in between. if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's desired geometry. for example: const transform = createperspectivematrix(viewport, 130, 1, 100); const tr...
Rendering and the WebXR frame animation callback - Web APIs
of different names, but they're all equivalent or nearly so: refresh rate vertical refresh rate vertical blanking rate (vbl) vertical sync rate vertical refresh rate there are other similar terms used as well, but regardless of what it's called, the unit of measurement applied is the hertz, or hz. a display that refreshes 60 times per second has a 60 hz refresh rate. that means that the
maximum number of frames it can display in a second is 60. no matter how many frames per second you render beyond that, only 60 of them will make it to the screen in the course of a second. but not all displays run at 60 hz; nowadays, higher performance displays are beginning to use much higher refresh rates. 120 hz—or 120 frame per second—displays are increasingly common, for example. the brows...
... of them will make it to the screen in the course of a second. but not all displays run at 60 hz; nowadays, higher performance displays are beginning to use much higher refresh rates. 120 hz—or 120 frame per second—displays are increasingly common, for example. the browser always tries to refresh at the same rate as the display, which means that on some computers, your callback will be run a
maximum of 60 times per second, while on others it might be called 90 or 120 times per second or even more, depending on the frame rate. time available to render each frame this makes using the most of the time available between frames critical. if the user's device is using a 60 hz display, your callback will be called up to 60 times per second, and your goal is to do what you can to ensure that i...
Using the Web Audio API - Web APIs
context.creategain(); now we have to update our audio graph from before, so the input is connected to the gain, then the gain node is connected to the destination: track.connect(gainnode).connect(audiocontext.destination); this will make our audio graph look like this: the default value for gain is 1; this keeps the current volume the same. gain can be set to a minimum of about -3.4 and a
max of about 3.4. here we'll allow the boombox to move the gain up to 2 (double the original volume) and down to 0 (this will effectively mute our sound). let's give the user control to do this — we'll use a range input: <input type="range" id="volume" min="0"
max="2" value="1" step="0.01"> note: range inputs are a really handy input type for updating values on audio nodes. you can specify a r...
...ptions = { pan: 0 }; const panner = new stereopannernode(audiocontext, panneroptions); note: the constructor method of creating nodes is not supported by all browsers at this time. the older factory methods are supported more widely. here our values range from -1 (far left) and 1 (far right). ...
Window.matchMedia() - Web APIs
he value of the matches property, which will be true if the document meets the media query's requirements. if you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object. there's a good example of this in the article on window.devicepixelratio. ...
... of this in the article on window.devicepixelratio. examples this example runs the media query (
max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that. javascript let mql = window.matchmedia('(
max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded. html <span class="mq-value"></span> ...
Window.pageYOffset - Web APIs
proin in gravida libero. vivamus placerat, lacus eget condimentum sagittis, enim nunc bibendum nisi, quis varius erat felis sit amet risus.</p> <p>sed non finibus ligula. fusce a magna auctor, molestie nibh eget, sodales felis. donec imperdiet facilisis mi ut aliquam. etiam sodales suscipit urna, eget hendrerit neque elementum a. vivamus fringilla sodales est ut ultricies. nulla convallis congue
maximus. nullam consectetur felis vitae ultricies accumsan. mauris at aliquam felis. mauris efficitur tellus massa, id ullamcorper ipsum fermentum eu. aenean mollis dignissim ultrices. nunc gravida, sem sit amet lobortis iaculis, dolor ligula convallis nibh, id condimentum metus libero nec odio. quisque nec ante pretium, viverra neque nec, facilisis risus. duis condimentum sapien non felis cursus bla...
...w calling getelementbyid() on the frame's htmliframeelement.contentdocument. with the target element in hand, we set the scrolltop of the frame's scrollingelement to the offsettop of the target element. by doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element. this will automatically set the scrolling position to the
maximum possible value if the attempted scroll would exceed the
maximum. this prevents us from falling off the edge of the document. nobody wants to know what's out there. there might be dragons. css iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "open sans", "helvetica", "arial"; } result the result follows. note that the frame'...
Window - Web APIs
izontal distance from the left border of the user's browser viewport to the left side of the screen. window.screeny and window.screentop read only both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen. window.scrollbars read only returns the scrollbars object, whose visibility can be toggled in the window. window.scroll
maxx read only the
maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width. window.scroll
maxy read only the
maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height). window.scrollx read only returns the number of pixels that the document has already been scrolled horizonta...
...omputed style indicates the computed values of all css properties of the element. window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets. window.getselection() returns the selection object representing the selected item(s). window.matchmedia() returns a mediaquerylist object representing the specified media query string. window.
maximize() fixme: needscontents window.minimize() (top-level xul windows only) minimizes the window. window.moveby() moves the current window by a specified amount. window.moveto() moves the window to the specified coordinates. window.open() opens a new window. window.postmessage() provides a secure means for one window to send a string of data to another window, which need not be within t...
ARIA live regions - Accessibility
for the planet finally chosen. here is a screenshot of voiceover on mac announcing the update (via subtitles) to the live region: preferring specialized live region roles in the following well-known predefined cases it is better to use a specific provided "live region role": role description compatibility notes log chat, error, game or other type of log to
maximize compatibility, add a redundant aria-live="polite" when using this role. status a status bar or area of the screen that provides an updated status of some kind. screen reader users have a special command to read the current status. to
maximize compatibility, add a redundant aria-live="polite" when using this role. alert error or warning message that flashes on the s...
...ides an updated status of some kind. screen reader users have a special command to read the current status. to
maximize compatibility, add a redundant aria-live="polite" when using this role. alert error or warning message that flashes on the screen. alerts are particularly important for client side validation notices to users. (tbd: link to aria form tutorial with aria info) to
maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. however, adding both aria-live and role="alert" causes double speaking issues in voiceover on ios. progressbar a hybrid between a widget and a live region. use this with aria-valuemin, aria-valuenow and aria-value
max. (tbd: add more info here). marquee for text whic...
ARIA Test Cases - Accessibility
the live region markup should not affect how the progress updates are presented. (al) if the screen reader provides a keystroke to announce the current progress, this should work with an aria progressbar as well. jaws - jaws announces the level of progress at each time interval the user selects in jaws configuration. ...
...r as a single entity, and any images or text that create the sliders appearance are not presented to the user separately. ...
Robust - Accessibility
, including assistive technologies. this can generally be achieved by following web standards and testing rigorously. note: to read the w3c definitions for robust and its guidelines and success criteria, see principle 4: robust — content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. guideline 4.1 — compatible:
maximize compatibility with current and future user agents, including assistive technologies this guideline focuses on making content as compatible as possible, not only with current user agents (e.g. browsers), but also with future ones too. success criteria how to conform to the criteria practical resource 4.1.1 parsing (a) content should be well-formed so it c...
...ghted mouse users, but also by screenreader users, keyboard-only users, etc. see html: a good basis for accessibility and wai-aria basics. 4.1.3 status messages (aa) added in 2.1 assistive technology users are made aware of new status messages added to the page. understanding status messages note: also see the wcag description for guideline 4.1: compatible:
maximize compatibility with current and future user agents, including assistive technologies. see also wcag perceivable operable understandable robust ...
:-moz-only-whitespace - CSS: Cascading Style Sheets
ctor was changed to act like :-moz-only-whitespace, but no browser currently supports this yet. the :-moz-only-whitespace css pseudo-class matches elements that only contains text nodes that only contain whitespace. ...
...act like :-moz-only-whitespace, but no browser currently supports this yet. the :-moz-only-whitespace css pseudo-class matches elements that only contains text nodes that only contain whitespace. (this includes elements with empty text nodes and elements with no child nodes.) syntax syntax not found in db! examples html <div> </div> css :root { overflow: hidden;
max-width: 100vw;
max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <input>. ...
:in-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is inside that range */ input:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. ...
...ted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...
:out-of-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. ...
...note: this pseudo-class only applies to elements that have (and can take) a range limitation. ...
height - CSS: Cascading Style Sheets
the height css media feature can be used to apply styles based on the height of the viewport (or the page box, for paged media). syntax the height feature is specified as a <length> value representing the viewport height. it is a range feature, meaning that you can also use the prefixed min-height and
max-height variants to query minimum and
maximum values, respectively. ...
...nge feature, meaning that you can also use the prefixed min-height and
max-height variants to query minimum and
maximum values, respectively. examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /*
maximum height */ @media (
max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'height' in that specification. candidate recommendation the value can now be negative, in which case it computes to false. media queriesthe definition of 'height' in that spe...
resolution - CSS: Cascading Style Sheets
the resolution css media feature can be used to test the pixel density of the output device. syntax the resolution feature is specified as a <resolution> value representing the pixel density of the output device. it is a range feature, meaning that you can also use the prefixed min-resolution and
max-resolution variants to query minimum and
maximum values, respectively. ...
...ning that you can also use the prefixed min-resolution and
max-resolution variants to query minimum and
maximum values, respectively. examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /*
maximum resolution */ @media (
max-resolution: 300dpi) { p { background: yellow; } } result specifications specification status comment media queriesthe definition of 'resolution' in that specification. recommendation initial definition. ...
width - CSS: Cascading Style Sheets
the width css media feature can be used to test the width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and
max-width variants to query minimum and
maximum values, respectively. ...
...is a range feature, meaning that you can also use the prefixed min-width and
max-width variants to query minimum and
maximum values, respectively. examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /*
maximum width */ @media (
max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'width' in that specification. candidate recommendation the value can now be negative, in which case it computes to false. media queriesthe definition of 'width' in that specifi...
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
ent of the element, such as text, an image, or a video player. its dimensions are the content width (or content-box width) and the content height (or content-box height). it often has a background color or background image. if the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width,
max-width, height, min-height, and
max-height properties. the padding area, bounded by the padding edge, extends the content area to include the element's padding. its dimensions are the padding-box width and the padding-box height. the thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties. the border area, bounded ...
...ies. the border area, bounded by the border edge, extends the padding area to include the element's borders. its dimensions are the border-box width and the border-box height. the thickness of the borders are determined by the border-width and shorthand border properties. if the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width,
max-width, height, min-height, and
max-height properties. when there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). this default behavior can be altered with the background-clip css property. the margin area, bounded by the margin edge, extends the border area to include an empty area...
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. ...
... 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. ...
Logical properties for sizing - CSS: Cascading Style Sheets
ou 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. logical property physical property inline-size width block-size height min-inline-size min-width min-block-size min-height
max-inline-size
max-width
max-block-size
max-height width and height example the logical mappings for width and height are inline-size, which sets the length in the inline dimension and block-size, which sets the length in the block dimension. when working in english, replacing width with inline-size and height with block-size will give the same layout. in the live example bel...
... are also mappings for min-width and min-height — these are min-inline-size and min-block-size. these work in the same way as the inline-size and block-size properties, but setting a minimum rather than a fixed size. try changing the example below to vertical-rl, as with the first example, to see the effect it has. i am using min-height in the first example and min-block-size in the second.
max-width and
max-height example finally you can use
max-inline-size and
max-block-size as logical replacements for
max-width and
max-height. try playing with the below example in the same way as before. logical keywords for resize the resize property sets whether or not an item can be resized and has physical values of horizontal and vertical. the resize property also has logical keyword values...
CSS Logical Properties and Values - CSS: Cascading Style Sheets
n in vertical writing modes. for standard english text, it is the vertical dimension. 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. for standard english text, it is the horizontal dimension. ...
...iting modes. for standard english text, it is the vertical dimension. 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. for standard english text, it is the horizontal dimension. ...
Recipe: Media objects - CSS: Cascading Style Sheets
ade i have chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when i need to. this means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object. another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by using fit-content with a
maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the
max-content size. if the image is larger, the track stops growing at 200 pixels and as the image has a
max-width of 100% applied, it scales down so that it continues to fit inside the column. by using grid-template-areas to achieve the layout, i can see the pattern...
... an option for the pattern is to flip it to switch the image to the other side — this is done by adding the media-flip class, which defines a flipped grid template causing the layout to be mirrored. ...
Microsoft CSS extensions - CSS: Cascading Style Sheets
xplorer support a number of special microsoft extensions to css. these extensions are prefixed with -ms-. microsoft-only properties (avoid using on websites) note: these properties will only work in microsoft applications, and are not on a standards track. ...
...imit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-
max -ms-scroll-limit-x-min -ms-scroll-limit-y-
max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-margin -ms-wrap-through zoom pseudo-elements ::-ms-browse ::-ms-check ::-ms-clear ::-ms-expand ::-ms-fill ::-ms-fill-l...
CSS reference - CSS: Cascading Style Sheets
marginmargin-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-size
max-height
max-height (@viewport)
max-inline-size
max-width
max-width (@viewport)
max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)min
max()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffse...
... basic selectors basic selectors are fundamental selectors; these are the most basic selectors that are frequently com...
Viewport concepts - CSS: Cascading Style Sheets
lso has an internal coordinate system defined via the viewbox attribute, which is not related to this viewport discussion. if you include an svg file in your html, the viewport of the svg is the initial containing block, or the width and height of the svg container. using the @media query in your svg's css is relative to that container, not the browser. @media screen and (min-width: 400px) and (
max-width: 500px) { /* css goes here */ } generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. the width media query in the svg is based on the element in which the svg is contained — the <img> if the source is an svg file, the svg itself if the svg is included directly into the html, or the ...
...e the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=device-width"> the width property controls the size of the viewport. it should preferably be set to device-width, which is the width of the screen in css pixels at a scale of 100%. there are other properties, including
maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted. see also @viewport css at-rule visual viewport api <meta>, specifically <meta name="viewport"> using the viewport meta tag to control layout on mobile browsers ...
WebKit CSS extensions - CSS: Cascading Style Sheets
ebkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -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...
...has been standardized. property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to
maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. 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-a...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
. -moz-win-communications-toolbox firefox removed in firefox 64. -moz-win-exclude-glass firefox removed in firefox 64. -moz-win-glass firefox removed in firefox 64. -moz-win-media-toolbox firefox removed in firefox 64. -moz-window-button-box firefox removed in firefox 64. -moz-window-button-box-
maximized firefox removed in firefox 64. -moz-window-button-close firefox removed in firefox 64. -moz-window-button-
maximize firefox removed in firefox 64. -moz-window-button-minimize firefox removed in firefox 64. -moz-window-button-restore firefox removed in firefox 64. -moz-window-frame-bottom fir...
... -moz-window-button-restore firefox removed in firefox 64. -moz-window-frame-bottom firefox removed in firefox 64. -moz-window-frame-left firefox removed in firefox 64. -moz-window-frame-right firefox removed in firefox 64. -moz-window-titlebar firefox removed in firefox 64. -moz-window-titlebar-
maximized firefox removed in firefox 64. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | ...
attr() - CSS: Cascading Style Sheets
nit (e.g. 12.5em). if it is not valid, that is not a length or out of the range accepted by the css property, the default value is used. if the given unit is a relative length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. em, ex, px, rem, vw, vh, vmin, v
max, mm, cm, in, pt, or pc <length> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. if the given unit is a relative length, attr() computes it to an absolute length. leadi...
... be used if the associated attribute is missing or contains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...
backdrop-filter - CSS: Cascading Style Sheets
ge> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
border-image-slice - CSS: Cascading Style Sheets
s the width of the border. the sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
...nless of course you use an svg image). ...
<filter-function> - CSS: Cascading Style Sheets
put'); const output = document.queryselector('output'); const curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.
max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.
max = 4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.
max = 40; sl...
...saturate') { slider.value = 1; slider.min = 0; slider.
max = 4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.
max = 40; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'opacity') { slider.value = 1; slider.min = 0; slider.
max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { slider.value = 0; slider.min = 0; slider.
max = 1; slider.step = 0.01; slider.setattribute('data-unit', ''); } else if(filter === 'hue-rotate') { slider.value = 0; slider.min = 0; slider.
max = 360; slider.ste...
flex-basis - CSS: Cascading Style Sheets
project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis:
max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>. values <'width'> an absolute <length>, a <percentage> of the parent flex container's m...
...: #6ab6d8; padding: 10px; margin-bottom: 50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10px; width: 100%; color: #333; font-size: 12px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis:
max-content; } .flex2:after { content: '
max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications ...
font-style - CSS: Cascading Style Sheets
variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. see font-variation-settings. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>. ...
...amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container {
max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body {
max-height: 100vh;
max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.querys...
font-weight - CSS: Cascading Style Sheets
e designer a much closer degree of control over the chosen weight. for truetype or opentype variable fonts, the "wght" variation is used to implement varying widths. for the example below to work, you'll need a browser that supports the css fonts level 4 syntax in which font-weight can be any number between 1 and 1000. ...
...r sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container {
max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body {
max-height: 100vh;
max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let w...
<length> - CSS: Cascading Style Sheets
ht of the viewport's initial containing block. vw equal to 1% of the width of the viewport's initial containing block. vi equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis. vb equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis. vmin equal to the smaller of vw and vh. v
max equal to the larger of vw and vh. absolute length units absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. this is done by anchoring one of the units to a physical unit, and then defining the others relative to it. the anchor is done differently for low-resolution devices, such as screens, versus high-r...
...s(); }) result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification. editor's draft adds the vi, vb, ic, lh, and rlh units. css values and units module level 3the definition of '<length>' in that specification. candidate recommendation adds the ch, rem, vw, vh, vmin, v
max, and q units. css level 2 (revision 1)the definition of '<length>' in that specification. recommendation explicit definition of the em, pt, pc, and px units. css level 1the definition of '<length>' in that specification. recommendation initial definition. implicit definition of the em, pt, pc, and px units. ...
place-content - CSS: Cascading Style Sheets
e alignment container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. ...
... container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. ...
position - CSS: Cascading Style Sheets
ellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. nam vitae iaculis elit. aliquam mollis interdum libero. sed sodales placerat egestas. vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. sed velit augue, pretium a sem aliquam, congue porttitor tortor. sed tempor nisl a lorem consequat, id
maximus erat aliquet. sed sagittis porta libero sed condimentum. aliquam finibus lectus nec ante congue rutrum. curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nam congue tortor eget pulvinar lobortis. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; nam ac do...
...ellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. nam vitae iaculis elit. aliquam mollis interdum libero. sed sodales placerat egestas. vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. sed velit augue, pretium a sem aliquam, congue porttitor tortor. sed tempor nisl a lorem consequat, id
maximus erat aliquet. sed sagittis porta libero sed condimentum. aliquam finibus lectus nec ante congue rutrum. curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top: 80px; left: 10px; background: blue; } .out...
word-spacing - CSS: Cascading Style Sheets
e all font families automatically maintain their legibility. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and
maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification. working draft replaces the pr...
...e <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification. working draft replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <percentage> value. allows up to three values describing the optimum, minimum, and
maximum value. css level 2 (revision 1)the definition of 'word-spacing' in that specification. recommendation no change. css level 1the definition of 'word-spacing' in that specification. recommendation initial definition. ...
Rich-Text Editing in Mozilla - Developer guides
option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">
maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this...
...nk" title="remove formatting" onclick="formatdoc('removeformat')" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaaoxaaadsqblssogwaaaad0su1fb9oecqmckpi8ciiaaaaidevydenvbw1lbnqa9sywvwaaauhjrefuomtjybgfxab501zwbvval2nhnlmk6mxcjbf69zu+hz/9fb5o1lx+bg45qhl8/fyr5it3xrp/ywtuvvvk3veqgxz70tvbjy8+wv39+2/hz19/mgwjzzutyjaluobv9ji
maxheyd3h7ku8fpj2icml8z92dlbtmzdeig3fco7j08foh1kurkm3e9iw54yvkwutuom+lpt/bgbwf3//sf37/1/c02ccg1lb8f//f95dzx74mtmzshhosm6szrq/a6ir/z2rkfejbxulyfpdidi6af///2ckahbp7+7wmavp5n76+p2clrliyl8h9w36aujcbcxm4szmtjac7kza////r3h1w2cfwagafpbqs5g7d95++/p1b4+eck8tawmdw/1h7159+/7r7zcvpz4fohbzewmdwx8gbgagnnatfhzx8zqrj+4vjbh5cqegoyseua/v3n7hxmqi8wugbgygl3vvg7fupk3i5gd9/fja7zsmdazmg/ze52mzesj4yu1xeq/ff7w5dvfvas1lsxc4db...
Making content editable - Developer guides
option> </select> <select onchange="formatdoc('fontsize',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">
maximum</option> </select> <select onchange="formatdoc('forecolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- color -</option> <option value="red">red</option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this...
...nk" title="remove formatting" onclick="formatdoc('removeformat')" src="data:image/png;base64,ivborw0kggoaaaansuheugaaabyaaaawcayaaadetgw7aaaabgdbtueaalgpc/xhbqaaaazis0deap8a/wd/ol2nkwaaaalwsflzaaaoxaaadsqblssogwaaaad0su1fb9oecqmckpi8ciiaaaaidevydenvbw1lbnqa9sywvwaaauhjrefuomtjybgfxab501zwbvval2nhnlmk6mxcjbf69zu+hz/9fb5o1lx+bg45qhl8/fyr5it3xrp/ywtuvvvk3veqgxz70tvbjy8+wv39+2/hz19/mgwjzzutyjaluobv9ji
maxheyd3h7ku8fpj2icml8z92dlbtmzdeig3fco7j08foh1kurkm3e9iw54yvkwutuom+lpt/bgbwf3//sf37/1/c02ccg1lb8f//f95dzx74mtmzshhosm6szrq/a6ir/z2rkfejbxulyfpdidi6af///2ckahbp7+7wmavp5n76+p2clrliyl8h9w36aujcbcxm4szmtjac7kza////r3h1w2cfwagafpbqs5g7d95++/p1b4+eck8tawmdw/1h7159+/7r7zcvpz4fohbzewmdwx8gbgagnnatfhzx8zqrj+4vjbh5cqegoyseua/v3n7hxmqi8wugbgygl3vvg7fupk3i5gd9/fja7zsmdazmg/ze52mzesj4yu1xeq/ff7w5dvfvas1lsxc4db...
Constraint validation - Developer guides
cmascript 5 global, ignorecase, and multiline flags disabled) the value must match the pattern. patternmismatch constraint violation min range, number a valid number the value must be greater than or equal to the value. ...
...econds range, number an integer minlength text, search, url, tel, email, password; also on the <textarea> element an integer length the number of characters (code points) must not be less than the value of the attribute, if non-empty. all newlines are normalized to a single character (as opposed to crlf pairs) for <textarea>. tooshort constraint violation
maxlength text, search, url, tel, email, password; also on the <textarea> element an integer length the number of characters (code points) must not exceed the value of the attribute. toolong constraint violation constraint validation process constraint validation is done through the constraint validation api either on a single form element or at the form level, on the <form> eleme...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
hsl colors are represented using hsl functional notation. the hsl() css function is very similar to the rgb() function in usage otherwise. figure 1. an hsl color cylinder. hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. saturation is a percentage of how much of the way between being a shade of gray and having the
maximum possible amount of the given hue. as the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). image courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license. the value of the hue (h) component of an hsl color is an angle from red around through yellow, green, cyan, blue, and mag...
... (grad), or turns (turn). but this doesn't control how vivid or dull, or how bright or dark the color is. the saturation (s) component of the color specifies what percentage of the final color is comprised of the specified hue. the rest is defined by the grey level provided by the luminance (l) component. think of it like creating the perfect paint color: you start with base paint that's the
maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. this is the hue (h) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base. then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. do you want it to be very bright and nearl...
Standard metadata names - HTML: Hypertext Markup Language
nt the web site to be rendered at. height a positive integer, or the text device-height defines the height of the viewport. not used by any browser. initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size. ...
...teger, or the text device-height defines the height of the viewport. not used by any browser. initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
maximum-scale a positive number between 0.0 and 10.0 defines the
maximum amount to zoom in. it must be greater or equal to the minimum-scale or the behaviour is undefined. browser settings can ignore this rule and ios10+ ignores it by default. minimum-scale a positive number between 0.0 and 10.0 defines the minimum zoom level. it must be smaller or equal to the
maximum-scale or the behaviour is undefined. browser settings can ignore this r...
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
progress> element among its descendants. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role progressbar permitted aria roles no role permitted dom interface htmlprogresselement attributes this element includes the global attributes.
max this attribute describes how much work the task indicated by the progress element requires. the
max attribute, if present, must have a value greater than 0 and be a valid floating point number. the default value is 1. value this attribute specifies how much of the task that has been completed. it must be a valid floating point number between 0 and
max, or between 0 and 1 if
max is omitted. if ...
... unlike the <meter> element, the minimum value is always 0, and the min attribute is not allowed for the <progress> element. note: the :indeterminate pseudo-class can be used to match against indeterminate progress bars. to change the progress bar to indeterminate after giving it a value you must remove the value attribute with element.removeattribute('value'). examples <progress value="70"
max="100">70 %</progress> result on windows 7, the resulting progress looks like this: specifications specification status comment html living standardthe definition of '<progress>' in that specification. living standard html5the definition of '<progress>' in that specification. recommendation initial definition ...
Preloading content with rel="preload" - HTML: Hypertext Markup Language
nice feature of <link> elements is their ability to accept media attributes. ...
...meta charset="utf-8"> <title>responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(
max-width: 600px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(
max-width: 600px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a ...
Evolution of HTTP - HTTP
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5,
max=1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host: developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: htt...
... more than 15 years of extensions thanks to its extensibility – creating new headers or methods is easy – and even if the http...
Alt-Svc - HTTP
the alt-svc http response header is used to advertise alternative services through which the same resource can be reached. an alternative service is defined by a protocol/host/port combination. syntax alt-svc: clear alt-svc: <protocol-id>=<alt-authority>; ma=<
max-age> alt-svc: <protocol-id>=<alt-authority>; ma=<
max-age>; persist=1 clear the special value ''clear" indicates that the origin requests all alternatives for that origin to be invalidated. <protocol-id> the alpn protocol identifier. ...
... the special value ''clear" indicates that the origin requests all alternatives for that origin to be invalidated. <protocol-id> the alpn protocol identifier. examples include h2 for http/2 and h3-25 for draft 25 of the http/3 protocol. <alt-authority> the quoted string specifying the alternative authority which consists of an optional host override, a colon, and a mandatory port number. ma=<
max-age>optional the number of seconds for which the alternative service is considered fresh. if omitted, it defaults to 24 hours. alternative service entries can be cached for up to <
max-age> seconds, minus the age of the response (from the age header). if the cached entry expires, the client can no longer use this alternative service for new connections. persist=1optional usually cached alternat...
Expect-CT - HTTP
expect-ct will likely become obsolete in june 2021. since may 2018 new certificates are expected to support scts by default. certificates before march 2018 were allowed to have a lifetime of 39 months, those will all be expired in june 2021. header type response header forbidden header name yes syntax expect-ct: report-uri="<uri>", enforce,
max-age=<age> directives
max-age the number of seconds after reception of the expect-ct header field during which the user agent should regard the host of the received message as a known expect-ct host. if a cache receives a value greater than it can represent, or if any of its subsequent calculations overflows, the cache will consider this value to be either 2,147,483,648 (231) or the grea...
...-uri directive are present, the configuration is referred to as an "enforce-and-report" configuration, signalling to the user agent both that compliance to the certificate transparency policy should be enforced and that violations should be reported. example the following example specifies enforcement of certificate transparency for 24 hours and reports violations to foo.example. expect-ct:
max-age=86400, enforce, report-uri="https://foo.example/report" notes root cas manually added to the trust store override and suppress expect-ct reports/enforcement. browsers will not remember an expect-ct policy, unless the site has 'proven' it can serve a certificate satisfying the certificate transparency requirements. browsers implement their own trust model regarding which ct logs are conside...
Index - HTTP
origin the access-control-allow-origin response header indicates whether the response can be shared with requesting code from the given origin. 11 access-control-expose-headers cors, http, reference, header the access-control-expose-headers response header indicates which headers can be exposed as part of the response by listing their names. 12 access-control-
max-age cors, http, reference, header the access-control-
max-age response header indicates how long the results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow-headers headers) can be cached. 13 access-control-request-headers cors, http, reference, header the access-control-request-headers request he...
...ter the given date. if the resource has been modified after the given date, the response will be a 412 (precondition failed) error. 82 index http, http header, index found 115 pages: 83 keep-alive general header, http, http header, reference the keep-alive general header allows the sender to hint about how the connection may be used to set a timeout and a
maximum amount of requests. 84 large-allocation http, http header, non-standard, reference, response header, header the non-standard large-allocation response header tells the browser that the page being loaded is going to want to perform a large allocation. it is currently only implemented in firefox, but is harmless to send to every browser. 85 last-modified http...
Public-Key-Pins-Report-Only - HTTP
rn browsers as support for hpkp has been removed. use certificate transparency and the expect-ct header instead. for more information, see the public-key-pins header reference page and the http public key pinning article. ...
... includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. report-uri="<uri>" pin validation failures are reported to the given url. ...
Save-Data - HTTP
t is cached properly (for instance ensuring that the user is not served a lower-quality image from the cache when save-data header is no longer present [e.g. after having switched from cellular to wi-fi]). ...
...uest: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public,
max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public,
max-age=31536000 content-type: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section 7: save-data http client hints ...
HTTP headers - HTTP
e informs the server about the human language the server is expected to send back. this is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown). controls expect indicates expectations that need to be fulfilled by the server to properly handle the request.
max-forwards cookies cookie contains stored http cookies previously sent by the server with the set-cookie header. set-cookie send cookies from the server to the user-agent. cookie2 contains an http cookie previously sent by the server with the set-cookie2 header, but has been obsoleted. use cookie instead. set-cookie2 sends cookies from the server to the user-agent, but has been obso...
...s-control-allow-headers used in response to a preflight request to indicate which http headers can be used when making the actual request. access-control-allow-methods specifies the methods allowed when accessing the resource in response to a preflight request. access-control-expose-headers indicates which headers can be exposed as part of the response by listing their names. access-control-
max-age indicates how long the results of a preflight request can be cached. access-control-request-headers used when issuing a preflight request to let the server know which http headers will be used when the actual request is made. access-control-request-method used when issuing a preflight request to let the server know which http method will be used when the actual request is made. origin ...
HTTP Index - HTTP
origin the access-control-allow-origin response header indicates whether the response can be shared with requesting code from the given origin. 59 access-control-expose-headers cors, http, reference, header the access-control-expose-headers response header indicates which headers can be exposed as part of the response by listing their names. 60 access-control-
max-age cors, http, reference, header the access-control-
max-age response header indicates how long the results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow-headers headers) can be cached. 61 access-control-request-headers cors, http, reference, header the access-control-request-headers request he...
...r the given date. if the resource has been modified after the given date, the response will be a 412 (precondition failed) error. 161 index http, http header, index found 122 pages: 162 keep-alive general header, http, http header, reference the keep-alive general header allows the sender to hint about how the connection may be used to set a timeout and a
maximum amount of requests. 163 large-allocation http, http header, non-standard, reference, response header, header the non-standard large-allocation response header tells the browser that the page being loaded is going to want to perform a large allocation. it is currently only implemented in firefox, but is harmless to send to every browser. 164 last-modified ht...
Network Error Logging - HTTP
ponse header. this experimental header allows web sites and applications to opt-in to receive reports about failed (and, if desired, successful) network fetches from supporting browsers. reports are sent to a reporting group defined within a report-to header. usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "
max_age": 31556952 } an origin considered secure by the browser is required. the following object keys can be specified in the nel header: report_to the reporting api group to send network error reports to (see below).
max_age specifies the lifetime of the policy, in seconds (in a similar way to e.g. hsts policies are time-restricted). the referenced reporting group should have a lifetim...
...ad. failure_fraction floating point value between 0 and 1 which specifies the proportion of failed network requests to report. defaults to 1, so that all failed network requests will be reported if the key is not present in the json payload. the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "
max_age": 31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown. the top-level "body" key contains the network error report. http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "...
JavaScript data types and data structures - JavaScript
(see below). the number type is a double-precision 64-bit binary format ieee 754 value (numbers between -(253 − 1) and 253 − 1). in addition to representing floating-point numbers, the number type has three symbolic values: +infinity, -infinity, and nan ("not a number"). to check for the largest available value or smallest available value within ±infinity, you can use the constants number.
max_value or number.min_value. starting with ecmascript 2015, you are also able to check if a number is in the double-precision floating-point number range using number.issafeinteger() as well as number.
max_safe_integer and number.min_safe_integer. beyond this range, integers in javascript are not safe anymore and will be a double-precision floating point approximation of the value. the number t...
...type is a numeric primitive in javascript that can represent integers with arbitrary precision. with bigints, you can safely store and operate on large integers even beyond the safe integer limit for numbers. a bigint is created by appending n to the end of an integer or by calling the constructor. you can obtain the safest value that can be incremented with numbers by using the constant number.
max_safe_integer. with the introduction of bigints, you can operate with numbers beyond the number.
max_safe_integer. this example demonstrates, where incrementing the number.
max_safe_integer returns the expected result: > const x = 2n ** 53n; 9007199254740992n > const y = x + 1n; 9007199254740993n you can use the operators +, *, -, **, and % with bigints—just like with numbers. a bigint is not ...
Memory Management - JavaScript
d. in order to release the memory of an object, it needs to be made explicitly unreachable. as of 2019, it is not possible to explicitly or programmatically trigger garbage collection in javascript. node.js node.js offers additional options and tools for configuring and debugging memory issues that may not be available for javascript executed within a browser environment. ...
...itly unreachable. as of 2019, it is not possible to explicitly or programmatically trigger garbage collection in javascript. node.js node.js offers additional options and tools for configuring and debugging memory issues that may not be available for javascript executed within a browser environment. ...
SyntaxError: return not in function - JavaScript
what went wrong? a return or yield statement is called outside of a function. maybe there are missing curly brackets somewhere? the return and yield statements must be in a function, because they end (or pause and resume) function execution and specify a value to be returned to the function caller. ...
...es missing curly brackets var cheer = function(score) { if (score === 147) return '
maximum!'; }; if (score > 100) { return 'century!'; } } // syntaxerror: return not in function the curly brackets look correct at a first glance, but this code snippet is missing a { after the first if statement. ...
RangeError: repeat count must be less than infinity - JavaScript
the javascript exception "repeat count must be less than infinity" occurs when the string.prototype.repeat() method is used with a count argument that is infinity. message rangeerror: argument out of range (edge) rangeerror: repeat count must be less than infinity and not overflow
maximum string size (firefox) rangeerror: invalid count value (chrome) error type rangeerror what went wrong? the string.prototype.repeat() method has been used. it has a count parameter indicating the number of times to repeat the string. it must be between 0 and less than positive infinity and cannot be a negative number. the range of allowed values can be described like this: [0, +∞). the resulting string can also not be larger than the
maximum string size, which can differ in javascript engines. in fi...
...) method has been used. it has a count parameter indicating the number of times to repeat the string. it must be between 0 and less than positive infinity and cannot be a negative number. the range of allowed values can be described like this: [0, +∞). the resulting string can also not be larger than the
maximum string size, which can differ in javascript engines. in firefox (spidermonkey) the
maximum string size is 228 -1 (0xfffffff). examples invalid cases 'abc'.repeat(infinity); // rangeerror 'a'.repeat(2**28); // rangeerror valid cases 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) ...
Array.prototype.copyWithin() - JavaScript
pywithin) { object.defineproperty(array.prototype, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. ...
...w typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-8. var relativetarget = target >> 0; var to = relativetarget < 0 ? math.
max(len + relativetarget, 0) : math.min(relativetarget, len); // steps 9-11. var relativestart = start >> 0; var from = relativestart < 0 ? math.
max(len + relativestart, 0) : math.min(relativestart, len); // steps 12-14. var end = arguments[2]; var relativeend = end === undefined ? len : end >> 0; var final = relativeend < 0 ? math.
max(len + relativeend, 0) : math.min(relativeend, len); // step 15. var count = math.min(final - from, len - to); // steps 16-17. var direction = 1; if (fr...
Array.from() - JavaScript
typeof fn === 'function' || tostr.call(fn) === '[object function]' ); }; var tointeger = function (value) { var number = number(value); if (isnan(number)) return 0; if (number === 0 || !isfinite(number)) return number; return (number > 0 ? ...
...) { var number = number(value); if (isnan(number)) return 0; if (number === 0 || !isfinite(number)) return number; return (number > 0 ? 1 : -1) * math.floor(math.abs(number)); }; var
maxsafeinteger = math.pow(2, 53) - 1; var tolength = function (value) { var len = tointeger(value); return math.min(math.
max(len, 0),
maxsafeinteger); }; var setgetitemhandler = function setgetitemhandler(isiterator, items) { var iterator = isiterator && items[symboliterator](); return function getitem(k) { return isiterator ? iterator.next() : items[k]; }; }; var getarray = function getarray( t, a, ...
DataView - JavaScript
the platform's endianness. return new int16array(buffer)[0] === 256; })(); console.log(littleendian); // true or false 64-bit integer values because javascript does not currently include standard support for 64-bit integer values, dataview does not offer native 64-bit operations. as a workaround, you could implement your own getuint64() function to obtain a value with precision up to number.
max_safe_integer, which could suffice for certain cases. function getuint64(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = dataview.getuint32(byteoffset, littleendian); const right = dataview.getuint32(byteoffset+4, littleendian); // combine the two 32-bit values const combined = littleendian? left + 2**32*right : 2**32*left + rig...
...precision may be lost'); return combined; } alternatively, if you need full 64-bit range, you can create a bigint. further, although native bigints are much faster than user-land library equivalents, bigints will always be much slower than 32-bit integers in javascript due to the nature of their variable size. const bigint = window.bigint, bigthirtytwo = bigint(32), bigzero = ...
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
t. usegrouping the values provided for these properties in the options argument or filled in as defaults. currency currencydisplay the values provided for these properties in the options argument or filled in as defaults. these properties are only present if style is "currency". only one of the following two groups of properties is included: minimumintegerdigits minimumfractiondigits
maximumfractiondigits the values provided for these properties in the options argument or filled in as defaults. these properties are present only if neither minimumsignificantdigits nor
maximumsignificantdigits was provided in the options argument. minimumsignificantdigits
maximumsignificantdigits the values provided for these properties in the options argument or filled in as defaults. these pr...
... ...
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
e key-value pairs that were requested and are supported for this locale are included in locale. pluralcategories an array of plural categories used by the given locale, seleced from the list "zero", "one", "two", "few", "many" and "other". type the type used (cardinal or ordinal). only one of the following two groups of properties is included: minimumintegerdigits minimumfractiondigits
maximumfractiondigits the values provided for these properties in the options argument or filled in as defaults. these properties are present only if neither minimumsignificantdigits nor
maximumsignificantdigits was provided in the options argument. minimumsignificantdigits
maximumsignificantdigits the values provided for these properties in the options argument or filled in as defaults. these pr...
...
maximumsignificantdigits the values provided for these properties in the options argument or filled in as defaults. these properties are present only if at least one of them was provided in the options argument. examples using the resolvedoptions method var de = new intl.pluralrules('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.
maximumfractiondigits; // 3 usedoptions.minimumfractiondigits; // 0 usedoptions.minimumintegerdigits; // 1 usedoptions.pluralcategories; // array [ "one", "other" ] usedoptions.type; // "cardinal" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules.prototype.resolvedoptions' in that specification. ...
Math.imul() - JavaScript
ing points for all numbers. if (!math.imul) math.imul = function(opa, opb) { opb |= 0; // ensure that opb is an integer. opa will automatically be coerced. // floating points give us 53 bits of precision to work with plus 1 sign bit // automatically handled for our convienence: // 1. ...
...omatically handled for our convienence: // 1. 0x003fffff /*opa & 0x000fffff*/ * 0x7fffffff /*opb*/ = 0x1fffff7fc00001 // 0x1fffff7fc00001 < number.
max_safe_integer /*0x1fffffffffffff*/ var result = (opa & 0x003fffff) * opb; // 2. ...
Math - JavaScript
re root of the sum of squares of its arguments. math.imul(x, y) returns the result of the 32-bit integer multiplication of x and y. math.log(x) returns the natural logarithm (㏒e; also, ㏑) of x. math.log1p(x) returns the natural logarithm (㏒e; also ㏑) of 1 + x for the number x. math.log10(x) returns the base-10 logarithm of x. math.log2(x) returns the base-2 logarithm of x. math.
max([x[, y[, …]]]) returns the largest of zero or more numbers. math.min([x[, y[, …]]]) returns the smallest of zero or more numbers. math.pow(x, y) returns base x to the exponent power y (that is, xy). math.random() returns a pseudo-random number between 0 and 1. math.round(x) returns the value of the number x rounded to the nearest integer. math.sign(x) returns the sign of the x, ind...
...ed by the tangent of the angle is equal to the opposite. in javascript, we can do this with the following: 50 * math.tan(degtorad(60)). we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an input value in radians. returning a random integer between two bounds this can be achieved with a combination of math.random() and math.floor(): function random(min,
max) { const num = math.floor(math.random() * (
max - min + 1)) + min; return num; } random(1, 10); specifications specification ecmascript (ecma-262)the definition of 'math' in that specification. ...
WebAssembly.Memory.prototype.grow() - JavaScript
a specified number of webassembly pages. syntax memory.grow(number); parameters number the number of webassembly pages you want to grow the memory by (each one is 64kib in size). return value the previous size of the memory, in units of webassembly pages. ...
... number the number of webassembly pages you want to grow the memory by (each one is 64kib in size). return value the previous size of the memory, in units of webassembly pages. examples using grow the following example creates a new webassembly memory instance with an initial size of 1 page (64kib), and a
maximum size of 10 pages (640kib). var memory = new webassembly.memory({initial:1,
maximum:10}); we can then grow the instance by one page like so: const bytesperpage = 64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages. specifications specific...
WebAssembly.Memory - JavaScript
memory.prototype.grow() increases the size of the memory instance by a specified number of webassembly pages (each one is 64kb in size). examples creating a new memory object there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial size of 10 pages (640kib), and a
maximum size of 100 pages (6.4mib). its buffer property will return an arraybuffer. var memory = new webassembly.memory({initial:10,
maximum:100}); the second way to get a webassembly.memory object is to have it exported by a webassembly module. the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.i...
...> { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); creating a shared memory by default, webassembly memories are unshared. you can create a shared memory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:10,
maximum:100, shared: true}); this memory's buffer property will return a sharedarraybuffer. specifications specification webassembly javascript interfacethe definition of 'memory' in that specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github...
WebAssembly.Table.prototype.grow() - JavaScript
e by a specified number of elements. syntax table.grow(number); parameters number the number of elements you want to grow the table by. return value the previous length of the table. exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown. ...
... the number of elements you want to grow the table by. return value the previous length of the table. exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown. examples using grow the following example creates a new webassembly table instance with an initial size of 2 and a
maximum size of 10. var table = new webassembly.table({ element: "anyfunc", initial: 2,
maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification. browser compatibility the compatibility table on this page is generated from st...
<mo> - MathML
allowed values are: infinity an arbitrary length minsize if stretchy is true, this attribute specifies the minimum size of the operator. allowed values are: infinity an arbitrary length movablelimits specifies whether attached under- and overscripts move to sub- and superscript positions w...
...truck ; example bold-fraktur ; example script ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال
maxsize if stretchy is true, this attribute specifies the
maximum size of the operator. allowed values are: infinity an arbitrary length minsize if stretchy is true, this attribute specifies the minimum size of the operator. allowed values are: infinity an arbitrary length movablelimits specifies whether attached under- and overscripts move to sub- and superscript positions when displaystyle is false. allowed values are either true ...
The "codecs" parameter in common media types - Web media technologies
d one higher. currently, only flags 0 through 2 are used; the other five bits must be zero. the meanings of the flags vary depending on the profile being used. the level is a fixed-point number, so a value of 14 (decimal 20) means level 2.0 while a value of 3d (decimal 61) means level 6.1. generally speaking, the higher the level number, the more bandwidth the stream will use and the higher the
maximum video dimensions are supported. avc profiles the following are the avc profiles and their profile numbers for use in the codecs parameter, as well as the value to specify for the constraints component, cc. specifying an avc profiles using the profile id and constraints components of the codecs parameter profile number (hex) constraints byte constrained basel...
... third component be only one decimal digit. however, amendments to the specification over time extended the range of these values well beyond one decimal digit, so now the third parameter may be either one or two digits. padding values below 10 with a leading 0 is optional. older implementations of mpeg-4 codecs may not support two-digit values, however, so using a single digit when possible will
maximize compatibility. the audio object types are defined in iso/iec 14496-3 subpart 1, section 1.5.1. the table below provides a basic list of the audio object types and in the case of the more common object ypes provides a list of the profiles supporting it, but you should refer to the specification for details if you need to know more about the inner workings of any given mpeg-4 audio type. ...
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence adding the attributes being a good idea. let’s move forward a few years to the era of responsive design. to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img {
max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0. when the image finally loads, the same jank will occur as the page layout is shifted to make space for it. ...
...utes set on it, its aspect ratio will be calculated before load time, and be available to the browser. note: currently this effect is being limited to actual <img> elements, as applying to other such elements may have undesirable results. see (bug 1583980). when the width/height of an <img> element — as set using html attributes — is overidden using css using something like this: img {
max-width: 100%; height: auto } the aspect ratio is then used to calculate the height and therefore the correct size is applied to the <img> element, meaning that the aforementioned jank will not occur when the image loads. it only works before the image loads the new mechanism currently only works on <img> elements before the image is loaded. originally we were going to have the new mechanism ap...
Responsive Navigation Patterns - Progressive web apps (PWAs)
top navigation items rearrange until there is not enough space. at that point, some items move from the top navigation to a drop-down menu. in the smallest screen, all navigation items live in a toggle menu, and the user has to tap to expand the toggle menu. you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...llest screen size, where the navigation menu is hidden in a button by default. in the smallest screen, when the user taps the button, the navigation menu slides into view and displays the navigation items. ...
SVG Attribute reference - SVG: Scalable Vector Graphics
-adv-x horiz-origin-x 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...
...nsform-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 calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncan...
<marker> - SVG: Scalable Vector Graphics
t value: 3; animatable: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to. value type: auto|auto-start-reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| x
maxymin| xminymid| xmidymid| x
maxymid| xminy
max| xmidy
max| x
maxy
max) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute defines the x coordinate for the reference point of the marker. value type: left|center|right|<coordinate> ; default value: 0; animatable: yes refy this attribute defines the y coordinate for the reference point of the marker. value type: top|cen...
...aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-value
max, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <scr...
<svg> - SVG: Scalable Vector Graphics
ragment. value type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport. (not the height of its coordinate system.) value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio. value type: (none| xminymin| xmidymin| x
maxymin| xminymid| xmidymid| x
maxymid| xminy
max| xmidy
max| x
maxy
max) (meet|slice)? ; default value: xmidymid meet; animatable: yes version deprecated since svg 2 which version of svg is used for the inner content of the element. value type: <number> ; default value: none; animatable: no viewbox the svg viewport coordinates for the current svg fragment. value type: <list-of-numbers> ; default va...
...aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-value
max, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <ma...
<symbol> - SVG: Scalable Vector Graphics
nk:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol. value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| x
maxymin| xminymid| xmidymid| x
maxymid| xminy
max| xmidy
max| x
maxy
max) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute determines the x coordinate of the reference point of the symbol. value type: <length>|<percentage>|left|center|right ; default value: 0; animatable: yes refy this attribute determines the y coordinate of the reference point of the symbol. value ...
...aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-value
max, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <ma...
Example - SVG: Scalable Vector Graphics
spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all. </div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>
max. velocity:</label> <input id='
max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element. function displ...
...eal/ physical principles. mote.prototype.applyforce = function(pos, mag) { if( pos[0] > this.x ) this.vx += mag; else if( pos[0] < this.x ) this.vx -= mag; if( pos[1] > this.y ) this.vy += mag; else if( pos[1] < this.y ) this.vy -= mag; } // mote::capvelocity() -- apply an upper limit // on mote velocity. mote.prototype.capvelocity = function() { var
max = parseint( document.getelementbyid('
max_velocity').value ); if(
max < this.vx ) this.vx =
max; else if( -
max > this.vx ) this.vx = -
max; if(
max < this.vy ) this.vy =
max; else if( -
max > this.vy ) this.vy = -
max; } // mote::capposition() -- apply an upper/lower limit // on mote position. mote.prototype.capposition = function() { var dims = dimensions(...
Understanding WebAssembly text format - WebAssembly
you can create shared webassembly memory objects, which can be transferred between window and worker contexts using postmessage(), in the same fashion as a sharedarraybuffer. ...
... note: you can find a lot more details in the threading proposal for webassembly. atomic memory accesses a number of new wasm instructions have been added that can be used to implement higher level features like mutexes, condition variables, etc. ...
core/heritage - Archive of obsolete content
ss({ hex: function hex() { return '#' + this.color; } }); var rgb = class({ red: function red() { return parseint(this.color.substr(0, 2), 16); }, green: function green() { return parseint(this.color.substr(2, 2), 16); }, blue: function blue() { return parseint(this.color.substr(4, 2), 16); } }); var cmyk = class({ black: function black() { var color = math.
max(math.
max(this.red(), this.green()), this.blue()); return (1 - color / 255).tofixed(4); }, magenta: function magenta() { var k = this.black(); return (((1 - this.green() / 255).tofixed(4) - k) / (1 - k)).tofixed(4); }, yellow: function yellow() { var k = this.black(); return (((1 - this.blue() / 255).tofixed(4) - k) / (1 - k)).tofixed(4); }, cyan: function cyan() { ...
caption - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
checkbox - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
content - Archive of obsolete content
ás información, se encuentra disponible el tutorial xul. propiedades tag, uri ejemplos (no son necesarios) atributos 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width propiedades tag type: tag name this may be set to a tag name. if set, the conditions will only...
description - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
label - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
listitem - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
menuseparator - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
notificationbox - Archive of obsolete content
ificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties currentnotification type: notification element the currently displayed notificatio...
param - Archive of obsolete content
pe of the parameter's value integer 32 bit integer int64 64 bit integer double double-precision floating-point number string string literal, the default value properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, ,
maxheight,
maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens()...
radio - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
tab - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
toolbar - Archive of obsolete content
key only type: string the text to appear on the tooltip for the toolbar's grippy when the toolbar is collapsed. this would be used to label the grippy so that the user knows which toolbar it represents. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or
maximum height. the css height property may also be used. iconsize type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively. these can vary from one toolbar to another within a given toolbox, whose iconsize attribute defines the default for all toolbars that don't specify an icon size. mode not in...
toolbarbutton - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
toolbox - Archive of obsolete content
</toolbox> <textbox multiline="true" value="we have two toolbars inside of one toolbox above." width="20"/> </window> 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, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible type: nsiaccessible returns the accessibility object ...
tooltip - Archive of obsolete content
center the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a
maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this
maximum width, you may be able to use the
max-width css property (or the
maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { ma...
SpeechSynthesisUtterance.text - Web APIs
the text that will be synthesised when the utterance is spoken. the text may be provided as plain text, or a well-formed ssml document. the ssml tags will be stripped away by devices that don't support ssml. syntax var mytext = speechsynthesisutteranceinstance.text; speechsynthesisutteranceinstance.text = 'hello i am speaking'; value a domstring representing the text to the synthesised. the
maximum length of the text that can be spoken in each utterance is 32,767 characters. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... inputform.onsubmit = function(event) { event.preventdefault(); var utterthi...
StereoPannerNode - Web APIs
udio stream in a stereo image using a low-cost equal-power panning algorithm. the pan property takes a unitless value between -1 (full left pan) and 1 (full right pan). this interface was introduced as a much simpler way to apply a simple panning effect than having to use a full pannernode. 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. properties inherits properties from its parent, audionode. stereopannernode.pan read only is an a-rate audioparam representing the amount of panning to apply. methods no specific method; inherits methods from its paren...
SubmitEvent.submitter - Web APIs
whose type or a <button> whose type is submit, it could be some other element which has initiated a submission process. if the submission was not triggered by a button of some kind, the value of submitter is null. examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or
maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmes...
SubmitEvent - Web APIs
ich identifies the button or other element which was invoked to trigger the form being submitted. methods while submitevent offers no methods of its own, it inherits any specified by its parent interface, event. examples in this example, a shopping cart may have an assortment of different submit buttons depending on factors such as the user's settings, the shop's settings, and any minimum or
maximum shopping card totals established by the payment processors. each of the submit elements' id is used to identify which payment processor the button corresponds to. let form = document.queryselector("form"); form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(form, handler); } else { showalertmes...
SyncManager.register() - Web APIs
stration. the available options are: allowonbattery: a boolean that determines whether synchronization is allowed when the user agent is on a battery-powered device. the default is true. id: the unique identifier of the specified syncregistration object. idlerequired: a boolean that determines whether synchronization is allowed when the user agent's device is idle. the default is false.
maxdelay: the
maximum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0, meaning there is no
maximum delay. mindelay: the minimum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0. minperiod: the minimum time in milliseconds between periodic sync events. the default is 0, mean...
TextEncoder.prototype.encodeInto() - Web APIs
cters that expant into 3 bytes. it is unlikely that long text will exceed s.length * 2 bytes in length. thus, a more optimistic approach might be to allocate s.length * 2 + 5 bytes, and perform reallocation in the rare circumstance that the optimistic prediction was wrong. if the output is expected to be long-lived, it makes sense to compute minimum allocation rounduptobucketsize(s.length), the
maximum allocation size s.length * 3, and to have a chosen (as a tradeoff between memory usage and speed) threshold t such that if rounduptobucketsize(s.length) + t >= s.length * 3, you simply allocate for s.length * 3. otherwise, first allocate for rounduptobucketsize(s.length) and convert. if the read item it the return dictionary is s.length, the conversion is done. if not, reallocate the target b...
Touch - Web APIs
s of the same scale as screeny. touch.rotationangle read only returns the angle (in degrees) that the ellipse described by radiusx and radiusy must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface. touch.forceread only returns the amount of pressure being applied to the surface by the user, as a float between 0.0 (no pressure) and 1.0 (
maximum pressure). methods this interface has no method and no parent, and doesn't inherits or implements any method. specifications specification status comment touch events – level 2the definition of 'touch' in that specification. draft added radiusx, radiusy, rotationangle, force properties, as well as the touch() constructor. touch eventsthe defin...
TreeWalker.whatToShow - Web APIs
the treewalker.whattoshow read-only property returns an unsigned long being a bitmask made of constants describing the types of node that must to be presented. non-matching nodes are skipped, but their children may be included, if relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the
max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root; in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traversing over the document tree. ...
TreeWalker - Web APIs
en the treewalker was created. treewalker.whattoshow read only returns an unsigned long being a bitmask made of constants describing the types of node that must be presented. non-matching nodes are skipped, but their children may be included, if relevant. the possible values are: constant numerical value description nodefilter.show_all -1 (that is the
max value of unsigned long) shows all nodes. nodefilter.show_attribute 2 shows attribute attr nodes. this is meaningful only when creating a treewalker with an attr node as its root. in this case, it means that the attribute node will appear in the first position of the iteration or traversal. since attributes are never children of other nodes, they do not appear when traver...
USBDevice.controlTransferIn() - Web APIs
hether the tranfer is "standard" (common to all usb devices) "class" (common to an industry-standard class of devices) or "vendor". recipient: specifices the target of the transfer on the device, one of "device", "interface", "endpoint", or "other". request: a vendor-specific command. value: vender-specific request parameters. index: the interface number of the recipient. length the
maximum number of bytes to read from the device. the actual data is in the usbintransferresult in the resolved promise. return value promise that resolves with a usbintransferresult. specifications specification status comment webusbthe definition of 'controltransferin()' in that specification. draft initial definition. ...
USBDevice.transferIn() - Web APIs
the transferin() method of the usbdevice interface returns a promise that resolves with a usbtransferinresult when bulk or interrupt data is received from the usb device. syntax var promise = usbdevice.transferin(endpointnumber, length) parameters endpointnumber the number of a device-specific endpoint (buffer). length the
maximum number of bytes that will be read back from the device. the actual data is in the usbintransferresult in the resolved promise. return value a promise that resolves with a usbtransferinresult. specifications specification status comment webusbthe definition of 'transferin()' in that specification. draft initial definition. ...
ValidityState.patternMismatch - Web APIs
ters that aren't digits, patternmismatch will be true. when true, the element matches the :invalid css pseudo-classes. input:invalid { border: red solid 3px; } note, in this case, we get a patternmismatch not a validitystate.toolong or validitystate.tooshort if the values are too long or too short because it is the pattern that is dictating the length of the value. had we used minlength and
maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true. note: the email input type requires, at minimum, a match of x@y and the url type requires, at minimum, a match to x:, with no pattern attribute present. when invalid, the validitystate.typemismatch will be true, if there is no pattern attribute (or if the pattern attribute is not valid for tha...
ValidityState.rangeOverflow - Web APIs
the read-only rangeoverflow property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's
max attribute. if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a
max value is set, if the value don't doesn't conform to the constraints set by the
max value, the rangeoverflow property will be true. given the following: <input type="number" min="20"
max="40" step="2"/> if value > 40, rangeoverflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeov...
ValidityState.rangeUnderflow - Web APIs
dited by the user, does not conform to the constraints set by the element's min attribute. if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a min value is set, if the value don't doesn't conform to the constraints set by the min value, the rangeunderflow property will be true. given the following: <input type="number" min="20"
max="40" step="2"/> if value < 20, rangeunderflow will be true. when true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.rangeunderflow' in that specification. living standard html 5.1the definition of 'validitystate.rangeunderflow' in th...
ValidityState.stepMismatch - Web APIs
atetime-local, number and range types and the step value is not any, if the value don't doesn't conform to the constraints set by the step and min values, then stepmismatch will be true. if the remainder of the form control's value less the min value, divided by the step value (which defaults to 1 if ommitted) is not zero, there is a mismatch. given the following: <input type="number" min="20"
max="40" step="2"/> if (value - min) / 2 != 0, stepmismatch will be true. if true, the element matches the :invalid and :out-of-range css pseudo-classes. specifications specification status comment html living standardthe definition of 'validitystate.stepmismatch' in that specification. living standard html 5.1the definition of 'validitystate.stepmismatch' ...
Trailer - HTTP
forbidden header name yes syntax trailer: header-names directives header-names http header fields which will be present in the trailer part of chunked messages. these header fields are disallowed: message framing headers (e.g., transfer-encoding and content-length), routing headers (e.g., host), request modifiers (e.g., controls and conditionals, like cache-control,
max-forwards, or te), authentication headers (e.g., authorization or set-cookie), or content-encoding, content-type, content-range, and trailer itself. examples chunked transfer encoding using a trailing header in this example, the expires header is used at the end of the chunked message and serves as a trailing header. http/1.1 200 ok content-type: text/plain transfer-encoding: chunked...
Firefox user agent string reference - HTTP
gecko/geckotrail appname/appversion mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion appname/appversion appname/appversion indicates the application name and version. for instance, this could be "camino/2.1.1", or "seamonkey/2.7.1". firefox/firefoxversion is an optional compatibility token that some gecko-based browsers may choose to incorporate, to achieve
maximum compatibility with websites that expect firefox. firefoxversion will generally represent the equivalent firefox release corresponding to the given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for gecko — not firefox! whether this token appears is controlled by the "general.useragent.compatmode.firefox" boolean pref. ...
TRACE - HTTP
rms a message loop-back test along the path to the target resource, providing a useful debugging mechanism. the final recipient of the request should reflect the message received, excluding some fields described below, back to the client as the message body of a 200 (ok) response with a content-type of message/http. the final recipient is either the origin server or the first server to receive a
max-forwards value of 0 in the request. request has body no successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax trace /index.html specifications specification title rfc 7231, section 4.3.8: trace hypertext transfer protocol (http/1.1): semanti...
A re-introduction to JavaScript (JS tutorial) - JavaScript
there are two basic ways to create an empty object: var obj = new object(); and: var obj = {}; these are semantically equivalent; the second is called object literal syntax and is more convenient. this syntax is also the core of json format and should be preferred at all times. object literal syntax can be used to initialize an object in its entirety: var obj = { name: 'carrot', for: '
max', // 'for' is a reserved word, use '_for' instead. details: { color: 'orange', size: 12 } }; attribute access can be chained together: obj.details.color; // orange obj['details']['size']; // 12 the following example creates an object prototype(person) and an instance of that prototype(you). function person(name, age) { this.name = name; this.age = age; } // define an object...
Equality comparisons and sameness - JavaScript
ngforce. math.atan2 math.ceil math.pow math.round in some cases,it's possible for a -0 to be introduced into an expression as a return value of these methods even when no -0 exists as one of the parameters. for example, using math.pow to raise -infinity to the power of any negative, odd exponent evaluates to -0. refer to the documentation for the individual methods. math.floor math.
max math.min math.sin math.sqrt math.tan it's possible to get a -0 return value out of these methods in some cases where a -0 exists as one of the parameters. e.g., math.min(-0, +0) evaluates to -0. refer to the documentation for the individual methods. ~ << >> each of these operators uses the toint32 algorithm internally. since there is only one representation for 0 in the internal 32-bi...
Indexed collections - JavaScript
rays are fast. however, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data in typed arrays. buffers and views: typed array architecture to achieve
maximum flexibility and efficiency, javascript typed arrays split the implementation into buffers and views. a buffer (implemented by the arraybuffer object) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. in order to access the memory contained in a buffer, you need to use a view. a view provides a context — that is, a da...
Regular expression syntax cheatsheet - JavaScript
es the "a" in "candy" and all the "a"'s in "caaaaaaandy". x? matches the preceding item "x" 0 or 1 times. for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the
maximum number of times). x{n} where "n" is a positive integer, matches exactly "n" occurrences of the preceding item "x". for example, /a{2}/ doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy". x{n,} where "n" is a positive integer, matches at least "n" occurrences of the preceding item "x". fo...
Quantifiers - JavaScript
es the "a" in "candy" and all the "a"'s in "caaaaaaandy". x? matches the preceding item "x" 0 or 1 times. for example, /e?le?/ matches the "el" in "angel" and the "le" in "angle." if used immediately after any of the quantifiers *, +, ?, or {}, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the
maximum number of times). x{n} where "n" is a positive integer, matches exactly "n" occurrences of the preceding item "x". for example, /a{2}/ doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy". x{n,} where "n" is a positive integer, matches at least "n" occurrences of the preceding item "x". fo...
RangeError: invalid array length - JavaScript
let a = []; a.length = a.length - 1; // set -1 to the length property let b = new array(math.pow(2, 32) - 1); b.length = b.length + 1; // set 2^32 to the length property valid cases [ math.pow(2, 40) ] // [ 1099511627776 ] [ -1 ] // [ -1 ] new arraybuffer(math.pow(2, 32) - 1) new arraybuffer(0) let a = []; a.length = math.
max(0, a.length - 1); let b = new array(math.pow(2, 32) - 1); b.length = math.min(0xffffffff, b.length + 1); // 0xffffffff is the hexadecimal notation for 2^32 - 1 // which can also be written as (-1 >>> 0) ...
InternalError: too much recursion - JavaScript
what went wrong? a function that calls itself is called a recursive function. once a condition is met, the function stops calling itself. this is called a base case. in some ways, recursion is analogous to a loop. both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). ...
Arrow function expressions - JavaScript
var arr = [5, 6, 13, 0, 1, 18, 23]; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // [6, 0, 18] var double = arr.map(v => v * 2); // [10, 12, 26, 0, 2, 36, 46] // more concise promise chains promise.then(a => { // ... }).then(b => { // ... }); // parameterless arrow functions that ar...
Array.prototype.reduceRight() - JavaScript
.reduceright(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); const randint =
max => math.floor(math.random() *
max) const add5 = (callback, x) => { settimeout(callback, randint(1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(1000), x - 2); }; const split = (callback, x) => { settimeout(callback, randint(1000), x, x); }; const add = (callback, x, y) => { se...
Array.prototype.fill() - JavaScript
totype, 'fill', { value: function(value) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-5. var len = o.length >>> 0; // steps 6-7. var start = arguments[1]; var relativestart = start >> 0; // step 8. var k = relativestart < 0 ? math.
max(len + relativestart, 0) : math.min(relativestart, len); // steps 9-10. var end = arguments[2]; var relativeend = end === undefined ? len : end >> 0; // step 11. var finalvalue = relativeend < 0 ? math.
max(len + relativeend, 0) : math.min(relativeend, len); // step 12. while (k < finalvalue) { o[k] = value; ...
Array.prototype.push() - JavaScript
s the new length of the array. let sports = ['soccer', 'baseball'] let total = sports.push('football', 'swimming') console.log(sports) // ['soccer', 'baseball', 'football', 'swimming'] console.log(total) // 4 merging two arrays this example uses apply() to push all elements from a second array. do not use this method if the second array (morevegs in the example) is very large because the
maximum number of parameters that one function can take is limited in practice. see apply() for more details. let vegetables = ['parsnip', 'potato'] let morevegs = ['celery', 'beetroot'] // merge the second array into the first one // equivalent to vegetables.push('celery', 'beetroot') array.prototype.push.apply(vegetables, morevegs) console.log(vegetables) // ['parsnip', 'potato', 'celery', 'bee...
ArrayBuffer() constructor - JavaScript
o the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax new arraybuffer(length) parameters length the size, in bytes, of the array buffer to create. return value a new arraybuffer object of the specified size. its contents are initialized to 0. exceptions a rangeerror is thrown if the length is larger than number.
max_safe_integer (>= 2 ** 53) or negative. compatibility notes starting with ecmascript 2015, arraybuffer constructors require to be constructed with a new operator. calling an arraybuffer constructor as a function without new, will throw a typeerror from now on. var dv = arraybuffer(10); // typeerror: calling a builtin arraybuffer constructor // without new is forbidden var dv = new arraybuffer(...