Search completed in 1.04 seconds.
Index - Archive of obsolete content
5 attribute (xul) xul attributes, xul reference no summary!
... 1
5 allownegativeassertions xul attributes, xul reference no summary!
... 2
5 autofill xul attributes, xul reference no summary!
...And 311 more matches
Index
found 3
53 pages: # page tags and summary 1 network security services jss, nss, needsmigration network security services (nss) is a set of libraries designed to support cross-platform development of security-enabled client and server applications.
... applications built with nss can support ssl v3, tls, pkcs #
5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.
509 v3 certificates, and other security standards.
...the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.
509 version 3.
...And 189 more matches
Index
found
550 pages: # page tags and summary 1 spidermonkey: the mozilla javascript runtime spidermonkey standalone source code releases can be found on the releases page.
...
5 future directions guide, mozilla, spidermonkey this article documents future directions in functionality, design, and coding practices for spidermonkey.
... 11 index index, mdn meta, spidermonkey found
550 pages: 12 introduction to the javascript shell spidermonkey to get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your platform from the nightly builds.
...And 151 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
found
528 pages: # page tags and summary 1 mdn web docs glossary: definitions of web-related terms beginner, definitions, dictionary, glossary, index, landing, terminology web technologies contain long lists of jargon and abbreviations that are used in documentation and coding.
... 3
502
502, bad gateway, glossary, http errors, infrastructure, navigation an http error code meaning "bad gateway".
...
5 api codingscripting, glossary, infrastructure an api (application programming interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface.
...And 134 more matches
Key Values - Web APIs
keyboardevent.key value description virtual keycode windows mac linux android "alt" [
5] the alt (alternative) key.
... vk_menu (0x12) vk_lmenu (0xa4) vk_rmenu (0xa
5) kvk_option (0x3a) kvk_rightoption (0x3d) gdk_key_alt_l (0xffe9) gdk_key_alt_r (0xffea) qt::key_alt (0x01000023) keycode_alt_left (
57) keycode_alt_right (
58) "altgraph" [
5] the altgr or altgraph (alternate graphics) key.
... gdk_key_mode_switch (0xff7e) gdk_key_iso_level3_shift (0xfe03) gdk_key_iso_level3_latch (0xfe04) gdk_key_iso_level3_lock (0xfe0
5) gdk_key_iso_level
5_shift (0xfe11) gdk_key_iso_level
5_latch (0xfe12) gdk_key_iso_level
5_lock (0xfe13) qt::key_altgr (0x01001103 qt::key_mode_switch (0x0100117e) "capslock" the caps lock key.
...And 117 more matches
SVG documentation index - SVG: Scalable Vector Graphics
5 linking guide, svg the target attribute on the svg <a> element doesn't work in mozilla firefox 1.
5.
...versions of svg viewers prior to the release of firefox 1.
5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
... 1
5 svg core attributes attribute, intermediate, reference, svg the svg core attributes are all the common attributes that can be specified on any svg element.
...And 73 more matches
HTTP Index - HTTP
5 choosing between www and non-www urls guide, http, url a recurring question among website owners is whether to choose non-www or www urls.
... 1
5 connection management in http/1.x connection management, guide, http, networking, performance, webmechanics connection management is a key topic in http: opening and maintaining connections largely impacts the performance of web sites and web applications.
... 2
5 reason: cors header ‘origin’ cannot be added cors, corsoriginheadernotadded, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting the user agent was unable to add the required origin header to the http request.
...And 66 more matches
Index - Learn web development
5 css and javascript accessibility best practices accessibility, article, css, codingscripting, guide, javascript, learn, color, contrast, hiding, unobtrusive we hope this article has given you a good amount of detail and understanding about the accessibility issues surrounding css and javascript use on web pages.
... 1
5 how can we design for all types of users?
... 2
5 what are browser developer tools?
...And 59 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 237 pages: # page tags and summary 1 html: hypertext markup language html, html
5, landing, web, l10n:priority html (hypertext markup language) is the most basic building block of the web.
... 4 block-level elements beginner, development, guide, html, html
5, web html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
...
5 dash adaptive streaming for html
5 video guide, html, html
5 dynamic adaptive streaming over http (dash) is an adaptive streaming protocol.
...And 56 more matches
Error codes returned by Mozilla APIs
ns_error_failure (0x8000400
5) this is the most general of all the errors and occurs for all errors for which a more specific error code does not apply.
... ns_error_illegal_value (0x800700
57) an argument supplied to a method was not valid, for instance a null value was supplied as an argument which does not allow null values, or a value was out of range.
... ns_error_factory_not_registered (0x800401
54) returned when a service could not be found.
...And 49 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
in thunderbird , firefox, the javascript preference file that calls the centralized preference file is located in $install_dir_moz_app/defaults/pref, for example in thunderbird this would be repectively for windows/linux: c:\program files\mozilla thunderbird\defaults\pref /usr/lib/thunderbird/default/pref ( it used to be in /usr/lib/thunderbird-version#/default/pref as in /usr/lib/thunderbird-
5/default/pref ) for the record/history purpose ...
... that prefcalls.js is now archive in omni.jar file located at the root of the mozilla apps installation, example of tb
5: # jar -tvf /usr/lib/thunderbird/omni.jar | grep prefcalls.js 7499 sat nov 0
5 09:21:34 cet 2011 defaults/autoconfig/prefcalls.js traditionally (previous apps versions) is was in mozilla_home/default/autoconfig/prefcalls.js.
...lue) function lockpref(prefname, value) function unlockpref(prefname) function getpref(prefname) function getldapattributes(host, base, filter, attribs) function getldapvalue(str, key) function displayerror(funcname, message) function getenv(name) configure autoconfig two directives ask thunderbird to use autoconfig at startup: # cat /usr/lib/thunderbird/defaults/pref/tb-autoconf.js // 20100
526 - modification autoconfig jehan.
...And 45 more matches
WebGL constants - Web APIs
triangle_strip 0x000
5 passed to drawelements or drawarrays to draw a connected group of triangles.
... one_minus_dst_alpha 0x030
5 passed to blendfunc or blendfuncseparate to multiply a component by one minus the destination's alpha.
... blend_color 0x800
5 passed to getparameter to return a the current blend color.
...And 45 more matches
Event reference
drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 3
50ms).
... dragover an element or text selection is being dragged over a valid drop target (fired continuously every 3
50ms).
... afterprint event html
5 the associated document has started printing or the print preview has been closed.
...And 43 more matches
HTML parser threading
main objects nshtml
5parser contains the code for dealing with data from document.write().
... (for historical reasons, it also contains unrelated fragment parsing code that should be refactored into a separate class in due course.) nshtml
5streamparser contains the code for dealing with data from the network.
... nshtml
5parser owns nshtml
5streamparser.
...And 42 more matches
IDBObjectStore - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitaddchrome ...
...And 42 more matches
MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 920
547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24).
...in bug 117
5269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions.
...see webkit's bug 1464
54 fraction without bar, start.
...And 39 more matches
Reference - Archive of obsolete content
well if you combine the two, you can have inherited private variables: function myclass(){ var property =
5; this.tellme = function(){ return property; } } function myotherclass(){ myclass.apply( this ); } var o = new myotherclass; alert( o.tellme() ); //alerts
5 as you'd expect — the preceding comment was added by psygnisfive (talk – contribs) on 22:23, 4 december 2006 terminology we need a terminology appendix.
...--maian 01:43, 30 september 200
5 (pdt) we should define the terms we are using.
...--nickolay 18:40, 16 july 2006 (pdt) js 1.2 and gecko 1.8 per the fix for bug 2
5589
5, "javascript1.2" values for the script's language attribute no longer work, e.g.
...And 38 more matches
sslerr.html
ssl_error_no_certificate -1228
5 "unable to find the certificate or key necessary for authentication." this error has many potential causes; for example: certificate or key not found in database.
... ssl_error_post_warning -1227
5 (unused) ssl_error_ssl2_disabled -12274 "peer only supports ssl version 2, which is locally disabled." the remote server has asked to use ssl version 2, and ssl version 2 is disabled in the local client's configuration.
... ssl_error_no_ciphers_supported -1226
5 "no cipher suites are present and enabled in this program." possible causes: (a) all cipher suites have been configured to be disabled, (b) the only cipher suites that are configured to be enabled are those that are disallowed by cipher export policy, (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key e...
...And 37 more matches
JSAPI reference
the reference applies this versioning scheme retroactively starting with firefox
5.
... firefox 4 is the last release that has a corresponding spidermonkey release with the old scheme, where the jsapi has the version 1.8.
5.
... runtimes and contexts js_init added in spidermonkey 31 js_shutdown struct jsruntime js_newruntimeobsolete since jsapi
52 js_destroyruntime js_getruntimeprivate js_setruntimeprivate js_setnativestackquota added in spidermonkey 17 js_contextiteratorobsolete since jsapi
52 js_finish obsolete since jsapi 19 struct jscontext js_newcontext js_destroycontext js_destroycontextnogc js_setcontextcallback enum jscontextop js_getruntime js_getparentruntime added in spidermonkey 31 js_getobjectruntime added in spidermonkey 17 js_getcontextprivate js_setcontextprivate js_getsecondcontextprivate added in spidermonkey 17 js_setsecondcontextprivate added in spidermonkey 17 js_setinterruptcallback added in spidermonkey 31 js_getinterruptcallback added ...
...And 35 more matches
Color picker tool - CSS: Cascading Style Sheets
data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin:
5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/
5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), ...
... -moz-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0)
50%, hsla(0, 0%, 0%, 0)
50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, h...
...sl(0, 0%,
50%) 0%, hsla(0, 0%,
50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0)
50%, hsla(0, 0%, 0%, 0)
50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%,
50%) 0%, hsla(0, 0%,
50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0)
50%, hsla(0, 0%, 0%, 0)
50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%,
50%) 0%, hsla(0, 0%,
50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0)
50%, hsla(0, 0%, 0%, 0)
50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%,
50%) 0%, hsla(0, 0%,
50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius...
...And 35 more matches
Drawing graphics - Learn web development
canvases with no explicit width and height default to 300 pixels wide by 1
50 pixels high.
... next, add the following lines to the bottom of your javascript: ctx.fillstyle = 'rgb(2
55, 0, 0)'; ctx.fillrect(
50,
50, 100, 1
50); if you save and refresh, you should see a red rectangle has appeared on your canvas.
... its top left corner is
50 pixels away from the top and left of the canvas edge (as defined by the first two parameters), and it is 100 pixels wide and 1
50 pixels tall (as defined by the third and fourth parameters).
...And 34 more matches
NSS_3.12_release_notes.html
n distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc
5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...stroymergelog (see pk11pub.h) pk11_generatekeypairwithopflags (see pk11pub.h) pk11_getpbecryptomechanism (see pk11pub.h) pk11_isremovable (see pk11pub.h) pk11_mergetokens (see pk11pub.h) pk11_writerawattribute (see pk11pub.h) seckey_ecparamstobasepointorderlen (see keyhi.h) seckey_ecparamstokeysize (see keyhi.h) secmod_deletemoduleex (see secmod.h) sec_getregisteredhttpclient (see ocsp.h) sec_pkcs
5isalgorithmpbealgtag (see secpkcs
5.h) vfy_createcontextdirect (see cryptohi.h) vfy_createcontextwithalgorithmid (see cryptohi.h) vfy_verifydatadirect (see cryptohi.h) vfy_verifydatawithalgorithmid (see cryptohi.h) vfy_verifydigestdirect (see cryptohi.h) vfy_verifydigestwithalgorithmid (see cryptohi.h) new macros for camellia support (see blapit.h): nss_camellia nss_camellia_cbc camellia_block_s...
...ize new macros for rsa (see blapit.h): rsa_max_modulus_bits rsa_max_exponent_bits new macros in certt.h: x.
509 v3 ku_encipher_only cert_max_serial_number_bytes cert_max_dn_bytes pkix cert_rev_m_do_not_test_using_this_method cert_rev_m_test_using_this_method cert_rev_m_allow_network_fetching cert_rev_m_forbid_network_fetching cert_rev_m_allow_implicit_default_source cert_rev_m_ignore_implicit_default_source cert_rev_m_skip_test_on_missing_source cert_rev_m_require_info_on_missing_source cert_rev_m_ignore_missing_fresh_info cert_rev_m_fail_on_missing_fresh_info cert_rev_m_stop_testing_on_fresh_info cert_rev_m_continue_testing_on_fresh_info cert_rev_mi_test_each_method_separately cert_rev_mi_test_all_local_information_first cert_rev_mi_no_overall_info_requirement cert_rev_mi_require_so...
...And 34 more matches
Index - Firefox Developer Tools
found 1
58 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
...
5 add-ons web development, web development:tools developer tools that are not built into firefox, but ship as separate add-ons.
... 1
5 browser toolbox debug, firefox, javascript the browser toolbox enables you to debug add-ons and the browser's own javascript code rather than just web pages like the normal toolbox.
...And 33 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
ent-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 unit </div> ...
...an class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin:
5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(2
55, 2...
...
55, 2
55, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(2
55, 2
55, 2
55, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0)
50%, hsla(0, 0%, 0%, 0)
50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%,
50%) 0%, hsla(0, 0%,
50%, 0) 100%); back...
...And 33 more matches
filter - CSS: Cascading Style Sheets
syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(
5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(
50%); filter: hue-rotate(90deg); filter: invert(7
5%); filter: opacity(2
5%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(17
5%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset;...
... filter: blur(
5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.j...
...internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-
5%" y="-
5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.
5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" st...
...And 33 more matches
StringView - Archive of obsolete content
the code stringview.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -90071992
54740992 && nval < 90071992
54740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general ...
...noffset : 0, ntranscrtype = 1
5; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": fputoutptcode = stringview.pututf8charcode; fgetoutptchrsize = stringview.getutf8charlength; ftaview = uint8array; break encswitch; case "utf-16": fputoutptcode = stringview.pututf16charcode; fgetoutptchrsize = stringview.getutf16charlength; ftaview = uint16array; break encswitch;...
...*/ for (var nidx = 0; nidx < noutptlen; nidx++) { awhole[nidx] = vsource.charcodeat(nidx) & 0xff; } break conversionswitch; case
5: /* domstring to utf-8 or to utf-16 */ /* mapping...
...And 32 more matches
KeyboardEvent: code values - Web APIs
keyboardevent.code value code firefox chrome 0x0000 "unidentified" "" 0x0001 "escape" "escape" 0x0002 "digit0" "digit0" 0x0003 "digit1" "digit1" 0x0004 "digit2" "digit2" 0x000
5 "digit3" "digit3" 0x0006 "digit4" "digit4" 0x0007 "digit
5" "digit
5" 0x0008 "digit6" "digit6" 0x0009 "digit7" "digit7" 0x000a "digit8" "digit8" 0x000b "digit9" "digit9" 0x000c "minus" "minus" 0x000d "equal" "equal" 0x000e "backspace" "backspace" 0x00...
...0f "tab" "tab" 0x0010 "keyq" "keyq" 0x0011 "keyw" "keyw" 0x0012 "keye" "keye" 0x0013 "keyr" "keyr" 0x0014 "keyt" "keyt" 0x001
5 "keyy" "keyy" 0x0016 "keyu" "keyu" 0x0017 "keyi" "keyi" 0x0018 "keyo" "keyo" 0x0019 "keyp" "keyp" 0x001a "bracketleft" "bracketleft" 0x001b "bracketright" "bracketright" 0x001c "enter" "enter" 0x001d "controlleft" "controlleft" 0x001e "keya" "keya" 0x001f "keys" "keys" 0x0020 "keyd" "keyd" 0x0021 "keyf" "keyf" 0x0022 "keyg" "keyg" 0x0023 "keyh" "keyh" 0x002...
...4 "keyj" "keyj" 0x002
5 "keyk" "keyk" 0x0026 "keyl" "keyl" 0x0027 "semicolon" "semicolon" 0x0028 "quote" "quote" 0x0029 "backquote" "backquote" 0x002a "shiftleft" "shiftleft" 0x002b "backslash" "backslash" 0x002c "keyz" "keyz" 0x002d "keyx" "keyx" 0x002e "keyc" "keyc" 0x002f "keyv" "keyv" 0x0030 "keyb" "keyb" 0x0031 "keyn" "keyn" 0x0032 "keym" "keym" 0x0033 "comma" "comma" 0x0034 "period" "period" 0x003
5 "slash" "slash" 0x0036 "shiftright" "shiftright" 0x0037 "numpadmultiply" "numpadmultiply" 0x00...
...And 31 more matches
Web audio codec guide - Web media technologies
audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelity unlikely to get more than 40-
50% compression lossy compression always some loss of fidelity; the higher the compression, the more the loss compression of up to 80-9
5% possible quality setting the higher the quality, the better the fidelity of the encoded audio the higher the fidelity, the larger the resulting file becomes, though the amount of change varies from codec to codec bit rate ...
...
5.1 surround sound has five audio channels, plus one low frequency enhancement (lfe) channel.
...when you see the number of audio channels written in the form x.y (such as 2.1 or
5.1), the number after the decimal point, y, is the number of lfe channels.
...And 31 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
javascript was created in 199
5 by brendan eich while he was an engineer at netscape.
...many parts of the fourth edition formed the basis for ecmascript edition
5, published in december of 2009, and for the 6th major edition of the standard, published in june of 201
5.
...javascript supports object-oriented programming with object prototypes, instead of classes (see more about prototypical inheritance and es201
5 classes).
...And 29 more matches
Experimental features in Firefox
nightly
53 yes developer edition
53 no beta
53 no release
53 no preference name dom.dialog_element.enabled global attribute: inputmode our implementation of the inputmode global attribute has been updated as per the whatwg spec (bug 1
509
527), but we still need to make other changes too, like making it available on contenteditable content.
... see also bug 120
5133 for details.
... nightly 7
5 yes developer edition 7
5 no beta 7
5 no release 7
5 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
...And 28 more matches
MathML Torture Test
option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/4
5/d
5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.real...
...ityripple.com/samples/b8/da4a
50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" width="
58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <m...
... <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>4</td> <td><img src="https://udn.realityripple.com/samples/a7/27acbeabcf.png" width="76" height="2
5" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mfrac> <mn>2</mn> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </msup> </mrow> </...
...And 27 more matches
NSS tools : certutil
the minimum is
512 bits and the maximum is 16384 bits.
... elliptic curve name is one of the ones from suite b: nistp2
56, nistp384, nistp
521 if nss has been compiled with support curves outside of suite b: sect163k1, nistk163, sect163r1, sect163r2, nistb163, sect193r1, sect193r2, sect233k1, nistk233, sect233r1, nistb233, sect239k1, sect283k1, nistk283, sect283r1, nistb283, sect409k1, nistk409, sect409r1, nistb409, sect
571k1, nistk
571, sect
571r1, nistb
571, secp160k1, secp160r1, s...
...ecp160r2, secp192k1, secp192r1, nistp192, secp224k1, secp224r1, nistp224, secp2
56k1, secp2
56r1, secp384r1, secp
521r1, prime192v1, prime192v2, prime192v3, prime239v1, prime239v2, prime239v3, c2pnb163v1, c2pnb163v2, c2pnb163v3, c2pnb176v1, c2tnb191v1, c2tnb191v2, c2tnb191v3, c2pnb208w1, c2tnb239v1, c2tnb239v2, c2tnb239v3, c2pnb272w1, c2pnb304w1, c2tnb3
59w1, c2pnb368w1, c2tnb431r1, secp112r1, secp112r2, secp128r1, secp128r2, sect113r1, sect113r2 sect131r1, sect131r2 -r display a certificate's binary der encoding when listing information about that certificate with the -l option.
...And 27 more matches
BluetoothCharacteristicProperties - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome full support
56notes full support
56notes notes chromeos and macos only.
... full support
56notes disabled notes linux and versions of windows earlier than 10.disabled from version
56: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...x no support noie no support noopera full support yessafari no support nowebview android no support nochrome android full support
56firefox android no support noopera android full support yessafari ios no support nosamsung internet android full support 6.0authenticatedsignedwrites experimentalchrome full support ...
...And 27 more matches
IDBDatabase - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="1
51" y="1" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabasechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 26 more matches
Border-image generator - CSS: Cascading Style Sheets
er"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc3
5720
5.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border
5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b28
5d3da.svg" data-stateid="border6"/>...
..."name"> border-image-source: </span> <span id="out-border-source" class="value"> </span> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.
54%; } .span_8 { width: 66.08%; } .span_7 { width:
57.62%; } .span_6 { width: 49.16%; } .span_
5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 1
5.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* groupi...
... } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width:
50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/
5679/arrows.png") center left no...
...And 26 more matches
New Skin Notes - Archive of obsolete content
--nickolay 10:38, 31 aug 200
5 (pdt) existing fixes should be on test/docs/ now.
... edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 9
5% or something like that.
...-- dria when a page is redirected, need to say-so and what it was redirected from, (see document for an example of such.) this is only an issue in mw1.
5 so far.
...And 25 more matches
certutil
the minimum is
512 bits and the maximum is 8192 bits.
...the subject identification format follows rfc #148
5.
... -y exp set an alternate exponent value to use in generating a new rsa public key for the database, instead of the default value of 6
5537.
...And 25 more matches
SpiderMonkey 1.8.7
draft in progress - this is a draft, and right now it's mostly just a copy of the 1.8.
5 release notes.
... xxx needs updating the mozilla javascript team is pleased to announce the release of spidermonkey 1.8.
5.
... you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js18
5-1.0.0.tar.gz (md
5 checksum: a4
57436
5938222adca0a6bd33329cb32).
...And 25 more matches
Fullscreen API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support 71 full support 71 full support 1
5alternate name alternate name uses the non-standard name: webkitisfullscreenedge full support ≤79 full support ≤79 full support ≤79alternate name alternate name uses the non-standard name: webkitisfullscreenfirefox full support ...
... 64 full support 64 no support 49 — 6
5disabled disabled from version 49 until version 6
5 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
... no support 9 — 6
5alternate name alternate name uses the non-standard name: mozfullscreenie no support noopera full support
58 full support
58 full support 1
5alternate name alternate name uses the non-standard name: webkitisfullscreensafari full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support 71 ...
...And 25 more matches
Box-shadow generator - CSS: Cascading Style Sheets
<div 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> <d...
...iv 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-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> </div> <div class="slidergroup"> <div class="ui-slider-name"> spread </div> <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> <div class="ui-slider" data-topic="spread" data-min="-100" data-max="100" data-step="1" data-value="
50"> </div> <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> </div> </div> </div> <div id="element_properties" class="category"> <div class="title"> class e...
...And 25 more matches
Applying styles and colors - Web APIs
// these all set the fillstyle to 'orange' ctx.fillstyle = 'orange'; ctx.fillstyle = '#ffa
500'; ctx.fillstyle = 'rgb(2
55, 16
5, 0)'; ctx.fillstyle = 'rgba(2
55, 16
5, 0, 1)'; a fillstyle example in this example, we once again use two for loops to draw a grid of rectangles, each in a different color.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(2
55 - 42.
5 * i) + ', ' + math.floor(2
55 - 42.
5 * j) + ', 0)'; ctx.fillrect(j * 2
5, i * 2
5, 2
5, 2
5); } } } <canvas id="canvas" width="1
50" height="1
50"></canvas> draw(); the result looks like this: screenshotlive sample a strokestyle example this example is similar to the one above, but uses the strokestyle property to change the colors of the shapes' outlin...
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(2
55 - 42.
5 * i) + ', ' + math.floor(2
55 - 42.
5 * j) + ')'; ctx.beginpath(); ctx.arc(12.
5 + j * 2
5, 12.
5 + i * 2
5, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="1
50" height="1
50"></canvas> draw(); the result looks like this: screenshotlive sample transparency in addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (or translucent) shapes.
...And 24 more matches
Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.
5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 2
50px; height:12
5px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-durati...
...on: 0.
5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.
5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width:
50px; height:
50px; background-color: blue; color: yellow; font-size: 18px; left: 1
50px; top: 2
5px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.
5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv col...
...or; transition-duration: 0.
5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 2
50px; height:12
5px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration: 1s; ...
...And 24 more matches
IDBIndex - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbindexchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcountchrome ...
...And 23 more matches
nsIAccessibleEvent
event_reorder 0x8004 0x00
5c 0x0003 an object's children have changed.
... event_focus 0x800
5 0x0008 0x000
5 an object has received the keyboard focus.
... event_selection_within 0x8009 0x001
5 0x0012 numerous selection changes have occurred within a container object.
...And 22 more matches
Using CSS gradients - CSS: Cascading Style Sheets
in this example, the colors share a color stop at the
50% mark, halfway through the gradient: <div class="striped"></div> div { width: 120px; height: 120px; } .striped { background: linear-gradient(to bottom left, cyan
50%, palegoldenrod
50%); } gradient hints by default, the gradient transitions evenly from one color to the next.
...in this example, we've moved the midpoint of the transition from the
50% mark to the 10% mark.
... <div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red 4
5%, cyan
55%, cyan 70%, yellow 80% ); background: linear-gradient(to left, lime 20%, red 30% 4
5%, cyan
55% 70%, yellow 80% ); } .multiposition-stop2 { background: linear-gradient(to left, lime 2
5%, red 2
5%, red
50%, cyan
50%, cyan 7
5%, yellow 7
5% ); background: linear-gradient(to left, lime 2
5%, red 2
5%
50%, cyan
50% 7
5%, yellow 7
5% ); } in the first example above, t...
...And 22 more matches
Implementation Status - Archive of obsolete content
namespaces supported 3.2.1 common attributes supported 3.2.2 linking attributes supported 3.2.3 single-node binding attributes supported 3.2.4 node-set binding attributes supported 3.2.
5 model item property attributes partial in some cases a loop error can occur on valid bindings 302168; 3.3.1 model supported 3.3.2 instance partial instance element with two child element does not trigger exception 337302; 3.3.3 submission partial no support...
... 292333; 3.4 extension module unsupported 300760; 3.
5 mustunderstand module unsupported 3007
57; 4.
... 4.2.4 xforms-model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2 xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.
5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details ...
...And 21 more matches
mix-blend-mode - CSS: Cascading Style Sheets
r | luminosity examples effect of different mix-blend-mode values <div class="grid"> <div class="col"> <div class="note">blending in isolation (no blending with the background)</div> <div class="row isolate"> <div class="cell"> normal <div class="container normal"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 1
50 1
50"> <defs> <lineargradient id="red"> <stop offset="0" stop-color="hsl(0,100%,
50%)" /> <stop offset="100%" stop-color="hsl(0,0%,100%)" /> </lineargradient> <lineargradient id="green"> <stop offset="0" stop-color="hsl(120,100%,
50%)" /> <stop offset="100%" st...
...op-color="hsl(120,0%,100%)" /> </lineargradient> <lineargradient id="blue"> <stop offset="0" stop-color="hsl(240,100%,
50%)" /> <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item g" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item b" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> multiply <div class="container multiply"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 1
50 1
50...
..."> <ellipse class="item r" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item g" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item b" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> </svg> </div> </div> </div> <div class="cell"> darken <div class="container darken"> <div class="group"> <div class="item firefox"></div> <svg viewbox="0 0 1
50 1
50"> <ellipse class="item r" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item g" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> <ellipse class="item b" cx="7
5" cy="7
5" rx="2
5" ry="70"></ellipse> </svg> </div> </div> </div...
...And 21 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
it also includes compatibility features which allow it to reasonably handle legacy content which was developed for earlier generations of browsers such as netscape navigator 4 as well as features which provide compatibility with internet explorer
5 and 6.
...fortunately, other browsers such as opera (versions 7 & later) and to a lesser extent, internet explorer (versions
5.
5 & later) also support the standards to a degree.
...html itself was not standardized until html 2.0 was introduced in late 199
5 and it did not even include tables.
...And 20 more matches
Index - Game development
found 74 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html
5 games, javascript games, web gaming is one of the most popular computer activities.
... 4 index meta found 74 pages:
5 introduction to html
5 game development (summary) firefox os, games, html
5, mobile games built with html
5 work on smartphones, tablets, pcs and smart tvs.update your game whenever you want.players can play the game anywhere, anytime.
... 7 publishing games games, html
5, javascript, monetization, promotion, distribution, publishing this series of articles looks at the options you have when you want to publish and distribute your game, and earn something out of it while you wait for it to become famous.
...And 20 more matches
Mozilla MathML Status
see bug
534962.
...see bug 9
589
57.
...the mathvariant attribute is fully supported starting with (firefox 28.0 / thunderbird 28.0 / seamonkey 2.2
5).
...And 20 more matches
NSS Tools ssltap
availability this tool is known to build on solaris 2.
5.1 (sunos
5.
5.1) and windows nt 4.0.
...the following are well-known port numbers: http 80 https 443 smtp 2
5 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps
563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
... command ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output output connected to interzone.mcom.com:443--> [alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md
5 (0x020080) ssl2/rsa/rc4-40/md
5 (0x030080) ssl2/rsa/rc2cbc128/md
5 (0x040080) ssl2/rsa/rc2cbc40/md
5 (0x060040) ssl2/rsa/des64cbc/md
5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md
5 (0x000004) ssl3/rsa/rc4-128/md
5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/r...
...And 20 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 2
5 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps
563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
... $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md
5 (0x020080) ssl2/rsa/rc4-40/md
5 (0x030080) ssl2/rsa/rc2cbc128/md
5 (0x040080) ssl2/rsa/rc2cbc40/md
5 (0x060040) ssl2/rsa/des64cbc/md
5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md
5 (0x000004) ssl3/rsa/rc4-128/md
5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (...
...0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md
5 (0x000006) ssl3/rsa/rc2cbc40/md
5 } session-id = { } challenge = { 0xec
5d 0x8edb 0x37c9 0xb
5c9 0x7b70 0x8fe9 0xd1d3 0x2
592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e
5 |.....
...And 20 more matches
IDBTransaction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="1
51" y="1" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectsto...
... mode constants these constants are no longer available — they were removed in gecko 2
5.
...And 20 more matches
Mozilla’s UAAG evaluation report
longdesc for frame: not supported, see bug 36
58 noframe for frame: must use user style sheets to render this.
...(p1) nr need to look into this 2.
5 make captions, transcripts available.
... longdesc for frame: not supported, see bug 36
58 noframe for frame: must use user style sheets to render this.
...And 19 more matches
NSS tools : ssltab
the following are well-known port numbers: * http 80 * https 443 * smtp 2
5 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps
563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md
5 (0x020080) ssl2/rsa/rc4-40/md
5 (0x030080) ssl2/rsa/rc2cbc128/md
5 (0x040080) ssl2/rsa/rc2cbc40/md
5 (0x060040) ssl2/rsa/des64cbc/md
5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md
5 (0x000004) ssl3/rsa/rc4-128/md
5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md
5 (0x000006) s...
...sl3/rsa/rc2cbc40/md
5 } session-id = { } challenge = { 0xec
5d 0x8edb 0x37c9 0xb
5c9 0x7b70 0x8fe9 0xd1d3 0x2
592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e
5 |.....
...And 19 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 2
5 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps
563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x010080) ssl2/rsa/rc4-128/md
5 (0x020080) ssl2/rsa/rc4-40/md
5 (0x030080) ssl2/rsa/rc2cbc128/md
5 (0x040080) ssl2/rsa/rc2cbc40/md
5 (0x060040) ssl2/rsa/des64cbc/md
5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md
5 (0x000004) ssl3/rsa/rc4-128/md
5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md
5 (0x000006) s...
...sl3/rsa/rc2cbc40/md
5 } session-id = { } challenge = { 0xec
5d 0x8edb 0x37c9 0xb
5c9 0x7b70 0x8fe9 0xd1d3 0x2
592 } } ] <-- [ sslrecord { 0: 16 03 00 03 e
5 |.....
...And 19 more matches
Hacking Tips
$ gdb --args js […] (gdb) b js::reportoverrecursed (gdb) r js> function f(i) { if (i % 2) f(i + 1); else f(i + 3); } js> f(0) breakpoint 1, js::reportoverrecursed (maybecx=0xfdca70) at /home/nicolas/mozilla/ionmonkey/js/src/jscntxt.cpp:49
5 49
5 if (maybecx) (gdb) call js::dumpbacktrace(maybecx) #0 (nil) typein:2 (0x7fffef1231c0 @ 0) #1 (nil) typein:2 (0x7fffef1231c0 @ 24) #2 (nil) typein:3 (0x7fffef1231c0 @ 47) #3 (nil) typein:2 (0x7fffef1231c0 @ 24) #4 (nil) typein:3 (0x7fffef1231c0 @ 47) […] #2
51
57 0x7fffefbbc2
50 typein:2 (0x7fffef1231c0 @ 24) #2
51
58 0x7fffefbbc1c8...
... typein:3 (0x7fffef1231c0 @ 47) #2
51
59 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #2
5160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #2
5161 0x7fffefbbc030 typein:
5 (0x7fffef123280 @ 9) note, you can do the exact same exercise above using lldb (necessary on osx after apple removed gdb) by running lldb -f js then following the remaining steps.
...); (gdb) enable unwinder .* spidermonkey (gdb) backtrace 10 #0 0x0000000000f89979 in js::math_cos(jscontext*, unsigned int, js::value*) (cx=0x14f2640, argc=1, vp=0x7fffffff6a88) at js/src/jsmath.cpp:338 #1 0x0000000000ca9c6e in js::calljsnative(jscontext*, bool (*)(jscontext*, unsigned int, js::value*), js::callargs const&) (cx=0x14f2640, native=0xf89960 , args=...) at js/src/jscntxtinlines.h:23
5 #2 0x0000000000c8762
5 in js::invoke(jscontext*, js::callargs const&, js::maybeconstruct) (cx=0x14f2640, args=..., construct=js::no_construct) at js/src/vm/interpreter.cpp:476 #3 0x000000000069bdcf in js::jit::docallfallback(jscontext*, js::jit::baselineframe*, js::jit::iccall_fallback*, uint32_t, js::value*, js::mutablehandlevalue) (cx=0x14f2640, frame=0x7fffffff6ad8, stub_=0x1798838, argc=1, v...
...And 19 more matches
Accessibility documentation index - Accessibility
found 10
5 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in web development means enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
...
5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
... 1
5 using the alert role aria, accessibility, advanced, css, example, html, needscontent, alert, alert role, alertrole, alerts, assitive technology, role configuration, wcag1.2.1, wcag3.3.1 the alert role is used to communicate an important and usually time-sensitive message to the user.
...And 19 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
example html date and time strings string date and/or time 200
5-06-07 june 7, 200
5 [details] 08:4
5 8:4
5 am [details] 08:4
5:2
5 8:4
5 am and 2
5 seconds [details] 0033-08-04t03:40 3:40 am on august 4, 33 [details] 1977-04-01t14:00:30 30 seconds after 2:00 pm on april 1, 1977 [details] 1901-01-01t00:00z midnight utc on january 1, 1901 [details] 1901-01-01t00:00:01-04:00 1 ...
... while the gregorian calendar wasn't created until the year 1
582 (replacing the similar julian calendar), for html's purposes, the gregorian calendar is extended back to the year 1 c.e.
... a year is normally 36
5 days long, except during leap years.
...And 19 more matches
Index - HTTP
5 accept-language content negotiation, http, http header, reference, request header the accept-language request http header advertises which languages the client is able to understand, and which locale variant is preferred.
... 1
5 age caching, http, response, header the age header contains the time in seconds the object has been in a proxy cache.
... 2
5 content-length http, headers, reference the content-length entity header indicates the size of the entity-body, in bytes, sent to the recipient.
...And 19 more matches
requiredFeatures - SVG: Scalable Vector Graphics
g this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 2
50 4
5" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="2
5" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="2
5" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-featu...
...n>, <font-face-src>, <font-face-uri>, <font-face-format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face-src> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#extensibility the browser supports the <foreignobject> element example svg <svg width="4
50" height="1170" xmlns="http://www.w3.org/2000/svg"> <!-- testing : http://www.w3.org/tr/svg11/feature#svg --> <rect class="ko" x="10" y="10" height="2
5" width="430" /> <rect class="ok" x="10" y="10" height="2
5" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg" /> <text x="20" y="27">http://www.w3.org/tr/svg11/feature#svg</text> <!-- testing : http://www.w3.org/t...
...r/svg11/feature#svgdom --> <rect class="ko" x="10" y="3
5" height="2
5" width="430" /> <rect class="ok" x="10" y="3
5" height="2
5" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svgdom" /> <text x="20" y="
52">http://www.w3.org/tr/svg11/feature#svgdom</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svg-static --> <rect class="ko" x="10" y="60" height="2
5" width="430" /> <rect class="ok" x="10" y="60" height="2
5" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#svg-static" /> <text x="20" y="77">http://www.w3.org/tr/svg11/feature#svg-static</text> <!-- testing : http://www.w3.org/tr/svg11/feature#svgdom-static --> <rect class="ko" x="10" y="8
5" height="2
5" width="430" /> <rect class="ok" x="10" y="8
5" height="2
5" width="430" ...
...And 19 more matches
Localization and Plurals
plural rule #0 (1 form) families: asian (chinese, japanese, korean), persian, turkic/altaic (turkish), thai, lao everything: 0, 1, 2, 3, 4,
5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1
5, 16, 17, 18, 19, 20, 21, 22, 23, 24, 2
5, 26, 27, 28, 29, 30, 31, 32, 33, 34, 3
5, 36, 37, 38, 39, 40, 41, 42, 43, 44, 4
5, 46, 47, 48, 49, … plural rule #1 (2 forms) families: germanic (danish, dutch, english, faroese, frisian, german, norwegian, swedish), finno-ugric (estonian, finnish, hungarian), language isolate (basque), latin/greek (greek), semitic (heb...
...rew), romanic (italian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2, 3, 4,
5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1
5, 16, 17, 18, 19, 20, 21, 22, 23, 24, 2
5, 26, 27, 28, 29, 30, 31, 32, 33, 34, 3
5, 36, 37, 38, 39, 40, 41, 42, 43, 44, 4
5, 46, 47, 48, 49,
50, … plural rule #2 (2 forms) families: romanic (french, brazilian portuguese), lingala is 0 or 1: 0, 1 everything else: 2, 3, 4,
5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1
5, 16, 17, 18, 19, 20, 21, 22, 23, 24, 2
5, 26, 27, 28, 29, 30, 31, 32, 33, 34, 3
5, 36, 37, 38, 39, 40, 41, 42, 43, 44, 4
5, 46, 47, 48, 49,
50,
51, … plural rule #3 (3 forms) families: baltic (latvian, latgalian) ends in 0: 0 ends in 1, excluding 11: 1, 21, 31, 41,
51, 61, 71, 81, 91, 101, 121, 131, 141, 1
51, 161, 171, 181, 191, 201, 221, 23...
...1, 241, 2
51, 261, 271, 281, 291, … everything else: 2, 3, 4,
5, 6, 7, 8, 9, 11, 12, 13, 14, 1
5, 16, 17, 18, 19, 22, 23, 24, 2
5, 26, 27, 28, 29, 32, 33, 34, 3
5, 36, 37, 38, 39, 42, 43, 44, 4
5, 46, 47, 48, 49,
52,
53, … plural rule #4 (4 forms) families: celtic (scottish gaelic) is 1 or 11: 1, 11 is 2 or 12: 2, 12 is 3-10 or 13-19: 3, 4,
5, 6, 7, 8, 9, 10, 13, 14, 1
5, 16, 17, 18, 19 everything else: 0, 20, 21, 22, 23, 24, 2
5, 26, 27, 28, 29, 30, 31, 32, 33, 34, 3
5, 36, 37, 38, 39, 40, 41, 42, 43, 44, 4
5, 46, 47, 48, 49,
50,
51, … plural rule #
5 (3 forms) families: romanic (romanian) is 1: 1 is 0 or ends in 01-19, excluding 1: 0, 2, 3, 4,
5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 1
5, 16, 17, 18, 19, 101, 102, 103, 104, 10
5, 106, 107, 108, 109, 110, 111, 112, 113, 114, 11
5, 116, 117, ...
...And 18 more matches
nsIAccessibleRole
role_sound
5 represents a system sound, which is associated with various system events.
... role_document 1
5 represents a document window.
... role_columnheader 2
5 represents a column header, providing a visual label for a column in a table.
...And 18 more matches
Mozilla Quirks Mode Behavior
obsolete since gecko
50 list bullets do not inherit the font size of the list (bug 973
51).
... removed in firefox
50 (bug 648331).
... orphaned dd has generated content :before instead of margin (bug
5119).
...And 17 more matches
sslfnc.html
syntax #include "ssl.h" secstatus ssl_cipherprefsetdefault(print32 cipher, prbool enabled); parameters this function has the following parameters: cipher one of the following values for ssl2 (factory settings for all are enabled): ssl_en_rc4_128_with_md
5 ssl_en_rc4_128_export40_with_md
5 ssl_en_rc2_128_cbc_with_md
5 ssl_en_rc2_128_cbc_export40_with_md
5 ssl_en_des_64_cbc_with_md
5 ssl_en_des_192_ede3_cbc_with_md
5 or one of the following values for ssl3/tls (unless indicated otherwise, factory settings for all are enabled): tls_dhe_rsa_with_aes_2
56_cbc_sha (not enabled by default; client side only) tls_...
...dhe_dss_with_aes_2
56_cbc_sha (not enabled by default; client side only) tls_rsa_with_aes_2
56_cbc_sha (not enabled by default) ssl_fortezza_dms_with_rc4_128_sha tls_dhe_dss_with_rc4_128_sha (not enabled by default; client side only) tls_dhe_rsa_with_aes_128_cbc_sha (not enabled by default; client side only) tls_dhe_dss_with_aes_128_cbc_sha (not enabled by default; client side only) ssl_rsa_with_rc4_128_md
5 ssl_rsa_with_rc4_128_sha (not enabled by default) tls_rsa_with_aes_128_cbc_sha (not enabled by default) ssl_dhe_rsa_with_3des_ede_cbc_sha (not enabled by default; client side only) ssl_dhe_dss_with_3des_ede_cbc_sha (not enabled by default; client side only) ssl_rsa_fips_with_3des_ede_cbc_sha ssl_rsa_with_3des_ede_cbc_sha ssl_...
...fortezza_dms_with_fortezza_cbc_sha ssl_dhe_rsa_with_des_cbc_sha (not enabled by default; client side only) ssl_dhe_dss_with_des_cbc_sha (not enabled by default; client side only) ssl_rsa_fips_with_des_cbc_sha ssl_rsa_with_des_cbc_sha tls_rsa_export1024_with_rc4_
56_sha tls_rsa_export1024_with_des_cbc_sha ssl_rsa_export_with_rc4_40_md
5 ssl_rsa_export_with_rc2_cbc_40_md
5 ssl_fortezza_dms_with_null_sha ssl_rsa_with_null_sha (not enabled by default) ssl_rsa_with_null_md
5 (not enabled by default) enabled if nonzero, the specified cipher is enabled.
...And 17 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html
5 standard arguments-passing functionality.
... just add this code to the top of your script: /*\ |*| |*| polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html
5 standard syntax).
...however, in the following: settimeout(myarray.mymethod, 1.0*1000); // prints "[object window]" after 1 second settimeout(myarray.mymethod, 1.
5*1000, '1'); // prints "undefined" after 1.
5 seconds the myarray.mymethod function is passed to settimeout, then when it's called, its this is not set so it defaults to the window object.
...And 17 more matches
JavaScript modules - JavaScript
efirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportchrome full support 61edge full support 16 full support 16 full support 1
5disabled disabled from version 1
5: this feature is behind the experimental javascript features preference.firefox full support 60 full support 60 no support
54 — 60disabled disabled from version
54 until version 60 (exclusive): this feature is behind the dom.modulescripts.enabled p...
... 48safari full support 10.1webview android full support 61chrome android full support 61firefox android full support 60 full support 60 no support
54 — 60disabled disabled from version
54 until version 60 (exclusive): this feature is behind the dom.modulescripts.enabled preference.
... to change preferences in firefox, visit about:config.opera android full support 4
5safari ios full support 10.3samsung internet android full support 8.0nodejs full support 13.2.0notes full support 13.2.0notes notes modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module".
...And 17 more matches
WebAssembly - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox...
...And 17 more matches
Web video codec guide - Web media technologies
codec name (short) full codec name container support av1 aomedia video 1 mp4, webm avc (h.264) advanced video coding 3gp, mp4, webm h.263 h.263 video 3gp hevc (h.26
5) high efficiency video coding mp4 mp4v-es mpeg-4 video elemental stream 3gp, mp4 mpeg-1 mpeg-1 part 2 visual mpeg, quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3gp, ogg, webm vp9 video processor 9 mp4, ogg, webm factors affecting the encoded ...
...additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red [rgba(2
55, 0, 0, 1)]), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors.
...it achieves higher data compression rates than vp9 and h.26
5/hevc, and as much as
50% higher rates than avc.
...And 17 more matches
WebAssembly
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jswebassemblychrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerrorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox...
...And 17 more matches
reftest opportunities files - Archive of obsolete content
ron http://dbaron.org/css/test/cachetest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing
5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/un...
...ivsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec0
51103 http://dbaron.org/css/test/sec0
51103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://db...
...aron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec080
5 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec09020
5 http://dbaron.org/css/test/sec090301 http://dbaron.org/css/test/sec090302a http://dbaron.org/css/test/sec090302b http://dbaron.org/css/test/sec090302c http://dbaron.org/css/test/sec090302d http://dbaron.org/css/test/sec090
5 http://dbaron.org/css/test/sec414 http://dbaron.org/css/test/floatpos http://dbaron.org/css/test/floatpos2 http://dbaron.org/css/test/sec0907 http://dbaron.org/css/test/sec0909 http://dbaron.org/css/test/bidi http://...
...And 16 more matches
Basic math in JavaScript — numbers and operators - Learn web development
10, 400, or -
5.
... floating point numbers (floats) have decimal points and decimal places, for example 12.
5, and
56.7786
543.
... first of all, let's declare a couple of variables and initialize them with an integer and a float, respectively, then type the variable names back in to check that everything is in order: let myint =
5; let myfloat = 6.667; myint; myfloat; number values are typed in without quote marks — try declaring and initializing a couple more variables containing numbers before you move on.
...And 16 more matches
Python binding for NSS
nss provides cryptography services supporting ssl, tls, pki, pkix, x
509, pkcs*, etc.
...`pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha2
56 ssl.tls_aes_2
56_gcm_sha384 ssl.tls_chacha20_poly130
5_sha2
56 release 1.0.0 release date 2016-09-01 scm tag pynss_release_1_0_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_0/src/ change log official 1.0.0 release, only minor tweaks from the 1.0...
... add tls chacha20 poly130
5 constants.
...And 16 more matches
BluetoothRemoteGATTDescriptor - Web APIs
bluetoothremotegattdescriptor.uuidread only returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-8000-0080
5f9b34fb' for theclient characteristic configuration descriptor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothremotegattdescriptor experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
...And 16 more matches
Lexical grammar - JavaScript
only the following unicode code points are treated as line terminators in ecmascript, other line breaking characters are treated as white space (for example, next line, nel, u+008
5 is considered as white space).
... keywords reserved keywords as of ecmascript 201
5 break case catch class const continue debugger default delete do else export extends finally for function if import in instanceof new return super switch this throw try typeof var void while with yield future reserved keywords the following are reserved as future keywords by the ecmascript specification.
...as described in es
5.github.com/#a.1, these are all identifiernames which do not exclude reservedwords.
...And 16 more matches
Legacy layout methods - Learn web development
<div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">
5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col span1">13</div> <div class="col span6">14</div> <div class="col span3">1
5</div> <div class="col span2">16</div> </div> </div...
...add the following rule to the bottom of your css: .col { float: left; margin-left: 20px; width: 60px; background: rgb(2
55, 1
50, 1
50); } the top row of single columns will now lay out neatly as a grid.
...*/ .col.span4 { width: 300px; } .col.span
5 { width: 380px; } .col.span6 { width: 460px; } .col.span7 { width:
540px; } .col.span8 { width: 620px; } .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } .col.span12 { width: 940px; } with these classes created we can now lay out different width columns on the grid.
...And 15 more matches
Web applications and ARIA FAQ - Accessibility
browsers aria is supported in the following browsers: browser minimum version notes firefox 3.0+ works with nvda, jaws 10+, and orca chrome latest screen reader support still experimental as of chrome 1
5 safari 4+ safari
5 support is much improved.
... live region support requires safari
5 with voiceover on ios
5 or os x lion opera 9.
5+ requires voiceover on os x.
...(tbd) voiceover osx 10.
5, ios 4 os x 10.7 ios
5 jaws 8 10 window-eyes 7 no live region support currently zoomtext ?
...And 15 more matches
Rich-Text Editing in Mozilla - Developer guides
once designmode is turned off however (as this now seems possible in mozilla 1.
5) the events become active again.
...--fumble 18:13, 24 apr 200
5 (pdt) example 1 the first example is an html document setting its own designmode to "on".
...(opre); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=4
50,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select...
...And 15 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="color" name="color"/> html
5 date a control for entering a date (year, month, and day, with no time).
... <input type="date" name="date"/> html
5 datetime-local a control for entering a date and time, with no time zone.
... <input type="datetime-local" name="datetime-local"/> html
5 email a field for editing an email address.
...And 15 more matches
HTTP response status codes - HTTP
responses are grouped in five classes: informational responses (100–199), successful responses (200–299), redirects (300–399), client errors (400–499), and server errors (
500–
599).
... 20
5 reset content tells the user-agent to reset the document which sent this request.
... 30
5 use proxy defined in a previous version of the http specification to indicate that a requested response must be accessed by a proxy.
...And 15 more matches
Grammar and types - JavaScript
you can use most of iso 88
59-1 or unicode letters such as å and ü in identifiers.
... javascript before ecmascript 201
5 does not have block statement scope.
... for example, the following code will log
5, because the scope of x is the global context (or the function context if the code is part of a function).
...And 15 more matches
Numbers and dates - JavaScript
numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee 7
54 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of
53 bits).
... integer values up to ±2
53 − 1 can be represented exactly.
... decimal numbers 1234
567890 42 // caution when using leading zeros: 0888 // 888 parsed as decimal 0777 // parsed as octal in non-strict mode (
511 in decimal) note that decimal literals can start with a zero (0) followed by another decimal digit, but if every digit after the leading 0 is smaller than 8, the number gets parsed as an octal number.
...And 15 more matches
The "codecs" parameter in common media types - Web media technologies
av1 the syntax of the codecs parameter for av1 is defined the av1 codec iso media file format binding specification, section
5: codecs parameter string.
...some example av1 codec strings: av01.2.1
5m.10.0.100.09.16.09.0 av1 professional profile, level
5.3, main tier, 10 bits per color component, 4:2:2 chroma subsampling using itu-r bt.2100 color primaries, transfer characteristics, and ycbcr color matrix.
... av01.0.1
5m.10 av1 main profile, level
5.3, main tier, 10 bits per color component.
...And 15 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
certificate-based authentication figure
5 shows how client authentication works using certificates and the ssl protocol.
... like figure 4, figure
5 assumes that the user has already decided to trust the server and has requested a resource, and that the server has requested client authentication in the process of evaluating whether to grant access to the requested resource.
... unlike the process shown in figure 4, the process shown in figure
5 requires the use of ssl.
...And 14 more matches
Introduction to SSL - Archive of obsolete content
to ensure that red hat console can control an ssl-enabled server, the server must enable at least one of the following cipher suites for ssl 3.0: rc4 with 128-bit encryption and md
5 message authentication rc4 with 40-bit encryption and md
5 message authentication rc2 with 40-bit encryption and md
5 message authentication no encryption, md
5 message authentication only cipher suites with rsa key exchange table 1 lists the cipher suites supported by ssl that use the rsa key-exchange algorithm.
...because the key size is so large, there are more possible keys than for any other cipher-approximately 3.7 * 10
50.
... rc4 with 128-bit encryption and md
5 message authentication because the rc4 and rc2 ciphers have 128-bit encryption, they are the second strongest next to triple des (data encryption standard), with 168-bit encryption.
...And 14 more matches
Choosing the right approach - Learn web development
androidfirefox for androidopera for androidsafari on iossamsung internetsettimeoutchrome full support 30edge full support 12firefox full support 1 full support 1 full support
52notes notes setinterval now defined on windoworworkerglobalscope mixin.ie full support 4opera full support 4safari full support 1webview android full support 4.4chrome android full support ...
... 30firefox android full support 4 full support 4 full support
52notes notes setinterval now defined on windoworworkerglobalscope mixin.opera android full support 10.1safari ios full support 1samsung internet android full support 3.0supports parameters for callbackchrome full support yesedge full support 12firefox full support yesie full support ...
... firefox full support
55ie ?
...And 14 more matches
Web Console remoting - Firefox Developer Tools
in firefox 2
5 we added the getpreferences request packet: { "to": "conn0.console34", "type": "getpreferences", "preferences": [ "networkmonitor.saverequestandresponsebodies" ] } reply packet: { "preferences": { "networkmonitor.saverequestandresponsebodies": false }, "from": "conn0.console34" } you can also use the webconsoleclient.getpreferences(prefs, onresponse).
... send http requests starting with firefox 2
5 you can send an http request using the console actor: { "to": "conn0.console9", "type": "sendhttprequest", "request": { "url": "http://localhost", "method": "get", "headers": [ { name: "header-name", value: "header value", }, // ...
... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2013-08-26t19:
50:03.699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method.
...And 14 more matches
Using the CSS Painting API - Web APIs
if set to false, all colours used on the canvas will be fully opaque */ static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context a subset of the html
5 canvas api.
... */ paint(ctx) { ctx.fillstyle = 'hsla(
55, 90%, 60%, 1.0)'; ctx.fillrect(0, 1
5, 200, 20); /* order: x, y, w, h */ } }); in this class example we have defined a single context option with the contextoptions() function: we returned a simple object stating alpha transparency is allowed.
...the 2d rendering context is a subset of the html
5 canvas api; the version available to houdini (called the paintrenderingcontext2d) is a further subset containing most of the features available in the full canvas api with the exception of the canvasimagedata, canvasuserinterface, canvastext, and canvastextdrawingstyles apis.
...And 14 more matches
Drawing shapes with canvas - Web APIs
our html skeleton from the previous page had a canvas element 1
50 pixels wide and 1
50 pixels high.
... rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="1
50" height="1
50"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(2
5, 2
5, 100, 100); ctx.clearrect(4
5, 4
5, 60, 60); ctx.strokerect(
50,
50,
50,
50); } } this example's output is shown below.
...the clearrect() function then erases a 60x60 pixel square from the center, and then strokerect() is called to create a rectangular outline
50x
50 pixels within the cleared square.
...And 14 more matches
Basic concepts behind Web Audio API - Web APIs
channel notation the number of audio channels available on a signal is frequently presented in a numeric format, such as 2.0 or
5.1.
...any discrete channel structure is supported, including mono, stereo, quad,
5.1, and so on.
...a frame, or sample frame, is the set of all values for all channels that will play at a specific point in time: all the samples of all the channels that play at the same time (two for a stereo sound, six for
5.1, etc.) the sample rate is the number of those samples (or frames, since all samples of a frame play at the same time) that will play in one second, measured in hz.
...And 14 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8
543/br.png'), url('https://mdn.mozillademos.org/files/8
54
5/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8
543/br.png'), url('https://mdn.mozillademos.org/files/8
54
5/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8
543/br.png'), url('https://mdn.mozillademos.org/files/8
54
5/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 14 more matches
Making content editable - Developer guides
see bug 1449
564 and firefox-specific html editing ui has been deprecated for additional details.
...for example, to use <p> elements: document.execcommand("defaultparagraphseparator", false, "p"); additionally, firefox supports the non-standard argument, br, for defaultparagraphseparator since firefox
55.
..."div"); } else { if (document.all) { odoc.innerhtml = odoc.innertext; } else { ocontent = document.createrange(); ocontent.selectnodecontents(odoc.firstchild); odoc.innerhtml = ocontent.tostring(); } odoc.contenteditable = true; } odoc.focus(); } function printdoc() { if (!validatemode()) { return; } var oprntwin = window.open("","_blank","width=4
50,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select...
...And 14 more matches
Firefox user agent string reference - HTTP
general form the ua string of firefox itself is broken down into four components: mozilla/
5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/
5.0 is the general token that says the browser is mozilla compatible, and is common to almost every browser today.
... for other products based on gecko, the string can take one of two forms, where the tokens have the same meaning except those noted below: mozilla/
5.0 (platform; rv:geckoversion) 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 example: mozilla/
5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 mozilla/
5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 the version numbers are not relevant.
...And 14 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the ordinal attribute takes positive integer values, which are used to order the box’s layout—in the example in listing
5, the buttons would be laid out in the order button3, button2, button1 (figure 4).
... <vbox> <button label="button1" 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.
...listing 8 shows a simple dialog example, and figure
5 shows its output.
...And 13 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
m level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.
5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
...not only does this make the code easier to read, it simplifies adding support for new clients: var elm = getelmbyid("myid"); function getelmbyid(aid){ var element = null; if (ismozilla || isie
5) element = document.getelementbyid(aid); else if (isnetscape4) element = document.layers[aid]; else if (isie4) element = document.all[aid]; return element; } the above code still has the issue of browser sniffing, or detecting which browser the user is using.
... browser sniffing is usually done through the useragent, such as: mozilla/
5.0 (x11; u; linux i686; en-us; rv:1.
5) gecko/20031016 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes.
...And 13 more matches
NSS Tools certutil
starting from nss 3.3
5, the database format was upgraded to support sqlite as described in this document.
...the minimum is
512 bits and the maximum is 8192 bits.
...the subject identification format follows rfc 148
5.
...And 13 more matches
Index
5 activity manager thunderbird 3, thunderbird the activity manager is a simple component that understands how to display a combination of user activity and history.
... 13 autoconfig: how to create a configuration file autoconfiguration, thunderbird authoritative definition 14 autoconfiguration in thunderbird moved to autoconfiguration 1
5 buddy icons in mail seth spitzer mozilla is now able to show icons in the message header area and the addressbook card pane.
... 2
5 filelink providers thunderbird filelink is a thunderbird feature that makes it easy for users to upload large attachments to web-based storage services such as hightail.
...And 13 more matches
Working with data
example: creating an array let arraytype = ctypes.arraytype(ctypes.int32_t); let myarray = new arraytype(
5); at this point, myarray.length is
5; there are
5 entries in the array.
... myarray.constructor.size is 20; the total size of the array's data buffer is 20 bytes (
5 entries, 4 bytes apiece).
... example: checking the value of an integer if, for example, you need to see if the value of an integer is
5, you can do so like this: var t = ctypes.int32_t(
5); if (t.tostring() == "ctypes.int32_t(
5)") { // it's
5 } working with strings c functions expect strings to be arrays of characters, with the end of the string indicated by a null character.
...And 13 more matches
Basic animations - Web APIs
var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/14
56/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 300, 300); // clear canvas ctx.fi...
...llstyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokestyle = 'rgba(0, 1
53, 2
55, 0.4)'; ctx.save(); ctx.translate(1
50, 1
50); // earth var time = new date(); ctx.rotate(((2 * math.pi) / 60) * time.getseconds() + ((2 * math.pi) / 60000) * time.getmilliseconds()); ctx.translate(10
5, 0); ctx.fillrect(0, -12, 40, 24); // shadow ctx.drawimage(earth, -12, -12); // moon ctx.save(); ctx.rotate(((2 * math.pi) / 6) * time.getseconds() + ((2 * math.pi) / 6000) * time.getmilliseconds()); ctx.translate(0, 28.
5); ctx.drawimage(moon, -3.
5, -3.
5); ctx.restore(); ctx.restore(); ctx.beginpath(); ctx.arc(1
50, 1
50, 10
5, 0, math.pi * 2, false); // earth orbit ctx.stroke(); ctx.drawimage(sun, 0, 0, 300, 300); window.requestanimationframe(draw); } init(); <canvas id="canvas"...
... function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 1
50, 1
50); ctx.translate(7
5, 7
5); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ctx.fillstyle = 'white'; ctx.linewidth = 8; ctx.linecap = 'round'; // hour marks ctx.save(); for (var i = 0; i < 12; i++) { ctx.beginpath(); ctx.rotate(math.pi / 6); ctx.moveto(100, 0); ctx.lineto(120, 0); ctx.stroke(); } ctx.restore(); // minute marks ctx.save(); ctx.linewidth =
5; for (i = 0; i < 60; i++) { if (i %
5!= 0) { ctx.beginpat...
...And 13 more matches
Selection API - Web APIs
lchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox
52.ie full support 9opera full support 9safari full support 1webview android full support 1chrome android full support 18firefox android full support ...
... 4notes full support 4notes notes the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox
52.opera android full support 10.1safari ios full support 1samsung internet android full support 1.0addrange experimentalchrome full support 1edge full support 12firefox full support yesie ?
...ng internet android full support yescontainsnode experimentalchrome full support yesedge full support 12firefox full support 4notes full support 4notes notes before firefox 3
5, the method didn't throw if node was null.ie no support noopera full support yessafari full support yeswebview android full support yeschrome android full support yesfirefox ...
...And 13 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
luckily, css media queries level
5 will be a game-changer in accessibility initiatives, because it will allow users to select settings that accomodate their needs best.
... em { color: #f00; } /* #rgb */ em { color: #ff0000; } /* #rrggbb */ em { color: #ff0000ff; } /* #rrggbbaa */ em { color: rgb(2
55, 0, 0); } em { color: rgb(100%, 0%, 0%); } em { color: rgb(2
55, 0, 0, 1); } em { color: rgba(100%, 0%, 0%, 100%); } conversions are not casual.
... here is the definition of relative luminance as defined by the w3c: "the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white" this statement is of course accurate, but may be confusing when used in reference to the rgb color space, which is an integer between 0 and 2
55.
...And 13 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit.
... <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 13 more matches
<color> - CSS: Cascading Style Sheets
maroon #800000 red #ff0000 purple #800080 fuchsia #ff00ff green #008000 lime #00ff00 olive #808000 yellow #ffff00 navy #000080 blue #0000ff teal #008080 aqua #00ffff css level 2 (revision 1) orange #ffa
500 css color module level 3 aliceblue #f0f8ff antiquewhite #faebd7 aquamarine #7fffd4 azure #f0ffff beige #f
5f
5dc bisque #ffe4c4 blanchedalmond #ffebcd blueviolet #8a2be2 brown #a
52a2a burlywood #deb887 cadetblue #
5f9ea0 ...
... chartreuse #7fff00 chocolate #d2691e coral #ff7f
50 cornflowerblue #649
5ed cornsilk #fff8dc crimson #dc143c cyan (synonym of aqua) #00ffff darkblue #00008b darkcyan #008b8b darkgoldenrod #b8860b darkgray #a9a9a9 darkgreen #006400 darkgrey #a9a9a9 darkkhaki #bdb76b darkmagenta #8b008b darkolivegreen #
556b2f darkorange #ff8c00 darkorchid #9932cc darkred #8b0000 darksalmon #e9967a darkseagreen #8fbc8f darkslateblue #483d8b darkslate...
... deeppink #ff1493 deepskyblue #00bfff dimgray #696969 dimgrey #696969 dodgerblue #1e90ff firebrick #b22222 floralwhite #fffaf0 forestgreen #228b22 gainsboro #dcdcdc ghostwhite #f8f8ff gold #ffd700 goldenrod #daa
520 greenyellow #adff2f grey #808080 honeydew #f0fff0 hotpink #ff69b4 indianred #cd
5c
5c indigo #4b0082 ivory #fffff0 khaki #f0e68c lavender #e6e6fa lavenderblush #fff0f
5 lawngreen #7cfc00 lemonchiffon #fffacd ...
...And 13 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
alignobsolete since html
5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually.
... bgcolorobsolete since html
5 a domstring specifying a color to apply to the backgrounds of each of the row's cells.
... charobsolete since html
5 a domstring which sets the character to align the cells in each of the row's columns on (each row's centering that uses the same character gets aligned with others using the same character .
...And 13 more matches
Functions - JavaScript
function map(f, a) { let result = []; // create a new array let i; // declare variable for (i = 0; i != a.length; i++) result[i] = f(a[i]); return result; } const f = function(x) { return x * x * x; } let numbers = [0, 1, 2,
5, 10]; let cube = map(f,numbers); console.log(cube); function returns: [0, 1, 8, 12
5, 1000].
...for example, if you define the function square, you could call it as follows: square(
5); the preceding statement calls the function with an argument of
5.
... the function executes its statements and returns the value 2
5.
...And 13 more matches
Strict mode - JavaScript
javascript's strict mode, introduced in ecmascript
5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode".
... " + nested(); } function notstrict() { return "i'm not strict."; } strict mode for modules ecmascript 201
5 introduced javascript modules and therefore a 3rd way to enter strict mode.
...any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a non-extensible object) will throw in strict mode: 'use strict'; // assignment to a non-writable global var undefined =
5; // throws a typeerror var infinity =
5; // throws a typeerror // assignment to a non-writable property var obj1 = {}; object.defineproperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a typeerror // assignment to a getter-only property var obj2 = { get x() { return 17; } }; obj2.x =
5; // throws a typeerror // assignment to a new property on a non-extensible object var f...
...And 13 more matches
Image file type and format guide - Web media technologies
mime type image/apng file extension(s) .apng specification wiki.mozilla.org/apng_specification browser compatibility chrome
59, edge 12, firefox 3, opera 46, safari 8 maximum dimensions 2,147,483,647×2,147,483,647 pixels supported color modes color mode bits per component (d) description greyscale 1, 2, 4, 8, and 16 each pixel consists of a single d-bit value indicating the brightness of the greyscale pixel.
...the length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 2
56 entries).
... to simulate more than 2
55 or 2
56 colors, dithering is generally used.
...And 13 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1 3.0pre1
5.0.1.2 note: before firefox 1.
5 the more basic firefox version format was used: major.minor.release.build[+] where only digits were allowed.
... 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.
...the versions included are 2.2 and 2.
5, both of which specify compatibility with firefox versions 1.
5 to 2.0.0.*.
...And 12 more matches
JXON - Archive of obsolete content
conversion snippets now imagine you have this sample xml document: example.xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz
5671</item_number> <price>39.9
5</price> <size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </size> <size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch...
...> </size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx98
56</item_number> <discount_until>dec 2
5, 199
5</discount_until> <price>42.
50</price> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.
... with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz
5671" }, "price": { "keyvalue": 39.9
5 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { "keyvalue": "burgundy", "keyattributes": { "image": "burgundy_cardigan.jpg" } }], "keyvalue"...
...And 12 more matches
Game distribution - Game development
you've followed a tutorial or two and created an html
5 game — that's great!
... benefits of html
5 over native building games with html
5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and target multiple devices.
... direct link distribution and instant play you don't have to tell people to search for your game in an app store with html
5 games.
...And 12 more matches
Arrays - Learn web development
for example: let sequence = [1, 1, 2, 3,
5, 8, 13]; let random = ['tree', 79
5, [0, 1, 2]]; before proceeding, create a few example arrays.
...try the following: shopping.length; // should return
5 this has other uses, but it is most commonly used to tell a loop to keep going until it has looped through all the items in an array.
... so for example: let sequence = [1, 1, 2, 3,
5, 8, 13]; for (let i = 0; i < sequence.length; i++) { console.log(sequence[i]); } you'll learn about loops properly later on (in our looping code article), but briefly, this code is saying: start looping at item number 0 in the array.
...And 12 more matches
BasicCardResponse - Web APIs
var supportedinstruments = [{ supportedmethods: 'basic-card', data: { supportednetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'], supportedtypes: ['credit', 'debit'] } }]; var details = { total: {label: 'donation', amount: {currency: 'usd', value: '6
5.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '6
5.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; var options = {requestshipping: true}; try { var request = new paymentrequest(supportedinstruments,...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasiccardresponsechrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set to a comma-delineated list of one or more 2-character iso country codes indi...
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true) and the dom.payments.request.supportedregions preference (needs to be set ...
...And 12 more matches
PasswordCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpasswordcredential experimentalchrome full support
51edge full support ≤79firefox ?
... webview android full support
51chrome android full support
51firefox android ?
... samsung internet android full support
5.0passwordcredential() constructor non-standardchrome full support
51edge full support ≤79firefox ?
...And 12 more matches
Border-radius generator - CSS: Cascading Style Sheets
ic="bottom-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="1
50" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="7
5" data-max="3
50" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> ro...
...></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.
54%; } .span_8 { width: 66.08%; } .span_7 { width:
57.62%; } .span_6 { width: 49.16%; } .span_
5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 1
5.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grou...
... 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width:
50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/
5679/arrows.png") center left no...
...And 12 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> de...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 12 more matches
Using CSS transforms - CSS: Cascading Style Sheets
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 1
50 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(1
50px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
... <table> <tbody> <tr> <th><code>perspective: 2
50px;</code> </th> <th><code>perspective: 3
50px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers2
50"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> ...
...And 12 more matches
Tamarin build documentation - Archive of obsolete content
windows 32 and 64 bit mac osx 10.4, 10.
5 on ppc mac osx 10.
5, 10.6 on intel linux 32 and 64 bit solaris 10 on sparc android 2.2 on arm windows mobile 6.
5 mips (linux) sh4 (linux) getting the tamarin source the tamarin source resides in mercurial at tamarin central.
... cross-platform build (general instructions - non-android) prerequisites: you need python 2.
5 or later and gnu make 3.81 or later.
... $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug
537817) has been fixed in the tamarin-redux repo.
...And 11 more matches
Examples - Archive of obsolete content
please note that the examples 4,
5 and 6 require a file named style.css to exist in the same directory as the example.
... </p> <dl> <dt>mozilla 1.1+/opera 7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer
5.
5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf93
5.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed.
...ithin comments" example 1 <!-- this file should have a .html extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>example 1 - xhtml 1.0 strict as text/html</title> <meta http-equiv="content-type" content="text/html; charset=iso-88
59-1" /> <style type="text/css"> <!-- body { padding-top: 8em; } html { color: #fff; background: #000 no-repeat fixed;} p {width: 30em; font-weight: bold;} --> </style> </head> <body> <h1>example 1 - xhtml 1.0 strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>.
...And 11 more matches
Floats - Learn web development
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: 1
50px; height: 100px; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow.
... to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 1
5px; width: 1
50px; height: 100px; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <div class="box">float</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 1
5px; width: 1
50px; height: 1
50px; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case).
...And 11 more matches
HTML text fundamentals - Learn web development
in html, each paragraph has to be wrapped in a <p> element, like so: <p>i am a paragraph, oh yes i am.</p> each heading has to be wrapped in a heading element: <h1>i am the title of the story.</h1> there are six heading elements: <h1>, <h2>, <h3>, <h4>, <h
5>, and <h6>.
... playable code <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 9
5%">my short story i am a statistician and my name is trish.
... are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f
5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; u...
...And 11 more matches
DMD
$ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[
5222] opened /tmp/dmd-1414
556492-
5222.json.gz for writing dmd[
5222] dump 1 { dmd[
5222] constructing the heap block list...
... dmd[
5222] constructing the stack trace table...
... dmd[
5222] constructing the stack frame table...
...And 11 more matches
NSS_3.12.3_release_notes.html
.h: sec_oid_seed_cbc in sslproto.h: tls_rsa_with_seed_cbc_sha in sslt.h: ssl_calg_seed new structure for seed support: (see blapit.h) seedcontextstr seedcontext new functions in the nss shared library: cert_rfc148
5_escapeandquote (see cert.h) cert_comparecerts (see cert.h) cert_registeralternateocspaiainfocallback (see ocsp.h) pk11_getsymkeyhandle (see pk11pqg.h) util_setforkstate (see secoid.h) nss_getalgorithmpolicy (see secoid.h) nss_setalgorithmpolicy (see secoid.h) for the 2 functions above see also (in secoidt.h): nss_use_a...
... bug 1
59483: cert name matching: rfc 2818 vs.
... backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 33
5016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371
522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed.
...And 11 more matches
nsIDOMWindowUtils
(in astring atype, in astring adata, in astring alocale); obsolete since gecko 38.0 void sendcontentcommandevent(in astring atype, [optional] in nsitransferable atransferable); void getclassname(in object aobj); boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in boolean apreventdefault); obsolete since gecko 1
5.0 boolean sendkeyevent(in astring atype, in long akeycode, in long acharcode, in long amodifiers, [optional] in unsigned long aadditionalflags); deprecated since gecko 38.0 void sendmouseevent(in astring atype, in float ax, in float ay, in long abutton, in long aclickcount, in long amodifiers, [optional] in boolean aignorerootscrollframe); void sendmouseeventtowindow(...
...ected_overflow_delta_x_negative 0x0040 wheel_event_expected_overflow_delta_y_zero 0x0100 wheel_event_expected_overflow_delta_y_positive 0x0200 wheel_event_expected_overflow_delta_y_negative 0x0400 mousescroll_prefer_widget_at_point 1 mousescroll_scroll_lines 2 mousescroll_win_scroll_lparam_not_null 6
5536 touch_hover 1 touch_contact 2 touch_remove 4 touch_cancel 8 ime_status_disabled 0 users cannot use ime at all.
... obsolete since gecko 38.0 composition_attr_selectedrawtext 0x03 obsolete since gecko 38.0 composition_attr_convertedtext 0x04 obsolete since gecko 38.0 composition_attr_selectedconvertedtext 0x0
5 obsolete since gecko 38.0 query_content_flag_use_native_line_break 0x0000 one of values of aadditionalflags of sendquerycontentevent().
...And 11 more matches
Pixel manipulation with canvas - Web APIs
data a uint8clampedarray representing a one-dimensional array containing the data in the rgba order, with integer values between 0 and 2
55 (included).
...each color component is represented by an integer between 0 and 2
55.
... for example, to read the blue component's value from the pixel at column 200, row
50 in the image, you would do the following: bluecomponent = imagedata.data[((
50 * (imagedata.width * 4)) + (200 * 4)) + 2]; if given a set of coordinates (x and y), you may end up doing something like this: var xcoord =
50; var ycoord = 100; var canvaswidth = 1024; function getcolorindicesforcoord(x, y, width) { var red = y * (width * 4) + x * 4; return [red, red + 1, red + 2, red + 3]; } ...
...And 11 more matches
Intersection Observer API - Web APIs
if you only want to detect when visibility passes the
50% mark, you can use a value of 0.
5.
... if you want the callback to run every time visibility passes another 2
5%, you would specify the array [0, 0.2
5, 0.
5, 0.7
5, 1].
... for example, if you want to be informed every time a target's visibility passes backward or forward through each 2
5% mark, you would specify the array [0, 0.2
5, 0.
5, 0.7
5, 1] as the list of thresholds when creating the observer.
...And 11 more matches
SubtleCrypto.importKey() - Web APIs
for rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object.
... the pkcs #8 format is defined in rfc
5208., using the asn.1 notation: privatekeyinfo ::= sequence { version version, privatekeyalgorithm privatekeyalgorithmidentifier, privatekey privatekey, attributes [0] implicit attributes optional } the importkey() method expects to receive this object as an arraybuffer containing the der-encoded form of the privatekeyinfo.
...a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm49agegbsubbaaibigemigbagebbdau9bd0jxdff
5ov380z 9vieun2w
5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb804g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob().
...And 11 more matches
SubtleCrypto.unwrapKey() - Web APIs
for rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object.
...*/ const saltbytes = [89,113,13
5,234,168,204,21,36,
55,93,1,132,242,242,192,1
56]; /* the wrapped key itself.
... */ const wrappedkeybytes = [171,223,14,36,201,233,233,120,164,68,217,192,226,80, 224,39,199,23
5,239,60,212,169,100,23,61,
54,244,197,160,80,109,230,207, 22
5,
57,197,17
5,71,80,209]; /* convert an array of byte values to an arraybuffer.
...And 11 more matches
Writing WebSocket servers - Web APIs
note: read the latest official websockets specification, rfc 64
55.
...the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub2
5jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
...to get it, concatenate the client's sec-websocket-key and the string "2
58eafa
5-e914-47da-9
5ca-c
5ab0dc8
5b11" together (it's a "magic string"), take the sha-1 hash of the result, and return the base64 encoding of that hash.
...And 11 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
note: :matches() was renamed to :is() in csswg issue #32
58.
...can be replaced with: /* 3-deep (or more) unordered lists use a square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { list-style-type: square; } simplifying section selectors the :is() pseudo-class is particularly useful when dealing with html
5 sections and headings.
... for example, without :is(), styling all the <h1> elements at different depths could be very complicated: /* level 0 */ h1 { font-size: 30px; } /* level 1 */ section h1, article h1, aside h1, nav h1 { font-size: 2
5px; } /* level 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-size: 20px; } /* level 3 */ /* ...
...And 11 more matches
clip-path - CSS: Cascading Style Sheets
syntax /* keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px
50px); clip-path: circle(
50px at 0 100px); clip-path: polygon(
50% 0%, 100%
50%,
50% 100%, 0%
50%); clip-path: path('m0.
5,1 c0.
5,1,0,0.7,0,0.3 a0.2
5,0.2
5,1,1,1,0.
5,0.3 a0.2
5,0.2
5,1,1,1,1,0.3 c1,0.7,0.
5,1,0.
5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(
50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path propert...
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.
5,1 c0.
5,1,0,0.7,0,0.3 a0.2
5,0.2
5,1,1,1,0.
5,0.3 a0.2
5,0.2
5,1,1,1,1,0.3 c1,0.7,0.
5,1,0.
5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> <...
... /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.
5,1 c 0.
5,1,0,0.7,0,0.3 a 0.2
5,0.2
5,1,1,1,0.
5,0.3 a 0.2
5,0.2
5,1,1,1,1,0.3 c 1,0.7,0.
5,1,0.
5,1 z" /> </clippath> </svg></pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="...
...And 11 more matches
min-width - CSS: Cascading Style Sheets
syntax /* <length> value */ min-width: 3.
5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value.
...upsinheritednopercentagesrefer 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: 7
5%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
...es opera uses auto as the initial value for min-width.safari no support nowebview android full support 37notes full support 37notes notes chrome uses auto as the initial value for min-width.chrome android full support 2
5notes full support 2
5notes notes chrome uses auto as the initial value for min-width.firefox android full support 34 full support 34 no support 16 — 22notes notes firefox 18 and later (until the value was removed), used auto as the init...
...And 11 more matches
Index - Developer guides
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 200
5 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
...
5 wai aria live regions/api support ajax, accessibility firefox 3 contains important improvements to the way the mozilla engine exposes live changes in a document.
... 6 audio and video delivery audio, guide, html, html
5, media, video whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the browser's <audio> and <video> elements remains pretty much the same.
...And 11 more matches
<button>: The Button element - HTML: Hypertext Markup Language
autofocus html
5 this boolean attribute specifies that the button should have input focus when the page loads.
...setting autocomplete="off" on the button disables this feature; see bug 6
54072.
... form html
5 the <form> element to associate the button with (its form owner).
...And 11 more matches
Proxy Auto-Configuration (PAC) file - HTTP
in chrome (versions
52 to 73), you can disable this by setting pachttpsurlstrippingenabled to false in policy or by launching with the --unsafe-pac-url command-line flag (in chrome 74, only the flag works, and from 7
5 onward, there is no way to disable path-stripping; as of chrome 81, path-stripping does not apply to http urls, but there is interest in changing this behavior to match https); in firefox, the preference...
... blocks, separated by a semicolon: direct connections should be made directly, without any proxies proxy host:port the specified proxy should be used socks host:port the specified socks server should be used recent versions of firefox support as well: http host:port the specified proxy should be used https host:port the specified https proxy should be used socks4 host:port socks
5 host:port the specified socks server (with the specified sock version) should be used if there are multiple semicolon-separated settings, the left-most setting will be used, until firefox fails to establish the connection to the proxy.
...0 means ignore, 2
55 means match.
...And 11 more matches
Paths - SVG: Scalable Vector Graphics
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 c 20 20, 40 20,
50 10" stroke="black" fill="transparent"/> <path d="m 70 10 c 70 20, 110 20, 110 10" stroke="black" fill="transparent"/> <path d="m 130 10 c 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> <path d="m 10 60 c 20 80, 40 80,
50 60" stroke="black" fill="transparent"/> <path d="m 70 60 c 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> <path d="m 130 60 c 120 80, 180 80, ...
...170 60" stroke="black" fill="transparent"/> <path d="m 10 110 c 20 140, 40 140,
50 110" stroke="black" fill="transparent"/> <path d="m 70 110 c 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> <path d="m 130 110 c 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves.
... <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 c 40 10, 6
5 10, 9
5 80 s 1
50 1
50, 180 80" stroke="black" fill="transparent"/> </svg> the other type of bézier curve, the quadratic curve called with q, is actually a simpler curve than the cubic one.
...And 11 more matches
2D maze game with device orientation - Game development
in this tutorial we’ll go through the process of building an html
5 mobile game that uses the device orientation and vibration apis to enhance the gameplay and is built using the phaser framework.
...it will look something like this: phaser framework phaser is a framework for building desktop and mobile html
5 games.
... preloader.js the preloader state takes care of loading all the assets: ball.preloader = function(game) {}; ball.preloader.prototype = { preload: function() { this.preloadbg = this.add.sprite((ball._width-297)*0.
5, (ball._height-14
5)*0.
5, 'preloaderbg'); this.preloadbar = this.add.sprite((ball._width-1
58)*0.
5, (ball._height-
50)*0.
5, 'preloaderbar'); this.load.setpreloadsprite(this.preloadbar); this.load.image('ball', 'img/ball.png'); // ...
...And 10 more matches
Looping code - Learn web development
in to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top:
5px; left:
5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width =...
... width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(2
55,0,0,0.
5)'; ctx.arc(random(width), random(height), random(
50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(2
55,0,0,0.
5)'; ctx.arc(random(width), random(height), random(
50), 0, 2 * math.pi); ctx.fill(); } random(x), defi...
... if we weren't using a loop here, we'd have to repeat the following code for every circle we wanted to draw: ctx.beginpath(); ctx.fillstyle = 'rgba(2
55,0,0,0.
5)'; ctx.arc(random(width), random(height), random(
50), 0, 2 * math.pi); ctx.fill(); this would get very boring and difficult to maintain very quickly.
...And 10 more matches
Making decisions in your code — conditionals - Learn web development
if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance =
5; } this code as shown always results in the shoppingdone variable returning false, meaning disappointment for our poor child.
...cheese available for making cheese on toast.'); } else { console.log('no cheese on toast for you today.'); } and, returning to our previous example about the child doing a chore for their parent, you could write it like this: let shoppingdone = false; if (shoppingdone) { // don't need to explicitly specify '=== true' let childsallowance = 10; } else { let childsallowance =
5; } nesting if ...
...the following example executes the code inside only if both or statements return true, meaning that the overall and statement will return true: if ((x ===
5 || y > 3 || z <= 10) && (loggedin || username === 'steve')) { // run the code } a common mistake when using the logical or operator in conditional statements is to try to state the variable whose value you are checking once, and then give a list of values it could be to return true, separated by || (or) operators.
...And 10 more matches
NSS 3.12.4 release notes
new functions in the nss shared library: pk11_isinternalkeyslot (see pk11pub.h) secmod_opennewslot (see pk11pub.h) new error codes (see secerr.h): sec_error_bad_info_access_method sec_error_crl_import_failed new oids (see secoidt.h) sec_oid_x
509_any_policy the nssckbi pkcs #11 module's version changed to 1.7
5.
... bug 3217
55: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 40
5297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 42713
5: add super-h (sh3,4) architecture support bug 4319
58: improve des and sha
512 for x86_64 platform bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 4
5373
5: when using cert9 (sqlite3) db, set or change master password fails bug 463
544: warning: passing enum* for an int* argument in pkix_validate.c bug 469
588: co...
...verity errors reported for softoken bug 4700
55: pkix_httpcertstore_findsocketconnection reuses closed socket bug 470070: multiple object leaks reported by tinderbox bug 470479: io timeout during cert fetching makes libpkix abort validation.
...And 10 more matches
NSS functions
function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.
5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.7 and later cert_certchainfromcert mxr 3.2 and later cert...
... mxr 3.12 and later cert_checkcertusage mxr 3.3 and later cert_comparename mxr 3.2 and later cert_comparevaliditytimes mxr 3.11 and later cert_completecrldecodeentries mxr 3.6 and later cert_convertanddecodecertificate mxr 3.9.3 and later cert_copyname mxr 3.4 and later cert_copyrdn mxr 3.
5 and later cert_createava mxr 3.2.1 and later cert_createcertificate mxr 3.
5 and later cert_createcertificaterequest mxr 3.2 and later cert_createname mxr 3.2.1 and later cert_createocspcertid mxr 3.6 and later cert_createocsprequest mxr 3.6 and later cert_createrdn mxr 3.2.1 and later ...
... cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.
5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauthkeyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercr...
...And 10 more matches
nsIAppShellService
inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.
5) implemented by: @mozilla.org/appshell/appshellservice;1 as a service: var appshellservice = components.classes["@mozilla.org/appshell/appshellservice;1"] .getservice(components.interfaces.nsiappshellservice); method overview void closetoplevelwindow(in nsixulwindow awindow); obsolete since gecko 1.8 void createhiddenwindow(in nsiappshell aappshell); native code only!
...obsolete since gecko 1.8 methods closetoplevelwindow() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) close a window.
... createstartupstate() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs.
...And 10 more matches
Example and tutorial: Simple synth keyboard - Web APIs
<div class="settingsbar"> <div class="left"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.
5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.
5, and we provide a <datalist> element which is connected to the range using the name attribute to find an option list whose id matches; in this case, the data set is named "volume".
... <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius:
5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 1...
...0px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width:
50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width:
50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } javascript the javascript code begins by initializing a number of ...
...And 10 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
var intervalid = window.setinterval(mycallback,
500, 'parameter 1', 'parameter 2'); function mycallback(a, b) { // your code here // parameters are purely optional.
...rue; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 1
5); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 1
50; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underli...
...ne; } #info { width: 180px; height: 1
50px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius:
5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...And 10 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 1
50 pixels.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width:
500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 1
50px; } in the image, you can see that two items have wrapped onto a new line.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yoursel...
...And 10 more matches
Using media queries - CSS: Cascading Style Sheets
forced-colors detect whether user agent restricts color palette added in media queries level
5.
... added in media queries level
5.
... light-level light level of the environment added in media queries level
5.
...And 10 more matches
background-position - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <percentage> values */ background-position: 2
5% 7
5%; /* <length> values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* multiple images */ background-position: 0 0, center; /* edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* global values */ background-p...
...the other dimension is then set to
50%, so the item is placed in the middle of the edge specified.
...this specifies the x coordinate relative to the left edge, with the y coordinate set to
50%.
...And 10 more matches
<object> - HTML: Hypertext Markup Language
archivehtml 4 onlyobsolete since html
5 a space-separated list of uris for archives of resources for the object.
... borderdeprecated since html4.01obsolete since html
5 the width of a border around the control, in pixels.
... classidhtml 4 onlyobsolete since html
5 the uri of the object's implementation.
...And 10 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
pt> element in content model of all elements implementation status unknown initialize(), appenditem(), replaceitem(), and insertitembefore() on list objects making a copy of any list item being inserted that is already in another list implementation status unknown crossorigin attribute for <image> and <script> elements not implemented yet (at least for <image>; bug 12403
57) rendering model change notes svg root and <foreignobject> not overflow:hidden in ua style sheet implementation status unknown allow overflow: auto; to clip and show scroll bars implementation status unknown allow overflow: scroll; to show scroll bars on <svg> elements implementation status unknown basic data types and interfaces...
...the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 132
5319).
... svgexternalresourcesrequired removed never implemented svgelement.viewportelement and svgelement.ownersvgelement nullable implementation status unknown svgelement.getpresentationattribute() removed never implemented (prototype removed in bug 9214
56) svgcolor and svgicccolor removed never implemented svgelement.focus(), svgelement.blur() not implemented (bug 7786
54) svgelement.tabindex implemented (bug 7786
54) document.activeelement implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow l...
...And 10 more matches
Index - XPath
found
57 pages: # page tags and summary 1 xpath css selectors, dom, jxon, landing, path, xml, xpath, xslt xpath stands for xml path language.
...
5 attribute axe, xpath the attribute axis indicates the attributes of the context node.
... 1
5 self axe, xpath the self axis indicates the context node itself.
...And 10 more matches
Building accessible custom components in XUL - Archive of obsolete content
firefox 1.
5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user.
...<code> <grid class="spreadsheet" id="accjaxspreadsheet" flex="1"> <rows flex="1"></rows> <columns flex="1"> <column> <description value="entry #"/> <description value="1"/> <description value="2"/> <description value="3"/> <description value="4"/> <description value="
5"/> <description value="6"/> <description value="7"/> </column> <column flex="1"> <description value="date"/> <label value="03/14/0
5" flex="1"/> <label value="03/1
5/0
5" flex="1"/> <label value="03/1
5/0
5" flex="1"/> <label value="03/16/0
5" flex="1"/> <label value="03/16/0
5" flex="1"/> <label value="03/16/0
5" flex="1"/> <label value...
...="03/16/0
5" flex="1"/> </column> <column flex="1"> <description value="expense"/> <label value="conference fee" flex="1"/> <label value="lodging" flex="1"/> <label value="dinner" flex="1"/> <label value="lodging" flex="1"/> <label value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet.
...And 9 more matches
The First Install Problem - Archive of obsolete content
example: a piece of software called myapplication might create hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=
5.0.1/ where the plid is something the corporation that makes myapplication (mycompany inc.) determines.
...(note that the file name must still begin with "np", just as it must when the file is loaded from the .\plugins directory.) example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=
5.01] path=c:\mycompany\myapplication\netscape\npmyapp.dll "xptpath" -- string value -- absolute path to xpt module required for scripting plug-in, if applicable example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=
5.01] xptpath=c:\mycompany\myapplication\netscape\npmyapp.xpt "geckoversion" -- this is the optional mentio...
... example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=
5.01] geckoversion=0.9.4.2 suggesting compliance with compuserve's deployment of a build of gecko known as 0.9.4.2.
...And 9 more matches
Introduction to CSS layout - Learn web development
flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
... flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox artic...
... grid example 1 * {box-sizing: border-box;} .wrapper > div { border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box
5">five</div> ...
...And 9 more matches
Fundamental text and font styling - Learn web development
for example, if you had an <article> element in your page, and set its font-size to 1.
5 em (which would compute to 24 px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20 px, what em value would you use?
... <!-- document base font-size is 16px --> <article> <!-- if my font-size is 1.
5em --> <p>my paragraph</p> <!-- how do i compute to 20px font-size?
...but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size:
5rem; } p { font-size: 1.
5rem; color: red; font-family: helvetica, arial, sans-serif; } font style, font weight, text transform, and text decoration css provides four common properties to alter the visual weight/emphasis of text: font-style: used to turn italic text on and off.
...And 9 more matches
HTTP logging
using about:networking this is available starting with firefox
52.
...you will see several files that look like: log.txt-main.1806, log.txt-child.19
54, log.txt-child.1970, etc.
...press the enter key after each one.: for 64-bit windows: set moz_log=timestamp,rotate:200,nshttp:
5,cache2:
5,nssockettransport:
5,nshostresolver:
5,cookie:
5 set moz_log_file=%temp%\log.txt "c:\program files\mozilla firefox\firefox.exe" for 32-bit windows: set moz_log=timestamp,rotate:200,nshttp:
5,cache2:
5,nssockettransport:
5,nshostresolver:
5,cookie:
5 set moz_log_file=%temp%\log.txt "c:\program files (x86)\mozilla firefox\firefox.exe" (these instructions assume that you installed firefox t...
...And 9 more matches
Obsolete Build Caveats and Tips
from firefox 10, the compilator is visual studio 2010; if you want to use it, you must use a previous version of it !), or 200
5 professional from build_instructions those who need to work with the code for firefox 3/mozilla 1.9 and earlier can check out the latest source using cvs.
...to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.
5) code for the firefox 3.
5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
... to get this code, do the following: # pull the mozilla source to the folder 191src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.1/ 191src cd 191src note: starting with gecko
5.0, you can actually build firefox without a .mozconfig file.
...And 9 more matches
powermetrics
the following command encompasses the most useful ones: sudo powermetrics --samplers tasks --show-process-coalition --show-process-gpu -n 1 -i
5000 --samplers tasks tells it to just do per-process measurements.
... -i
5000 tells it to use a sample length of
5 seconds (
5000 ms).
... the following is example output from such an invocation: *** sampled system activity (fri sep 4 17:1
5:14 201
5 +1000) (
5009.63ms elapsed) *** *** running tasks *** name id cpu ms/s user% deadlines (<2 ms, 2-
5 ms) wakeups (intr, pkg idle) gpu ms/s com.apple.terminal 293 447.66 274.83 120.3
5 221.74 firefox 84627 77.
59
55.
55 1
5.37 2.
59 91.42 42.12 204.47 plugin-container 84628 377.22 37.18 43.91 18.
56 178.6
5 7
5.8
5 17.29 terminal 694 9.86 79.94 0.00 0.00 4.39 2.20 ...
...And 9 more matches
IDBKeyRange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support yesboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implem...
... full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 1
5safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full...
...And 9 more matches
MediaMetadata - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediametadata experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support
57firefox android ?
... samsung internet android full support 7.0mediametadata() constructor experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
...And 9 more matches
WebGL model view projection - Web APIs
box.draw({ top : 0.
5, // x bottom : -0.
5, // x left : -0.
5, // y right : 0.
5, // y depth : 0, // z color : [1, 0.4, 0.4, 1] // red }); next, draw a green box up top and behind the red box.
... box.draw({ top : 0.9, // x bottom : 0, // x left : -0.9, // y right : 0.9, // y depth : 0.
5, // z color : [0.4, 1, 0.4, 1] // green }); finally, for demonstration that clipping is actually going on, this box doesn't get drawn because it's entirely outside of clip space.
... box.draw({ top : 1, // x bottom : -1, // x left : -1, // y right : 1, // y depth : -1.
5, // z color : [0.4, 0.4, 1, 1] // blue }); the results view on jsfiddle exercise a helpful exercise at this point is to move the boxes around the clip space by varying the code to get a feel for how points get clipped and moved around in clip space.
...And 9 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
in each case, we show what the source image looks like rendered in a 1
50x1
50 box, and provide a link to the svg source.
...it's always square, and is usable at any size, such as 32x32, 128x128, or
512x
512, for example.
... source: no dimensions or intrinsic ratio given this css: background: url(no-dimensions-or-ratio.svg); background-size: 12
5px 17
5px; the rendered output would look like this: source: one specified dimension, no intrinsic ratio given this css: background: url(100px-wide-no-height-or-ratio.svg); background-size: 2
50px 1
50px; the rendered output would look like this: source: one specified dimension with intrinsic ratio given this css: background: url(100px-height-3x4-ratio.svg); background-size: 27
5px 12
5px...
...And 9 more matches
background-size - CSS: Cascading Style Sheets
syntax /* keyword values */ background-size: cover; background-size: contain; /* one-value syntax */ /* the width of the image (height becomes 'auto') */ background-size:
50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ background-size:
50% auto; background-size: 3em 2
5%; background-size: auto 6px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size:
50%, 2
5%, 2
5%; bac...
... note: the behavior of <gradient>s changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.
5).
...in firefox 43, as opposed to chrome
52, an explicit background-size causes preserveaspectratio to be ignored.
...And 9 more matches
perspective-origin - CSS: Cascading Style Sheets
center, a keyword being a shortcut for the
50% percentage value.
... center, a keyword being a shortcut for the
50% percentage value.
... formal definition initial value
50%
50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...And 9 more matches
Localizations and character encodings - Developer guides
for most locales, the fallback encoding is windows-12
52 (often called iso-88
59-1), which was the encoding emitted by most windows applications in the 1990s and a superset of the encoding emitted by most unix applications in the 1990s as a deployed in the america has and in western europe.
... however, there are locales where web publishing was common already in the 1990s but the windows-12
52 encoding was not suitable for the local language.
... in these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than windows-12
52.
...And 9 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
each color component can be represented as a number between 0 and 2
55 (0x00 and 0xff) or, optionally, as a number between 0 and 1
5 (0x0 and 0xf).
...to make it 2
5% opaque, you can use "#0000ff44" or "#00f4".
... legal values for each of these parameters are: red, green, and blue each must be an <integer> value between 0 and 2
55 (inclusive), or a <percentage> from 0% to 100%.
...And 9 more matches
<input type="range"> - HTML: Hypertext Markup Language
the default stepping value for range inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.
5, then a step of 1 will allow only values such as 1.
5, 2.
5, 3.
5,...
... in the positive direction and -0.
5, -1.
5, -2.
5,...
...for example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.
5".
...And 9 more matches
begin - SVG: Scalable Vector Graphics
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="3
5" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="3
5" y="60" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="7
5" begin="2s" dur="6s" fill="freeze" /> </rect> <rect x="60" y="8
5" h...
...eight="1
5" width="0"> <animate attributetype="xml" attributename="width" to="
50" begin="4s" dur="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="2
5" x2="10" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="3
5" y="20" text-anchor="middle">2s</text> <line x1="3
5" y1="2
5" x2="3
5" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="2
5" x2="60" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="8
5" y="20" text-anchor="middle">6s</text> <line x1="8
5" y1="2
5" x2="8
5" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1=...
..."2
5" x2="110" y2="10
5" stroke="grey" stroke-width=".
5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".
5" /> <line x1="10" y1="10
5" x2="110" y2="10
5" stroke="grey" stroke-width=".
5" /> </svg> begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="3
5" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="
50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="2
5" id="second" begin="first.e...
...And 9 more matches
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="19
5" viewbox="0 0 1100 6
50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> ...
... the second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-
5%" y="-
5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-
5%" y="-
5%" width="110%" height="110%"> ...
... <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="in" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" filterunits="objectboundingbox" x="-
5%" y="-
5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="out" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="atopflood" filterunits="objectboundingbox" x="-
5%" y="-
5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite ...
...And 9 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found
54 pages: # page tags and summary 1 xslt: extensible stylesheet language transformations landing, web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents.
... 3 index index, reference, xslt found
54 pages: 4 pi parameters xslt no summary!
...
5 the xslt/javascript interface in gecko xslt no summary!
...And 9 more matches
Install Manifests - Archive of obsolete content
firefox 1.
5 has checking to ensure that your id falls into one format or the other and will refuse to install add-ons that have malformed ids.
... examples <em:id>extensionname@example.org</em:id> <em:id>{daf44bf7-a4
5e-44
50-979c-91cf07434c3d}</em:id> name the name of the add-on; intended for display in the ui.
... 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.
...And 8 more matches
New in JavaScript - Archive of obsolete content
ecmascript
5 support implementation status for the current standard ecma-262 edition
5.1 in mozilla-based engines and products.
... ecmascript 201
5 support implementation status for the draft ecma-262 edition 6 (es201
5) in mozilla-based engines and products.
...firefox 4 was the last version which referred to a javascript version (1.8.
5).
...And 8 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
<div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="1
50" height="11
5"> <h3>clown trigger</h3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general.
...since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than
50%, so the first step was this: div.card {float: left; width: 4
5%; margin: 1em 2% 0 2%;} by making the content of each card 4
5% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent.
...i did it that way because it's a lot less likely to trigger a situation where rounding errors force the two floats to total more than 100% the width of the parent, as could happen if the floats' element boxes were made to total
50%.
...And 8 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
iteration), and set the rotatecount to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast): if (!starttime) { starttime = timestamp; } rotatecount = (timestamp - starttime) / 3; below the previous line inside draw(), add the following block — this checks to see if the value of rotatecount is above 3
59 (e.g.
...note that this isn't strictly necessary, but it is easier to work with values of 0–3
59 degrees than values like "128000 degrees".
... if (rotatecount > 3
59) { rotatecount %= 360; } next, below the previous block add the following line to actually rotate the spinner: spinner.style.transform = `rotate(${rotatecount}deg)`; at the very bottom inside the draw() function, insert the following line.
...And 8 more matches
Linux compatibility matrix
distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol fedora 16 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 feb 2013 fedora 17 3.3 2.1
5 2.32 2.24 3.4 0.24 4.7 4.7 3.0 n/a may 2012 jul 2013 fedora 18 3.6 2.16 2.34 2.24 3.6 0.26 4.7 4.7 3.1 n/a jan 2013 jan 2014 fedora 19 3.9 2.17 2.36 2.24 3.8 0.30 4.8.1 4.8 3.3 n/a jul 2013 jan 201
5 fedora 20 3.11 2.18 2.38 2.24 3.10 0.30 4.8.2 4...
....8 3.3 n/a dec 2013 jun 201
5 fedora 21 3.17 2.20 2.42 2.24 3.14 0.32 4.9 4.9 3.4 n/a dec 2014 dec 201
5 fedora 22 4.0 2.21 2.44 2.24 3.16 0.32
5.1 4.9,
5.1 3.
5 n/a may 201
5 jul 2016 fedora 23 4.2 2.22 2.46 2.24 3.18 0.33
5.1
5.1 3.7 n/a nov 201
5 dec 2016 fedora 24 4.
5 2.23 2.48 2.24 3.20 0.34 6.1 6.1 3.8 n/a jun 2016 aug 2017 fedora 2
5 4.8 2.24 2.
50 2.24 3.22.2 0.34 6.2 6.2 3.8 n/a nov 2016 dec 2017 fedora 26 4.11 2.2
5 2.
52 2.24 3.22.16 0.34 7.1 7.1 4.0 n/a jul 2017 jun 2018 fedora 27 4.13 2.26 2.
...
54 2.24 3.22.24 0.34 7.2 7.2 4.0 n/a nov 2017 dec 2018 fedora 28 4.16 2.27 2.
56 2.24 3.22.30 0.34 8.0.1 8.0.1 6.0 n/a may 2018 may 2019 fedora 29 4.18 2.28 2.
58 2.24 3.24.1 0.34 8.2.1 8.2.1 7.0 3.7 oct 2018 nov 2019 fedora 30
5.0 2.29 2.60 2.24 3.24.8 0.34 9.0.1 9.0.1 8.0 3.7 apr 2019 ?
...And 8 more matches
NSS tools : modutil
modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc
5, aes, des, dh, sha1, sha2
56, sha
512, ssl, tls, md
5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...for example: platforms { linux:
5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatfor...
...m { linux:
5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar argument.
...And 8 more matches
Bytecode Descriptions
implements: getv, getvalue step
5.
...implements: getv, getvalue step
5.
...implements: delete obj.propname step
5 in non-strict code.
...And 8 more matches
nsICryptoHash
you can, for example, calculate the sha2
56 hash of a file to determine if it contains the data you think it does.
... the hash algorithms supported are md2, md
5, sha-1, sha-2
56, sha-384, and sha-
512.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hash algorithms these constants are used by the init() method to indicate which hashing function to use.
...And 8 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.4
5 mb (0
5.71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.
57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.
56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.
51 mb (00.10%) ++ mal...
...� │ │ │ │ ├──0.13 mb (00.03%) ── allocation-site-tables [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-tables [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───
5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.
...23 mb (00.8
5%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ │ ├──0.0
5 mb (00.01%) ── rule-nodes │ │ │ │ ├──0.04 mb (00.01%) ── style-contexts │ │ │ │ ├──0.03 mb (00.01%) -- frames │ │ │ │ │ ├──0.02 mb (00.00%) ── sundries │ │ │ │ │ └──0.01 mb (00.00%) ── nsblockframe │ │ │ │ ├──0.01 mb (00.00%) ── pres-contexts │ │ │ │ ├──0.01 mb (00.00%) ── line-boxes │ │ │ │ └──0.00 mb (00.00%) ── text-runs │ │ │ ├──3.78 mb (00.76%) ++ js-compartment(https://www.google.de/?gws_rd=ssl) │ │ �...
...And 8 more matches
FileSystemEntry - Web APIs
for example, if your app is in http://www.html
5rocks.com, open filesystem:http://www.html
5rocks.com/temporary/ in a tab.
...8alternate name full support 8alternate name alternate name uses the non-standard name: entryedge full support 79prefixed full support 79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support
50ie no support noopera no support nosafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-stan...
...dard name: entrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: entryfirefox android full support
50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcopyto experimentaldeprecatednon-standardchrome full support 8edge full ...
...And 8 more matches
Guide to the Fullscreen API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support 71 full support 71 full support 1
5alternate name alternate name uses the non-standard name: webkitisfullscreenedge full support ≤79 full support ≤79 full support ≤79alternate name alternate name uses the non-standard name: webkitisfullscreenfirefox full support ...
... 64 full support 64 no support 49 — 6
5disabled disabled from version 49 until version 6
5 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true).
... no support 9 — 6
5alternate name alternate name uses the non-standard name: mozfullscreenie no support noopera full support
58 full support
58 full support 1
5alternate name alternate name uses the non-standard name: webkitisfullscreensafari full support 6alternate name full support 6alternate name alternate name uses the non-standard name: webkitisfullscreenwebview android full support 71 ...
...And 8 more matches
Permissions - Web APIs
opera android full support 30safari ios no support nosamsung internet android full support 4.0gyroscope permissionchrome full support
51edge full support 79firefox ?
... safari no support nowebview android full support
51chrome android full support
51firefox android ?
... safari ios no support nosamsung internet android full support
5.0magnetometer permissionchrome full support 62edge full support 79firefox ?
...And 8 more matches
URLUtilsReadOnly - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonlychrome no support noedge no support nofirefox full support
57 full support
57 no support 3.
5 —
57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).ie no support noopera no support nosafari no support ...
... nowebview android no support nochrome android no support nofirefox android full support
57 full support
57 no support 4 —
57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).opera android no support nosafari ios no support nosamsung internet android no support nohash experimentalchrome no support noedge ...
... no support nofirefox full support 38 full support 38 no support 3.
5 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
...And 8 more matches
Writing a WebSocket server in C# - Web APIs
this server conforms to rfc 64
55 so it will only handle connections from chrome version 16, firefox 11, ie 10 and over.
...the full explanation of the server handshake can be found in rfc 64
55, section 4.2.2.
... you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "2
58eafa
5-e914-47da-9
5ca-c
5ab0dc8
5b11" (a special guid specified by rfc 64
55) compute sha-1 and base64 hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64str...
...And 8 more matches
WritableStream - Web APIs
the highwatermark property, which is set when creating the counting strategy (line 3
5), sets the maximum amount of data that the writablestream instance will handle in a single write() operation.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritablestream experimentalchrome full support
59edge full support 16firefox no support noie no support noopera full support 47safari ?
... webview android full support
59chrome android full support
59firefox android no support noopera android full support 44safari ios ?
...And 8 more matches
Operable - Accessibility
2.2.2 pausing, stopping, hiding (a) for moving/blinking content that starts automatically, lasts longer than
5 seconds, and is shown alongside other content, controls should be provided to pause, stop, or hide it.
... 2.2.
5 re-authenticating (aaa) if an authentication session expires during usage of a web app, the user can re-authenticate and continue their usage without losing any data.
... 2.4.
5 multiple navigation mechanisms (aa) you should provide at least two general navigation mechanisms to find pages on your web site, for example navigation menu, breadcrumb trail, site search, site map, list of related links, etc.
...And 8 more matches
Perceivable - Accessibility
1.2.2 provide captions for web-based video (a) you should provide captions for video presented on the web (e.g., html
5 video).
... see video text tracks for html
5 video captions, and other multimedia content for other technologies.
... 1.2.3 provide text transcript or audio description for web-based video (a) you should provide text transcripts or audio descriptions for video presented on the web (e.g., html
5 video.
...And 8 more matches
Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html
5 video player using the media and fullscreen apis.
... basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.87
5rem; height:100%; margin:1.2
5rem auto; padding:1.0
51%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.09716
599190283400809716
59919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the en...
...mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-state=hidden] { display:none; } .controls[data-state=visible] { display:block; } there are a number of properties that also need to be set for all elements within the video controls: .controls > * { float:left; width:3.9062
5%; height:100%; margin-left:0.19
5312
5%; display:block; } .controls > *:first-child { margin-left:0; } all elements are floated left, as they are to be aligned next to one another, and each element is set to have a width of nearly 4% (again the actual value was calculated based on the required dimensions of the buttons), and a height of 100%.
...And 8 more matches
Audio and Video Delivery - Developer guides
for further info see cross browser audio basics (html
5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="...
... javascript audio var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } else if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } myaudio.currenttime =
5; myaudio.play(); we set the source of the audio depending on the type of audio file the browser supports, then set the play-head
5 seconds in and attempt to play it.
...taavailable = function(e) { data.push(e.data); }; recorder.start(); recorder.onerror = function(e) { throw e.error || new error(e.name); // e.name is ff non-spec } recorder.onstop = function(e) { var audio = document.createelement('audio'); audio.src = window.url.createobjecturl(new blob(data)); } settimeout(function() { rec.stop(); },
5000); }) .catch(function onerror(error) { console.log(error.message); }); see mediarecorder api for more details.
...And 8 more matches
Using HTML sections and outlines - Developer guides
the html
5 specification introduced several semantic sectioning elements to help organize the structure of documents.
... new semantic elements were added to html
5 to improve and clarify the sectioning of websites into meaningful areas of content.
... section elements in html
5 html navigational element (<nav>) defines a section that contains navigation links that appear often on a site.
...And 8 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
downloadhtml
5 prompts the user to save the linked url instead of navigating to it.
... obsolete attributes charsetobsolete since html
5 hinted at the character encoding of the linked url.
... coordsobsolete since html
5 used with the shape attribute.
...And 8 more matches
<input type="image"> - HTML: Hypertext Markup Language
essential image input features let's look at a basic example that includes all the essential features you'd need to use (these work exactly the same as they do on the <img> element.): <input id="image" type="image" width="100" height="30" alt="login" src="/static/external/62/62ac2ecddbec0e0b
540098c284
51e
57203e
5cab46dfed7ab011
5d
5a6
59fcfb7b.png"> the src attribute is used to specify the path to the image you want to display in the button.
... overriding default form behaviors <input type="image"> elements — like regular submit buttons — can accept a number of attributes that override the default form behavior: formaction html
5 the uri of a program that processes the information submitted by the input element; overrides the action attribute of the element's form owner.
... formenctype html
5 specifies the type of content that is used to submit the form to the server.
...And 8 more matches
Evolution of HTTP - HTTP
at this point, a typical request and response looked like this: get /mypage.html http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 1
5 nov 1994 08:12:31 gmt server: cern/3.0 libwww/2.17 content-type: text/html <html> a page with an image <img src="/myimage.gif"> </html> followed by a second connection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 1
5 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type...
...: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-199
5 period: a server and a browser added one feature and it saw if it got traction.
...in november 1996, in order to solve these annoyances, an informational document describing the common practices has been published, rfc 194
5.
...And 8 more matches
HTTP Public Key Pinning (HPKP) - HTTP
to ensure the authenticity of a server's public key used in tls sessions, this public key is wrapped into a x.
509 certificate which is usually signed by a certificate authority (ca).
... enabling hpkp to enable this feature for your site, you need to return the public-key-pins http header when your site is accessed over https: public-key-pins: pin-sha2
56="base64=="; max-age=expiretime [; includesubdomains][; report-uri="reporturi"] pin-sha2
56 the quoted string is the base64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-2
56 in the future.
...And 8 more matches
Object initializer - JavaScript
syntax let o = {} let o = {a: 'foo', b: 42, c: {}} let a = 'foo', b = 42, c = {} let o = {a: a, b: b, c: c} let o = { property: function (parameters) {}, get property() {}, set property(value) {} }; new notations in ecmascript 201
5 please see the compatibility table for support for these notations.
... // shorthand property names (es201
5) let a = 'foo', b = 42, c = {}; let o = {a, b, c} // shorthand method names (es201
5) let o = { property(parameters) {} } // computed property names (es201
5) let prop = 'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an object initializer is an expression that describes the initialization of an object.
...you will see code like this: let a = 'foo', b = 42, c = {}; let o = { a: a, b: b, c: c } with ecmascript 201
5, there is a shorter notation available to achieve the same: let a = 'foo', b = 42, c = {}; // shorthand property names (es201
5) let o = {a, b, c} // in other words, console.log((o.a === {a}.a)) // true duplicate property names when using the same name for your properties, the second property will overwrite the first.
...And 8 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,
5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,
5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path: effect of the "bevel" value --> <path d="m13,
5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="black" ...
... --> <path d="m3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="black" fill="none" stroke-linejoin="miter-clip" /> <!-- bottom right path: effect of the "arcs" value with fallback to "miter" if not supported.
... --> <path d="m9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="highlight"> <path d="m1,
5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.
5" stroke="pink" fill="none" stroke-width="0.02
5" /> <circle cx="1" cy="
5" r="0.0
5" fill="pink" /> <circle cx="3" cy="2" r="0.0
5" fill="pink" /> <circle cx="
5" cy="
5.
5" r="0.0
5" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value mite...
...And 8 more matches
<metadata> - SVG: Scalable Vector Graphics
f:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#computerb"/> </rdf:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket
5"/> <connect:ends>everything</connect:ends> </rdf:description> <rdf:description about="#hub"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket
5"/> </rdf:description> </rdf:rdf> </me...
...used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h
5 v-9 h12 v9 h
5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="1
5">hub</text> <g transform="translate(0 20)"> <rect width="2
53" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each ...
...using the defined socket --> <g id="sock1et" transform="translate(2
5 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(11
5 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket
5" transform="translate(20
5 20)"> <title>socket
5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id...
...And 8 more matches
JavaScript Daemons Management - Archive of obsolete content
about the “callback arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending additional parameters to timers' callback function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (commented code), which enables the html
5 standard parameters' passage functionality in that browser for both timers (polyfill), at the end of the daemon.js module.
... * *******************************/ /******************************* * polyfills * *******************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html
5 standard syntax).
...(nindex, nlength, bbackw) { // http://tyleregeto.com/text-animation-in-javascript for (var oletter, nletter = 0; nletter < aletters.length; nletter++) { oletter = aletters[nletter]; var ndist = nmaxdist - nmaxdist * 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, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this }; aletter...
...And 7 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
enableprivilege is disabled in firefox 1
5 and will be removed in firefox 17.
... for firefox 3.
5 choose "mozilla 1.9.1." for the current development trunk of firefox, choose "mozilla central" and for thunderbird, choose "comm.
...listing
5 shows how to get a summary of all browser windows in firefox and then close them.
...And 7 more matches
Signing an XPI - Archive of obsolete content
for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt
5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries.
...for windows you'll want the nspr-4.6.zip package in the v4.6/winnt
5.0_opt.obj/ folder.
...certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email address: certificates@lan.tjworld.net generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x
509.raw and x
509.cacert.
...And 7 more matches
Mozilla Crypto FAQ - Archive of obsolete content
finally, note that nss (and thus psm) can also be built using a licensed copy of the rsa bsafe crypto-c library (versions 4.1 or
5.0).
...of cryptographic software are the export administration regulations (ear), also known as 1
5 cfr chapter vii subchapter c, or 1
5 cfr parts 730-774.
... ("cfr" stands for "code of federal regulations.") the export administration regulations were created by the bureau of export administration (bxa) and were designed primarily to implement the requirements of the export administration act of 1979 (as amended), also known as
50 usc appendices 2401-2420.
...And 7 more matches
LIR - Archive of obsolete content
5 allocp pointer allocate stack space (result is an address) 6 reti void return an int 7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void so...
...urce filename for debug symbols 13 line void source line number for debug symbols 14 comment void a comment shown, on its own line, in lir dumps 1
5 not in use load 16 not in use 17 ldc2i integer load char and sign-extend to an int 18 lds2i integer load short and sign-extend to an int 19 lduc2ui integer load unsigned char and zero-extend to an unsigned int 20 ldus2ui integer load unsigned short and zero-extend to an unsigned int 21 ldi integer load int 22 ldq quad 64 bit load quad 23 ldd double load double 24 ldf2d double load float and extend to a double store 2
5 sti2c void store int truncated to char ...
... short 27 sti void store int 28 stq void 64 bit store quad 29 std void store double 30 std2f void store double as a float (losing precision) 31 not in use call 32 not in use 33 callv void call subroutine that returns void 34 calli integer call subroutine that returns an int 3
5 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 37 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to address in table 41 label void a jump target (no machine code is emitted for this) 42 not in...
...And 7 more matches
Table Layout Regression Tests - Archive of obsolete content
a typical beginning of a dump (*.rgd file) looks like: <frame va="1
5022440" type="viewport(-1)" state="270340" parent="0"> <view va="47171904"> </view> <stylecontext va="1
5022232"> <font serif 240 240 0 /> <color data="-16777216"/> <background data="0 2 3 -1 0 0 "/> <spacing data="left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum...
...bility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i
586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...a typical part of the verify log would look like: type manifest file: e:\moz_src\mozilla\obj-i
586-pc-msvc\dist\bin\components\xpti.dat +++ javascript debugging hooks installed.
...And 7 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
ldap new in thunderbird 2
5 requires seamonkey 2.22 the user's ldap directory is searched.
...obsolete since gecko 2
5 showcommentcolumn obsolete since gecko 1.9.1 type: boolean if true, a comment column appears in the popup.
...the default is
50 milliseconds.
...And 7 more matches
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 works with both windows media player 6.4 and with windows media players 7 and 9, but they have unique classids: windows media player 6.4 has this classid:22d6f312-b0f6-11d0-94ab-0080c74c7e9
5 windows media players 7 and 9 have this classid: 6bf
52a
52-394a-11d3-b1
53-00c04f79faa6 windows media player 6.4 and windows media player 7 and up are not backwards compatible in terms of apis (and thus have different classids).
... here is a snippet of code that illustrates the use of classids with geckoactivexobject: function creategeckowmpobject(clid) { var player = null; try { player = new geckoactivexobject(clid); } catch(e) { ; } return player; } // instantiate players wmp7or9 = creategeckowmpobject("{6bf
52a
52-394a-11d3-b1
53-00c04f79faa6}"); if (!wmp7or9) { wmp64 = creategeckowmpobject("{22d6f312-b0f6-11d0-94ab-0080c74c7e9
5}"); } .....
...for example if (window.activexobject) { // internet explorer only script } server-side detection using user-agent strings netscape 7.1's user agent string on windows has the general pattern: mozilla/
5.0 (windows; u; <em>operating system version</em>; <em>language</em>; rv:1.4) gecko/20030624 netscape/7.1 (ax<em>[;optional comments]</em>) the "vendor comment" (ax) following the "vendor version" netscape/7.1 is an indicator that the browser supports the windows media player activex control.
...And 7 more matches
Building up a basic demo with A-Frame - Game development
you should start off by: making sure you are using a modern browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v
54 or higher).
...add it now: <a-box color="#009
5dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube.
...add this just before the closing </a-scene> element: <a-camera position="0 1 4" cursor-visible="true" cursor-scale="2" cursor-color="#009
5dd" cursor-opacity="0.
5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
you to read <br><br> <font size="
5">my subheading</font> <br><br> this is the first subsection of my document.
...<br><br> <font size="
5">my 2nd subheading</font> <br><br> this is the second subsection of my content.
...instead of writing
5–7, write
5 to 7.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
you to read <br><br> <font size="
5">my subheading</font> <br><br> this is the first subsection of my document.
...<br><br> <font size="
5">my 2nd subheading</font> <br><br> this is the second subsection of my content.
...instead of writing
5–7, write
5 to 7.
...And 7 more matches
CSS values and units - Learn web development
the following are all classed as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -
55.
... <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.2
55, 128, or -1.2.
... <dimension> a <dimension> is a <number> with a unit attached to it, for example 4
5deg,
5s, or 10px.
...And 7 more matches
Positioning - Learn web development
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width:
500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width:
500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third eleme...
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width:
500px; margin: 0 auto; position: relative; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } the positioned element now sits relative to the <body> element.
...And 7 more matches
Client-side form validation - Learn web development
different types of client-side validation there are two different types of client-side validation that you'll encounter on the web: built-in form validation uses html
5 form validation features, which we've discussed in many places throughout this module.
... using built-in form validation one of the most significant features of html
5 form controls is the ability to validate most user data without relying on javascript.
... the required attribute the simplest html
5 validation feature is the required attribute.
...And 7 more matches
Advanced text formatting - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 9
5%"> bacon the glue that binds the world together.
...a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f
5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 1
50px; width: 9
5%"> <p>hello and welcome to my motivation page.
...And 7 more matches
Getting started with HTML - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 9
5%"> this is my text.
... </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f
5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textar...
...(the spacing is due to default css styling that the browser applies to paragraphs.) note: html
5 redefined the element categories: see element content categories.
...And 7 more matches
Images in HTML - Learn web development
therefore, you should give your image a descriptive filename; dinosaur.jpg is better than img83
5.png.
...you are provided with a basic <img> tag; we'd like you to embed the image located at the following url: https://udn.realityripple.com/samples/ec/
5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.
...if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 9
5%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-fa...
...And 7 more matches
Starting our Svelte Todo list app - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a3
54d3789cefbc31e2ca49
5?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks.
...th="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-1
5 04:07:43] waiting for changes...
...replace the contents of the file public/global.css with the following: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.
5% / 1.1
5 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { bo...
...And 7 more matches
Chrome registration
note: there was a bug in gecko 1.8.1.
5 (firefox 2.0.0.
5) and earlier where you could not use a relative url for the new-resolved-uri parameter.
...see bug 3234
55.
... this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application.
...And 7 more matches
about:memory
for example:
58
5 (100.0%) -- preference-service └──
58
5 (100.0%) -- referent ├──493 (84.27%) ── strong └───92 (1
5.73%) -- weak ├──92 (1
5.73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its children.
... 191.89 mb (100.0%) -- explicit ├───63.1
5 mb (32.91%) -- window-objects │ ├──24.
57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.
52%) -- active │ │ │ ├──10.
57 mb (0
5.
51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.
55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │...
... ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.7
5%) ++ dom │ │ │ │ └──0.0
5 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (0
5.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f6942
5b
5800) │ ├──1
5.7
5 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.8
5 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.
59 mb (01.87%) ++ (4 tiny) ├───4
5.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.
58%) ── heap-unclassified ├───22.
51 mb (11.73%) ++ heap-overhead ├─...
...And 7 more matches
NSS 3.14.2 release notes
nss 3.14.2 should be used with nspr 4.9.
5 or newer.
...on red hat enterprise linux
5.x systems, install the binutils220 package and add /usr/libexec/binutils220 to the beginning of your path environment variable.
... new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing notable changes in nss 3.14.2 bug 80
5604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel.
...And 7 more matches
NSS tools : modutil
modutil supports several mechanisms: rsa, dsa, rc2, rc4, rc
5, aes, des, dh, sha1, sha2
56, sha
512, ssl, tls, md
5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...for example: platforms { linux:
5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { executable path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:
5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which i...
...(y/n) y using installer script "installer_script" successfully parsed installation script current platform is linux:
5.4.08:x86 using installation parameters for platform linux:
5.4.08:x86 installed file crypto.so to /tmp/crypto.so installed file setup.sh to ./pk11inst.dir/setup.sh executing "./pk11inst.dir/setup.sh"...
...And 7 more matches
Component; nsIPrefBranch
inherits from: nsisupports last changed in gecko
58 (firefox
58 / thunderbird
58 / seamonkey 2.
55) this object is created with a "root" value which describes the base point in the preferences "tree" from which this "branch" stems.
... method overview void addobserver(in string adomain, in nsiobserver aobserver, in boolean aholdweak); void clearuserpref(in string aprefname); void deletebranch(in string astartingat); boolean getboolpref(in string aprefname, requires gecko
54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko
54 [optional] in string adefaultvalue); requires gecko
58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray);...
... void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); long getintpref(in string aprefname,requires gecko
54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void lockpref(in string aprefname); boolean prefhasuservalue(in string aprefname); boolean prefislocked(in string aprefname); void removeobserver(in string adomain, in nsiobserver aobserver); void resetbranch(in string astartingat); void setboolpref(in string aprefname, in long avalue); void setcharpref(in string aprefname, in string avalue); requires gecko
58 void setstringpref(in string aprefname, in utf8string avalue); void setcomplexvalue(in stri...
...And 7 more matches
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 ...
... 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href=...
...And 7 more matches
IDBFactory - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbfactorychrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitcmpchrome ...
...And 7 more matches
NavigationPreloadManager - Web APIs
androidopera for androidsafari on iossamsung internetnavigationpreloadmanager experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes implementation tracked in bug 12909
58ie ?
... webview android full support 62chrome android full support 62firefox android no support nonotes no support nonotes notes implementation tracked in bug 12909
58opera android full support 46safari ios ?
... android full support 8.0disable experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes implementation tracked in bug 12909
58ie ?
...And 7 more matches
PhotoCapabilities - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetphotocapabilities experimentalchrome full support
59edge full support ≤79firefox ?
... webview android full support
59chrome android full support
59firefox android ?
... samsung internet android full support 7.0filllightmode experimentalchrome full support
59edge full support ≤79firefox ?
...And 7 more matches
Web accessibility for seizures and physical reactions - Accessibility
section
508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than
55 hz.
...abilitynet's factsheet (november 201
5) computers and epilepsy (pdf) describes more of the details on refresh rates.
...this is "1" if the user has requested not to be tracked by web sites, content, or advertising" media queries level
5 environmentmq (planned in media queries level
5) light-level has three valid values: dim, normal, and washed.
...And 7 more matches
@media - CSS: Cascading Style Sheets
forced-colors detect whether user agent restricts color palette added in media queries level
5.
... added in media queries level
5.
... light-level light level of the environment added in media queries level
5.
...And 7 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d ...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d ...
...And 7 more matches
<easing-function> - CSS: Cascading Style Sheets
for example, a color component greater than 2
55 or smaller than 0 will be clipped to the closest allowed value (2
55 and 0, respectively).
...this keyword represents the easing function cubic-bezier(0.2
5, 0.1, 0.2
5, 1.0).
...this keyword represents the easing function cubic-bezier(0.42, 0.0, 0.
58, 1.0).
...And 7 more matches
Constraint validation - Developer guides
html
5 introduced new mechanisms for forms: it added new semantic types for the <input> element and constraint validation to ease the work of checking the form content on the client side.
... note: html
5 constraint validation doesn't remove the need for validation on the server side.
... even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without html
5 and without javascript) or by bad people trying to trick your web application.
...And 7 more matches
<input type="week"> - HTML: Hypertext Markup Language
<input> elements of type week create input fields allowing easy entry of a year plus the iso 8601 week number during that year (i.e., week 1 to
52 or
53).
... you can also get and set the value in javascript using the input element's value property, for example: var weekcontrol = document.queryselector('input[type="week"]'); weekcontrol.value = '2017-w4
5'; additional attributes in addition to the attributes common to <input> elements, week inputs offer the following attributes: attribute 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 ...
...the default stepping base is -2
59,200,000, which is the beginning of the first week of 1970 ("1970-w01").
...And 7 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
this continues for the next three sections, z
5, z6, and z7 (and table of contents entries named z1, z2, and z3), each automatically given anchors with these names.
...as applicable for the head of this document> <nextid n="z20"> </head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z
5">second section heading</a> <a name="z8" href="#z14">newly inserted third section heading</a> <a name="z9" href="#z1
5">newly inserted fourth section heading</a> <a name="z2" href="#z6">original third (now fifth) section heading</a> <a name="z3" href="#z7">original fourth (now sixth) section heading</a> <a name="z10" href="#z16">seventh section heading</a> ...
...</p> <h2><a name="z
5">second section heading</a></h1><p> ...
...And 7 more matches
JavaScript data types and data structures - JavaScript
the number type is a double-precision 64-bit binary format ieee 7
54 value (numbers between -(2
53 − 1) and 2
53 − 1).
... starting with ecmascript 201
5, 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.
... this example demonstrates, where incrementing the number.max_safe_integer returns the expected result: > const x = 2n **
53n; 90071992
54740992n > const y = x + 1n; 90071992
54740993n you can use the operators +, *, -, **, and % with bigints—just like with numbers.
...And 7 more matches
Expressions and operators - JavaScript
var1 <= var2 var2 <=
5 note: (=>) is not an operator, but the notation for arrow functions.
...for example: 1 / 2; // 0.
5 1 / 2 == 1.0 / 2.0; // this is true in addition to the standard arithmetic operations (+, -, *, /), javascript provides the arithmetic operators listed in the following table: arithmetic operators operator description example remainder (%) binary operator.
... 12 %
5 returns 2.
...And 7 more matches
Array.from() - JavaScript
in es201
5, the class syntax allows sub-classing of both built-in and user-defined classes.
... polyfill array.from() was added to the ecma-262 standard in the 6th edition (es201
5).
...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 ?
...And 7 more matches
Date.parse() - JavaScript
201
5-02-31).
... it is not recommended to use date.parse as until es
5, parsing of strings was entirely implementation dependent.
... however, invalid values in date strings not recognized as simplified iso format as defined by ecma-262 may or may not result in nan, depending on the browser and values provided, e.g.: // non-iso string with invalid date values new date('23/2
5/2014'); will be treated as a local date of 2
5 november, 201
5 in firefox 30 and an invalid date in safari 7.
...And 7 more matches
WebAssembly.Table - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstablechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0table() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the ...
...And 7 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="
50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="
50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </lineargradient> <style type="text/css"><![cdata[ #rect1 { fill: url(#gradient1);...
... } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]></style> </defs> <rect id="rect1" x="10" y="10" rx="1
5" ry="1
5" width="100" height="100"/> <rect x="10" y="120" rx="1
5" ry="1
5" width="100" height="100" fill="url(#gradient2)"/> </svg> screenshotlive sample above is an example of a linear gradient being applied to a <rect> element.
... <stop offset="100%" stop-color="yellow" stop-opacity="0.
5"/> to use a gradient, we have to reference it from an object's fill or stroke attributes.
...And 7 more matches
Patterns - SVG: Scalable Vector Graphics
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="
5%" stop-color="white"/> <stop offset="9
5%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="
5%" stop-color="red"/> <stop offset="9
5%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".2
5" height=".2
5"> <rect x="0" y="0" width="
50" height="
50" fill="skyblue"/> ...
... <rect x="0" y="0" width="2
5" height="2
5" fill="url(#gradient2)"/> <circle cx="2
5" cy="2
5" r="20" fill="url(#gradient1)" fill-opacity="0.
5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including gradients and opacity.
...since, in this case, we wanted the pattern to repeat 4 times horizontally and vertically, the height and width are set to 0.2
5.
...And 7 more matches
Creating Reusable Modules - Archive of obsolete content
md
5 is a commonly used hash function: although it's no longer considered secure, it works fine outside a security context.
... } return path; } hash function firefox has built-in support for hash functions, exposed via the nsicryptohash xpcom interface the documentation page for that interface includes an example of calculating an md
5 hash of a file's contents, given its path.
... we can adapt it like this: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md
5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-input-stream;1"] .createinstance(ci.nsifileinputstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md
5 algorithm ch.init(ch.md
5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_uint32_max); ...
...And 6 more matches
Actionscript Performance Tests - Archive of obsolete content
the runtests.py test harness works by parsing the abc stdout for lines like: 'metric time
566'.
... when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 9
5% confidence interval is calculated.
... the 9
5% confidence interval is the calculated percentage of the mean value to fall within 9
5% of the measured results.
...And 6 more matches
SSL and TLS - Archive of obsolete content
advanced encryption standard (aes) ciphers have a fixed block size of 128-bits, and the keys can be either 128-bit or 2
56-bit.
... there are 3.4 x 1038 possible 128-bit keys and 1.1 x 1077 possible 2
56-bit keys.
...because the key size is so large, there are approximately 3.7 * 10
50 possible keys.
...And 6 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444
553
540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a...
...thus, in the following example, instead of stopping at the activex control, ie will display the same animation twice since it also understands the mime type for flash: <!-- usage will not work as intended --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444
553
540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id...
...here is an example of some javascript which does this: if (window.activexobject) { // browser supports activex // create object element with // download url for ie ocx document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444
553
540000"'); document.write(' codebase="http://download.macromedia.com'); document.write('/pub/shockwave/cabs/flash/swflash.cab#version=
5,0,0,0"'); document.write(' width="366" height="142" id="myflash">'); document.write(' <param name="movie" value="javascript-to-flash.swf" />'); document.write(' <param name="quality" value="high" />'); document.write(' <param name="swliveconnect" value="true" />...
...And 6 more matches
Building up a basic demo with Three.js - Game development
the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z =
50; scene.add(camera); add the above lines to your code, below those previously added.
...the default value is
50.
... the z position, with the value of
50 units, is the distance between the camera and the center of the scene on the z axis.
...And 6 more matches
WAI-ARIA basics - Learn web development
for example, html
5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available, developers would simply use <div>s with ids or classes, e.g.
...html
5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs.
...many of these are so-called landmark roles, which largely duplicate the semantic value of html
5 structural elements e.g.
...And 6 more matches
Styling links - Learn web development
now let's add some more information to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #26
5301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #26
5301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <...
... playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #009
5dd;"><p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #009
5dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h...
...2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #009
5dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput(...
...And 6 more matches
Basic native form controls - Learn web development
we cover newer form controls added in html
5 in the next two articles.
... note: html
5 enhanced the basic original single line text field by adding special values for the type attribute that enforce specific validation constraints and other features, for example specific to entering urls or numbers.
... we'll cover those in the next article, the html
5 input types.
...And 6 more matches
Useful string methods - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 12
5px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 9
5%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'merry christmas my love', ...
...t = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f
5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution...
... playable code 2 <h2>live output</h2> <div class="output" style="min-height: 12
5px;"> <ul> </ul> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 2
50px; width: 9
5%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liverpool']; for (let i = 0; i < cities.
...And 6 more matches
Object building practice - Learn web development
type in the following to create a new ball instance: let testball = new ball(
50, 100, 4, 4, 'blue', 10); try calling its members: testball.x testball.size testball.color testball.draw() when you enter the last line, you should see the ball draw itself somewhere on the canvas.
...the following will do this job — add it to the bottom of your code now: let balls = []; while (balls.length < 2
5) { let size = random(10,20); let ball = new ball( // ball position always drawn at least one ball width // away from the edge of the canvas, to avoid drawing errors random(0 + size,width - size), random(0 + size,height - size), random(-7,7), random(-7,7), 'rgb(' + random(0,2
55) + ',' + random(0,2
55) + ',' + random(0,2
55) +')', size ); balls.push(ball); } ...
... the while loop creates a new instance of our ball() using random values generated with our random() function, then push()es it onto the end of our balls array, but only while the number of balls in the array is less than 2
5.
...And 6 more matches
Client-Server Overview - Learn web development
tml head contains useful information about an html document (but not the actual content itself, which is in the body): get https://developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host: developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/
5.0 (windows nt 10.0; wow64) applewebkit/
537.36 (khtml, like gecko) chrome/
52.0.2743.116 safari/
537.36 accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-88
59-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n
521lu21b1t136rhbv7ez...
...ngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.14719119
53; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
... the final line contains information about the client-side cookies — you can see in this case the cookie includes an id for managing sessions (cookie: sessionid=6ynxs23n
521lu21b1t136rhbv7ezngie; ...).
...And 6 more matches
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-88
59-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=9180,4470 c=9180,4470 cnt=8
56 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=8
57 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=8
58 canvas 00b97c6c r=0 a=9180,uc c=9180,4470 cnt=8
59 area 02d7afe4 r=0 a=9180,uc c=91...
...80,uc cnt=860 text 02d7b1
50 r=0 a=9180,uc c=uc,uc cnt=861 text 02d7b1
50 d=0,0 block 02d7b210 r=0 a=9180,uc c=8940,uc cnt=862 block 02d7b210 d=8940,0 area 02d7afe4 d=9180,120 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 vp 00b97c30 r=1 a=9180,4470 c=9180,4470 cnt=863 scroll 00b97ee0 r=1 a=9180,4470 c=9180,4470 cnt=864 scroll 00b97ee0 r=1 a=9180,4470 c=9180,4470 cnt=86
5 canvas 00b97c6c r=1 a=9180,uc c=9180,4470 cnt=866 area 02d7afe4 r=1 a=9180,uc c=9180,uc cnt=867 block 02d7b210 r=1 a=9180,uc c=8940,uc cnt=868 text 02d7b3f8 r=0 a=8940,uc c=uc,uc cnt=869 text 02d7b3f8 d=0,0 tblo 02d7b
5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1
500,uc cnt=871 rowg 00b984...
...a4 r=0 a=uc,uc c=uc,uc cnt=872 row 02d7baf8 r=0 a=uc,uc c=uc,uc cnt=873 cell 02d7bc98 r=0 a=uc,uc c=uc,uc cnt=874 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=87
5 text 02d7be84 r=0 a=uc,uc c=uc,uc cnt=876 text 02d7be84 d=300,28
5 me=300 block 02d7bcf8 d=300,300 me=300 cell 02d7bc98 d=330,330 me=330 row 02d7baf8 d=uc,330 rowg 00b984a4 d=uc,330 colg 02d7bfb0 r=0 a=uc,uc c=uc,uc cnt=877 col 02d7c0d8 r=0 a=0,0 c=1
500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1
500,uc c=1
500,uc cnt=879 row 02d7baf8 r=2 a=1
500,uc c=1
500,uc cnt=880 cell 02d7bc98 r=2 a=1440,uc c=1410,uc cnt=881 block 02d7bcf8 r=2 a=1410,uc c=1410,uc cnt=882 ...
...And 6 more matches
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be
5ac4: reflowing dirty lines computedwidth=9000 computedheight=1
500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
... the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <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=4
500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=...
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj
5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet non...
...And 6 more matches
JSS FAQ
once jss initialized, i can't get anymore instances with certificatefactory.getinstance(x.
509)?
... how do i convert org.mozilla.jss.crypto.x
509certificate to org.mozilla.jss.pkix.cert.certificate?
... how do i convert org.mozilla.jss.pkix.cert to org.mozilla.jss.crypto.x
509certificate?
...And 6 more matches
NSS_3.12.2_release_notes.html
bug 200704: pkcs11: invalid session handle 0 bug 20
5434: fully implement new libpkix cert verification api from bug 294
531 bug 302670: use the installed libz.so where available bug 30
5693: shlibsign generates pqg for every run bug 311483: exposing includecertchain as a parameter to sec_pkcs12addcertandkey bug 390
527: get rid of pkixerrormsg variable in pkix_error bug 391
560: libpkix does not consistently return pkix_validatenode tree that...
... bug 432260: [[@ pkix_pl_httpdefaultclient_hdrcheckcomplete - pkix_pl_memcpy] crashes when there is no content-length header in the http response bug 436
599: pkix: aia extension is not used in some bridge ca / known certs configuration bug 437804: certutil -r for cert renewal should derive the subject from the cert if none is specified.
... bug 444974: crash upon reinsertion of e-identity smartcard bug 447
563: modutil -add prints no error explanation on failure bug 448431: pk11_createmergelog() declaration causes gcc warning when compiling with -wstrict-prototypes bug 449334: pk12util has duplicate options letters bug 44972
5: signver is still using static libraries.
...And 6 more matches
NSS 3.14 release notes
introduction the nss team has released network security services (nss) 3.14, which is a minor release with the following new features: support for tls 1.1 (rfc 4346) experimental support for dtls 1.0 (rfc 4347) and dtls-srtp (rfc
5764) support for aes-ctr, aes-cts, and aes-gcm support for keying material exporters for tls (rfc
570
5) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md
5 hash algorithm is now disabled by default.
... support for tls 1.1 (rfc 4346) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=
56
5047).
... when connecting to a server, the record layer version of the initial clienthello will be at most { 3, 1 } (tls 1.0), even when attempting to negotiate tls 1.1 (https://bugzilla.mozilla.org/show_bug.cgi?id=774
547) the choice of client_version sent during renegotiations has changed.
...And 6 more matches
NSS 3.46 release notes
notable changes in nss 3.46 certificate authority changes the following ca certificates were removed: bug 1
574670 - remove expired class 2 primary root certificate sha-2
56 fingerprint: 0f993c8aef97baaf
5687140ed
59ad1821bb4afacf0aa9a
58b
5d
57a338a3afbcb bug 1
574670 - remove expired utn-userfirst-client root certificate sha-2
56 fingerprint: 43f2
57412d440d627476974f877da8f1fc2444
56
5a367ae60eddc27a412
531ae bug 1
574670 - remove expired deutsche telekom root ca 2 root...
... certificate sha-2
56 fingerprint: b6191a
50d0c3977f7da99bcdaac86a227daeb9679ec70ba3b0c9d92271c170d3 bug 1
566
569 - remove swisscom root ca 2 root certificate sha-2
56 fingerprint: f09b122c7114f4a09bd4ea4f4a99d
558b46e4c2
5cd81140d29c0
5613914c3841 upcoming changes to default tls configuration the next nss team plans to make two changes to the default tls configuration in nss 3.47, which will be released in october: tls 1.3 will be the default maximum tls version.
... see bug 1
573118 for details.
...And 6 more matches
NSS 3.48 release notes
introduction the nss team has released network security services (nss) 3.48 on
5 december 2019, which is a minor release.
... see bug 1
573118 for details.
... see bug 1
57
5411 for details.
...And 6 more matches
sample2
"-----begin signature-----" #define ns_sig_trailer "-----end signature-----" #define ns_cert_header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* missing publically from nss versions earlier than 3.13 */ #ifndef sec_error_base #define sec_error_base (-0x2000) typedef enum { sec_error_io = sec_error_base + 0, sec_error_token_not_logged_in = (sec_error_base + 1
55), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss 3.13.
...*/ #ifndef port_errortostring #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey =
5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">]", "-s <subject> -r <csr> | ", "-n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickn...
...*res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md
5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; } rv = sgn_begin(sgn); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { rv = sgn_update(sgn, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while ...
...And 6 more matches
nsIDownloadManager
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) implemented by: @mozilla.org/download-manager;1.
... download_queued
5 the download is in the queue but is not presently downloading.
... endbatchupdate() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) indicate that a batch update is ending.
...And 6 more matches
FederatedCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential experimentalchrome full support
51edge full support ≤79firefox ?
... webview android full support
51chrome android full support
51firefox android ?
... samsung internet android full support
5.0federatedcredential() constructor non-standardchrome full support
51edge full support ≤79firefox ?
...And 6 more matches
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 6 more matches
HTMLInputElement.stepDown() - Web APIs
given <input id="mytime" type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:1
5, decrementing the time by 3 * 900, or 4
5 minutes.
... mytime.step(), with no parameter, would have resulted in 16:4
5, as n defaults to 1.
... <!-- decrements by intervals of 900 seconds (1
5 minute) --> <input type="time" max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input type="date" max="2019-12-2
5" 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.
...And 6 more matches
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51"...
... y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><p...
...olyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="6
5" wi...
...And 6 more matches
size - CSS: Cascading Style Sheets
syntax /* keyword values for scalable size */ size: auto; size: portrait; size: landscape; /* <length> values */ /* 1 value: height = width */ size: 6in; /* 2 values: width then height */ size: 4in 6in; /* keyword values for absolute size */ size: a4; size: b
5; size: jis-b4; size: letter; /* mixing size and orientation */ size: a4 portrait; values auto the user agent decides the size of the page.
... <page-size> a
5 this matches the standard, iso dimensions: 148mm x 210mm.
... b
5 this matches the standard, iso dimensions: 176mm x 2
50mm.
...And 6 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft f...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="b...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</...
...And 6 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius:
5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul>...
... </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that
500 pixels wide.
... @media (min-width:
500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking shape in the value of grid-template-areas.
...And 6 more matches
break-after - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.
5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification.
... support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support
50edge full support 12firefox no support noie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari no s...
...upport nowebview android full support
50chrome android full support
50firefox android no support noopera android full support 37 full support 37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support
5.0alwayschrome no support noedge no support nofirefox no support ...
...And 6 more matches
break-before - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.
5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification.
... support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support
50edge full support 12firefox full support 6
5ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari no...
... support nowebview android full support
50chrome android full support
50firefox android full support 6
5opera android full support 37 full support 37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support
5.0always experimentalchrome no support noedge no support nofirefox no support ...
...And 6 more matches
break-inside - CSS: Cascading Style Sheets
fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/4
508d88f78.png"> <figcaption>the firefox logo — fox wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.
5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in t...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support
50edge full support 12firefox full support 6
5ie full support 10opera full support 37 full support 37 no support 11.1 — 12.1safari fu...
...And 6 more matches
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight:
500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400,
500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... 4
51) will be translated to one of these values for non-variable fonts using the fallback weights system.
...And 6 more matches
max-height - CSS: Cascading Style Sheets
syntax /* <length> value */ max-height: 3.
5em; /* <percentage> value */ max-height: 7
5%; /* 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.
...centage value is treated as none.computed valuethe percentage as specified or the absolute length or noneanimation 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 max-height using percentage and keyword values table { max-height: 7
5%; } form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
... 14safari ios full support 1samsung internet android full support 1.0fit-content experimentalchrome full support 46 full support 46 full support 2
5prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 79 full support 79 full support 79prefixed prefixed implemented with the vendor prefix: -webkit-firefox partial support 3prefixed notes partial ...
...And 6 more matches
max-width - CSS: Cascading Style Sheets
syntax /* <length> value */ max-width: 3.
5em; /* <percentage> value */ max-width: 7
5%; /* 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.
...to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation 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 max width in pixels in this example, the "child" will be either 1
50 pixels wide or the width of the "parent," whichever is smaller.
... </div> </div> css #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 1
50px; } result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification.
...And 6 more matches
position - CSS: Cascading Style Sheets
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width:
500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is th...
... </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top: 80px; left: 10px; background: blue; } .outer { width:
500px; height: 300px; overflow: scroll; padding-left: 1
50px; } result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positioning.
...losions in the sky</dd> </div> <div> <dt>t</dt> <dd>ted leo & the pharmacists</dd> <dd>t-pain</dd> <dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 24px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d8
5; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/4
5px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status co...
...And 6 more matches
scroll-snap-type - CSS: Cascading Style Sheets
ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>
5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x prox.
... ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>
5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand.
... ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>
5</div> </div> <div class="container y proximity-scroll-snapping" dir="ltr"> <div>y prox.
...And 6 more matches
text-emphasis - CSS: Cascading Style Sheets
the size of the emphasis symbol, like ruby symbols, is about
50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.
... constituent properties this property is a shorthand for the following css properties: text-emphasis-color text-emphasis-style syntax /* initial value */ text-emphasis: none; /* no emphasis marks */ /* <string> value */ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\2
5b2'; text-emphasis: '*' #
555; text-emphasis: 'foo'; /* should not use.
... it may be computed to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* keywords value combined with a color */ text-emphasis: filled sesame #
555; /* global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks.
...And 6 more matches
text-overflow - CSS: Cascading Style Sheets
formal definition initial valueclipapplies toblock container elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ clip | ellipsis | <string> ]{1,2} examples css p { width: 200px; border: 1px solid; padding: 2px
5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-string { /* not supported in most browsers, see the 'browser compatibility' section below */ text-overflow: " [..]"; } html <...
... css value direction: ltr direction: rtl expected result live result expected result live result visible overflow 1234
567890 1234
567890 09876
54321 1234
567890 text-overflow: clip 1234
567890 1234
567890 text-overflow: '' 1234
5 1234
567890
54321 1234
567890 text-overflow: ellipsis 1234… 1234
567890 …4321 1234
567890 text-overflow: '.' 1234.
... 1234
567890 .4321 1234
567890 text-overflow: clip clip 1234
56 1234
567890 6
54321 1234
567890 text-overflow: clip ellipsis 1234… 1234
567890 6
543… 1234
567890 text-overflow: clip '.' 1234.
...And 6 more matches
transition-duration - CSS: Cascading Style Sheets
syntax /* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 1
5s; transition-duration: 10s, 30s, 230ms; /* global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset; values <time> is a <time> denoting the amount of time the transition from the old value of a property to the new value should take.
... formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.
5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 2
50px; height:12
5px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:...
...0.
5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.
5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width:
50px; height:
50px; background-color: blue; color: yellow; font-size: 18px; left: 1
50px; top:2
5px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.
5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; ...
...And 6 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html
5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html
5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html
5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
... html
5 audio in detail now we've looked at a basic example, let's now explore the different aspects of html
5 audio in more detail.
...here's an example of creating an <audio> element, setting the media to play, playing and pausing, and then playing from
5 seconds into the audio: var myaudio = document.createelement('audio'); if (myaudio.canplaytype('audio/mpeg')) { myaudio.setattribute('src','audiofile.mp3'); } if (myaudio.canplaytype('audio/ogg')) { myaudio.setattribute('src','audiofile.ogg'); } alert('play'); myaudio.play(); alert('stop'); myaudio.pause(); alert('play from
5 seconds in'); myaudio.currenttime =
5; myaudio.play(); le...
...And 6 more matches
Setting up adaptive streaming media sources - Developer guides
let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an html
5 media element.
... <?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt6
54s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mimetype="audio/mp4" codecs="mp4a.40.
5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</b...
...aseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0100.264.dash</baseurl> </representation> <representation id="3" bandwidth="17
5000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_017
5.264.dash</baseurl> </representation> <representation id="4" bandwidth="2
50000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_02
50.264.dash</baseurl> </representation> <representation id="
5" bandwidth="
500000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0
500...
...And 6 more matches
Creating a cross-browser video player - Developer guides
this article describes a simple html
5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers.
...to anyone familiar with html
5 markup and the <video> element, there should be nothing here that surprises you.
...ars-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="
576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> <img ...
...And 6 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
allowed values: anonymous a cors request is sent with credentials omitted (that is, no cookies, x.
509 certificates, or authorization request header).
... use-credentials the cors request is sent with any credentials included (that is, cookies, x.
509 certificates, and the authorization request header).
...for example, (max-height:
500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than
500px.
...And 6 more matches
<input type="tel"> - HTML: Hypertext Markup Language
when submitted to the server, the above input's data would be represented as, for example, telno=+1212
55531
51.
... here, we have an tel input with the placeholder 123-4
567-8901.
... <input id="telno" name="telno" type="tel" placeholder="123-4
567-8901"> controlling the input size you can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.
...And 6 more matches
<th> - HTML: Hypertext Markup Language
values higher than 6
5534 are clipped down to 6
5534.
... deprecated attributes align obsolete since html
5 this enumerated attribute specifies how the cell content's horizontal alignment will be handled.
... axis obsolete since html
5 this attribute contains a list of space-separated strings.
...And 6 more matches
Browser detection using the user agent - HTTP
also note that there is a huge difference between the media queries (max-width: 2
5em), not all and (min-width: 2
5em), and (max-width: 24.99em): (max-width: 2
5em) excludes (max-width: 2
5em), whereas not all and (min-width: 2
5em) includes (max-width: 2
5em).
... (max-width: 24.99em) is simply a poor man's version of not all and (min-width: 2
5em): do not use (max-width: 24.99em) because the layout might break on very high font sizes on very high definition devices in the future.
.../xyz seamonkey seamonkey/xyz chrome chrome/xyz chromium/xyz chromium chromium/xyz safari safari/xyz chrome/xyz or chromium/xyz safari gives two version numbers: one technical in the safari/xyz token, and one user-friendly in a version/xyz token opera opr/xyz [1] opera/xyz [1] opera 1
5+ (blink-based engine) [2] opera 12- (presto-based engine) internet explorer ; msie xyz; [1] trident/7.0; .*rv:xyz [2] [1] internet explorer 10- [2] internet explorer 11 of course, there is absolutely no guarantee that another browser will not hijack some of these things (like chrome hijacked the safari string in the past).
...And 6 more matches
Indexed collections - JavaScript
in es201
5, you can use the array.of static method to create arrays with single element.
... let arr = [] arr[3.4] = 'oranges' console.log(arr.length) // 0 console.log(arr.hasownproperty(3.4)) // true you can also populate an array when you create it: let myarray = new array('hello', myvar, 3.141
59) // or let myarray = ['mango', 'apple', 'orange'] understanding length at the implementation level, javascript's arrays actually store their elements as standard object properties, using the array index as the property name.
... the foreach() method provides another way of iterating over an array: let colors = ['red', 'green', 'blue'] colors.foreach(function(color) { console.log(color) }) // red // green // blue alternatively, you can shorten the code for the foreach parameter with es201
5 arrow functions: let colors = ['red', 'green', 'blue'] colors.foreach(color => console.log(color)) // red // green // blue the function passed to foreach is executed once for every item in the array, with the array item passed as the argument to the function.
...And 6 more matches
Destructuring assignment - JavaScript
syntax let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40,
50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40,
50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d: 40} description the object and array literal expressions provide an easy way to...
... const x = [1, 2, 3, 4,
5]; the destructuring assignment uses similar syntax, but on the left-hand side of the assignment to define what values to unpack from the sourced variable.
... const x = [1, 2, 3, 4,
5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2 this capability is similar to features present in languages such as perl and python.
...And 6 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
try inserting one within the quicknote_savenote function, around line 34
5 (figure 3).
...update calc.js with the method in listing
5.
... listing 4: test_calc.js (adding sample test case) '2 1 -': function() { var calc = new rpncalc.rpncalc(); calc.init(); calc.push(2); calc.push(1); calc.minus(); assert.equals(calc.pop(), 1); }, listing
5: calc.js (implementing subtraction operation) minus: function() { this._letfunc(this._minus); }, _minus: function(a, b) { return a - b; }, listing 6: calc.js (correcting mistake in implementation of subtraction) _letfunc: function(func) { // correct pop order b = this.pop(); a = this.pop(); this.push(func(a, b)); }, understanding source code in the open-source community, you can lear...
...And 5 more matches
Installing Dehydra - Archive of obsolete content
gcc 4.
5, with the package gcc-4.
5-plugin-dev installed.
... building spidermonkey it is recommended that you use spidermonkey revision aurora_base_2011070
5 when building dehydra.
... cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_2011070
5 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too.
...And 5 more matches
Introducing the Audio API extension - Archive of obsolete content
the audio data api extension extends the html
5 specification of the <audio> and <video> media elements by exposing audio metadata and raw audio data.
... obsolete since gecko 28 (firefox 28 / thunderbird 28 / seamonkey 2.2
5 / firefox os 1.3)this feature is obsolete.
...the following example extracts the data from an audio element: <!doctype html> <html> <head> <title>javascript metadata example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width:
512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </html> the m...
...And 5 more matches
jspage - Archive of obsolete content
var mootools={version:"1.2.4",build:"0d9113241a90b9cd
5643b92679
58
52a2026710d4"};var native=function(k){k=k||{};var a=k.name;var i=k.legacy;var b=k.protect; var c=k.implement;var h=k.generics;var f=k.initialize;var g=k.afterimplement||function(){};var d=f||i;h=h!==false;d.constructor=native;d.$family={name:"native"}; if(i&&f){d.prototype=i.prototype;}d.prototype.constructor=d;if(a){var e=a.tolowercase();d.prototype.$family={name:e};native.typize(d,e);}var j=function(n,l,o,m){if(!b||m||!n.prototype[l]){n.prototype[l]=o; }if(h){native.genericize(n,l,b);}g.call(n,l,o);return n;};d.alias=function(n,l,p){if(typeof n=="string"){var o=this.prototype[n];if((n=o)){return j(this,l,n,p); }}for(var m in n){this.alias(m,n[m],l);}return this;};d.implement=function(m,l,o){if(typeof m=="string"){ret...
...r=$merge({engine:{name:"unknown",version:0},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?9
50:92
5)); },trident:function(){return(!window.activexobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:
5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?
52
5:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});...
...":e={a:0,special:"index"};break;case"last":e={special:"last-child"};break;case"only":e={special:"only-child"}; break;default:e={a:(d-1),special:"index"};}return selectors.cache.nth[h]=e;},parseselector:function(e){if(selectors.cache.parsed[e]){return selectors.cache.parsed[e]; }var d,h={classes:[],pseudos:[],attributes:[]};while((d=selectors.regexps.combined.exec(e))){var i=d[1],g=d[2],f=d[3],b=d[
5],c=d[6],j=d[7];if(i){h.classes.push(i); }else{if(c){var a=selectors.pseudo.get(c);if(a){h.pseudos.push({parser:a,argument:j});}else{h.attributes.push({name:c,operator:"=",value:j});}}else{if(g){h.attributes.push({name:g,operator:f,value:b}); }}}}if(!h.classes.length){delete h.classes;}if(!h.attributes.length){delete h.attributes;}if(!h.pseudos.length){delete h.pseudos;}if(!h.classes&&!h.attribute...
...And 5 more matches
Using gdb on wimpy computers - Archive of obsolete content
if your computer has less than 2
56 mb of memory, your computer will become unhappy as gdb loads mozilla's shared libraries.
...(gdb) b main breakpoint 1 at 0x804ec4
5: file nsapprunner.cpp, line 811.
...0x404ccdeb in __sigsuspend (set=0xbf
5ffbc0) at ../sysdeps/unix/sysv/linux/sigsuspend.c:48 48 ../sysdeps/unix/sysv/linux/sigsuspend.c: no such file or directory.
...And 5 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
5.
... <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author="my name" chrome:name="custombutton" chrome:localeversion="1.8" chrome:skinversion="1.
5" chrome:extension="true"/> <rdf:seq about="urn:mozilla:overlays"> <!-- browser --> <rdf:li> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- address book --> <rdf:li> <rdf:seq about="chrome://messenger/content/addressbook/addressbook.xul"> <r...
...="abtoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- message compose --> <toolbar id="composetoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- mail, message --> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="1
5"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item" oncommand="cu...
...And 5 more matches
Element Positioning - Archive of obsolete content
examples of setting widths and heights <button label="1" style="width: 100px;"/> <button label="2" style="width: 100em; height: 10px;"/> <button label="3" flex="1" style="min-width:
50px;"/> <button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width:
50px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (px means pixels).
...however, the button will never shrink to be less than
50 pixels.
... example
5 the text input is flexible but will never grow to be larger than 10 ems.
...And 5 more matches
What is RSS - Archive of obsolete content
for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>example news site</title> <description>this is an example news site.</description> <lastbuilddate>wed, 27 jul 200
5 00:30:30 -0700</lastbuilddate> <link>http://news.example.com/</link> <item> <title>news flash: i like bread</title> <guid ispermalink="false">4d4a0a12-f188-4c97-908b-eea27213c2fe</guid> <pubdate>wed, 27 jul 200
5 00:30:30 -0700</pubdate> <link>http://news.example.com/artcle/
554</link> </item> <item> <title>...
...big news today: birds fly</title> <guid ispermalink="false">c4a63f09-b4
5b-466b-8773-6ff264001ab7</guid> <pubdate>tue, 19 jul 200
5 04:32:
51 -0700</pubdate> <link>http://news.example.com/artcle/
553</link> </item> <item> <title>fire is hot</title> <guid ispermalink="false">c179
5324-d
5ea-44fa-9
5b1-b
5ce2090d4f1</guid> <pubdate>sun, 1
5 may 200
5 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/
552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts.
... for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>joe blow's blog</title> <description>this is the weblog of joe blow</description> <lastbuilddate>sun, 1
5 may 200
5 13:02:08 -0
500</lastbuilddate> <link>http://joe-blow.example.net/</link> <item> <title>i be blogging...</title> <guid>http://joe-blow.example.net/log/21</guid> <pubdate>sun, 1
5 may 200
5 13:02:08 -0
500</pubdate> <link>http://joe-blow.example.net/log/21</link> </item> <item> <title>i am so smrt</title> <guid>http://joe-blow.example.net/log/20</guid> <pubdate>sat, 14 may 200
5 22:19:18 -0
500</pubdate> <link>http://joe-blow.example.net/log/20</link> ...
...And 5 more matches
Using IO Timeout And Interrupt On NT - Archive of obsolete content
this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.
51 and 4.0.
...unfortunately, <tt>cancelio()</tt> is not available on nt 3.
51.
... so we can't go this route as long as we are supporting nt 3.
51.
...And 5 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
internet explorer
5.
5+ can not display the document.
...this example is supported by netscape 7.x, mozilla, opera 7 and internet explorer
5.
5+ which all apply the css rules as expected.
...this example is supported by netscape 7.x, mozilla, and opera 7 but not internet explorer
5.
5+ (see talk:properly_using_css_and_javascript_in_xhtml_documents of this ascertation.
...And 5 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
it has been replaced by a new html
5 parser in firefox 4 and newer.
...see bug 1312 and bug
55264 for some of the history of the mode determination.
... see bug 1
53032 for the creation of the almost-standards mode around mozilla 1.0.
...And 5 more matches
Accessible multimedia - Learn web development
the problem with native html
5 controls html
5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box.
... for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html
5 audio.
... here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html
5 video.
...And 5 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius:
5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,18
5,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating g...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius:
5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,18
5,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius:
5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,18
5,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to mak...
...And 5 more matches
create fancy boxes - Learn web development
you could also use a background, as backgrounds are clipped by border radius */ border : 0.
5em solid black; /* let's make sure we have a square.
... as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(17
5deg, rgba(0,0,0,0) 9
5%, #8da389 9
5%), linear-gradient( 8
5deg, rgba(0,0,0,0) 9
5%, #8da389 9
5%), linear-gradient(17
5deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 8
5deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(17
5deg, rgba(0,0,0,0) 8
5%, #c
5a68e 8
5%), linear-gradient( 8
5deg, rgba(0,0,0...
...,0) 89%, #c
5a68e 89%), linear-gradient(17
5deg, rgba(0,0,0,0) 80%, #ba9499 80%), linear-gradient( 8
5deg, rgba(0,0,0,0) 86%, #ba9499 86%), linear-gradient(17
5deg, rgba(0,0,0,0) 7
5%, #9f8fa4 7
5%), linear-gradient( 8
5deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-gradient(17
5deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-gradient( 8
5deg, rgba(0,0,0,0) 80%, #74a6ae 80%); } gradients can be used in some very creative ways.
...And 5 more matches
Styling lists - Learn web development
t, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.
5em.) the list items (<li> elements) have no set defaults for spacing.
... the <dd> elements have margin-left of 40px (2.
5em.) the <p> elements we've included for reference have a top and bottom margin of 16px (1em), the same as the different list types.
...aragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul,ol,dl,p { font-size: 1.
5rem; } li, p { line-height: 1.
5; } /* description list styles */ dd, dt { line-height: 1.
5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font size of 10px.
...And 5 more matches
Styling web forms - Learn web development
form controls were added to html in the html 2 specification in 199
5; css wasn't released until late 1996, and wasn't supported very well by browsers for a few years after that.
...to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 1
50px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>.
... what may not be apparent via the screenshot is that the radio and checkbox controls still look the same, but they are centered in the 1
50px of horizontal space provided by the width property.
...And 5 more matches
UI pseudo-classes - Learn web development
selected: input[type="radio"]::before { display: block; content: " "; width: 10px; height: 10px; border-radius: 6px; background-color: red; font-size: 1.2em; transform: translate(3px, 3px) scale(0); transform-origin: center; transition: all 0.3s ease-in; } input[type="radio"]:checked::before { transform: translate(3px, 3px) scale(1); transition: all 0.3s cubic-bezier(0.2
5, 0.2
5, 0.
56, 2); } this is really useful — screenreaders already let their users know when a radio button or checkbox they encounter is checked/selected, so you don't want them to read out another dom element that indicates selection — that could be confusing.
...we create it using this css: input + span { position: relative; } input:required + span::after { font-size: 0.7rem; position: absolute; content: "required"; color: white; background-color: black; padding:
5px 10px; top: -26px; left: -70px; } we set the <span> to position: relative simply so that we can set the generated content to position: absolute and position it relative to the <span> rather than the <body> (the generated content acts as though it is a child node of the element it is generated on, for the purposes of positioning).
...ve got extra <span>s to generate content on, which we'll use to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top:
5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } as before, we set the <span>s to position: relative so that we can position the generated content relative to them.
...And 5 more matches
Front-end web developer - Learn web development
the learning pathway getting started time to complete: 1.
5–2 hours prerequisites nothing except basic computer literacy.
... guides installing basic software — basic tool setup (1
5 min read) background on the web and web standards (4
5 min read) learning and getting help (4
5 min read) semantics and structure with html time to complete: 3
5–
50 hours prerequisites nothing except basic computer literacy, and a basic web development environment.
... modules introduction to html (1
5–20 hour read/exercises) multimedia and embedding (1
5–20 hour read/exercises) html tables (
5–10 hour read/exercises) styling and layout with css time to complete: 90–120 hours prerequisites it is recommended that you have basic html knowledge before starting to learn css.
...And 5 more matches
From object to iframe — other embedding technologies - Learn web development
playable code <h2>live output</h2> <div class="output" style="min-height: 2
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 9
5%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: ...
...sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f
5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value...
... = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="31
5" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3799
5.6
574833339
5!2d-2.273
568166412784!3d
53.47331047191697
5!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c0
5743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!
5e0!3m2!1sen!2suk!4v1
51817178
5211" width="600" height="4
50" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop ...
...And 5 more matches
Introduction to events - Learn web development
in the following example, we have a single <button>, which when pressed, makes the background change to a random color: <button>change color</button> button { margin: 10px }; the javascript looks like so: const btn = document.queryselector('button'); function random(number) { return math.floor(math.random() * (number+1)); } btn.onclick = function() { const rndcol = 'rgb(' + random(2
55) + ',' + random(2
55) + ',' + random(2
55) + ')'; document.body.style.backgroundcolor = rndcol; } in this code, we store a reference to the button inside a constant called btn, using the document.queryselector() function.
...returning to the above example: const btn = document.queryselector('button'); btn.onclick = function() { const rndcol = 'rgb(' + random(2
55) + ',' + random(2
55) + ',' + random(2
55) + ')'; document.body.style.backgroundcolor = rndcol; } the onclick property is the event handler property being used in this situation.
...the following works just the same: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(2
55) + ',' + random(2
55) + ',' + random(2
55) + ')'; document.body.style.backgroundcolor = rndcol; } btn.onclick = bgchange; there are many different event handler properties available.
...And 5 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next html
5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
... html
5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages.
... as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html
5 video.
...And 5 more matches
Inheritance in JavaScript - Learn web development
so, for example, if you had something really simple like this: function brick() { this.width = 10; this.height = 20; } you could inherit the width and height properties by doing this (as well as the other steps described below, of course): function blueglassbrick() { brick.call(this); this.opacity = 0.
5; this.color = 'blue'; } note that we've only specified this inside call() — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.
...the query on line
5 would have accessed a member inherited from person(), except for the fact that teacher() has its own member with the same name, so the query accesses that member.
... ecmascript 201
5 classes ecmascript 201
5 introduces class syntax to javascript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in c++ or java.
...And 5 more matches
Styling Vue components with CSS - Learn web development
add the following contents to the reset.css file: /*reset.css*/ /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.
5% / 1.1
5 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { bo...
...rder: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.1
5; 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.2
5 "helvetica neue", helvetica, arial, sans-serif; background-color: #f
5f
5f
5; 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.31
579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
...reen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.2
5rem; } .stack-large > * + * { margin-top: 2.
5rem; } @media screen and (min-width:
550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.
5rem
5rem 0 rgba...
...And 5 more matches
Handling common accessibility problems - Learn web development
<br><br> <font size="
5">my subheading</font> <br><br> this is the first subsection of my document.
...<br><br> <font size="
5">my 2nd subheading</font> <br><br> this is the second subsection of my content.
...you might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible cms that generates buttons made with <div>s), or you are using a complex control that does not have keyboard accessibility built in, like the html
5 <video> element (amazingly, opera is the only browser that allows you to tab through the <video> element's default browser controls).
...And 5 more matches
Handling common HTML and CSS problems - Learn web development
in general, most core html and css functionality (such as basic html elements, css basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html
5 video/audio, or even more nascent, css grids or -webkit-background-clip: text.
... for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html
5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download the video if even the html
5 video player doesn't work, so at least the user can still access the video.
... html
5 form elements also exhibit fallback qualities — html
5 introduced some special <input> types for inputting specific information into forms, such as times, dates, colors, numbers, etc.
...And 5 more matches
Gecko info for Windows accessibility vendors
the following html tags are exposed as bstr's: abbr, acronym, blockquote, dd, dl, dt, form, frame, h1, h2, h3, h4, h
5, h6, iframe, q, tbody, tfoot, thead in addition, an html list uses the bullet bstr role to expose bullets and numbers that are automatically inserted into the formatting by gecko.
...for example, "3 of
5" indicates the 3rd object out of
5.
... role_buttonmenu not supported, state_haspopup used with role_button instead role_buttondropdowngrid supported for xul <colorpicker> role_pagetablist xul: <tab> dhtml: role="wairole:tabs" "abbr", "acronym", "blockquote", "dd", "dl", "dt", "form", "frame", "h1", "h2", "h3", "h4", "h
5", "h6", "iframe", "q", "tbody", "tfoot", "thead" html tag mirrors the role string "bullet" indirectly created for bullets when <ol> or <ul> used to create an html list "abbr", "acronym", "blockquote", "form", "frame", "h1", "h2", "h3", "h4", "h
5", "h6", "iframe", "q", "tbody", "tfoot", "thead" created from the identical html markup...
...And 5 more matches
Mozilla DOM Hacking Guide
the relevant code is at nsdomclassinfo.cpp, around line 4
520.
...mcachedclassinfo, mprotochaininterface and minterfaces, however, are initialized in nsdomclassinfo::init(), described in section 1.
5.
...see section 1.
5 for more information about the init() method.
...And 5 more matches
Build instructions for JSS 4.3.x
jss supports java version 1.
5 or later.
... you must have perl version
5.00
5 or later.
... unix setenv java_home /usr/local/jdk1.
5.0 (or wherever your jdk is installed) windows set java_home=c:\programs\jdk1.
5.0 (or wherever your jdk is installed) windows (cygnus) java_home=/cygdrive/c/programs/jdk1.
5.0 (or wherever your jdk is installed) export java_home windows build configurations winnt vs win9
5 as of nss 3.1
5.4, nspr/nss/jss build generates a "win9
5" configuration by default on windows.
...And 5 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 release notes 2008-09-0
5 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12.1 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.1 is a patch release for nss 3.12.
... new in nss 3.12.1 new functions in the nss shared library: cert_nametoasciiinvertible (see cert.h) convert an certname into its rfc148
5 encoded equivalent.
... bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but result in an error if host is not recognized bug 3
59302: remove the sslsample code from nss source tree bug 372241: need more versatile form of cert_nametoascii bug 390296: nss ignores subject cn even when san contains no dnsname bug 401928: support generalized pkcs#
5 v2 pbes bug 403
543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support specified responder (and given signercert) bu...
...And 5 more matches
NSS 3.12.6 release notes
new in nss 3.12.6 ssl3 & tls renegotiation indication extension (rfc
5746) by default, nss 3.12.6 uses the new tls renegotiation indication extension for tls renegotiation but allows simple ssl/tls connections (without renegotiation) with peers that don't support the tls renegotiation indication extension.
... the behavior of nss for renegotiation can be changed through api function calls, or with the following environment variables: nss_ssl_enable_renegotiation values: [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.
5 release.
...this setting was the default prior 3.12.
5 and makes products vulnerable.
...And 5 more matches
NSS 3.34 release notes
nss 3.34 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_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r
5 root sha-2
56 fingerprint: bf:ff:8f:d0:44:33:48:7d:6a:8a:a6:0c:1a:29:76:7a:9f:c2:bb:b0:
5e:42:0f:71:3a:13:b9:92:89:1d:38:93 trust flags: websites cn = ssl.com root certification authority rsa sha-2
56 fingerprint: 8
5:66:6a:
56:2e:e0:be:
5c:e9:2
5:c1:d8:89:0a:6f:76:a8:7e:c1:6d:4d:7d:
5f:29:ea:74:19:cf:20:12:3b:69 trust flags: websites, email cn = ssl.
...com root certification authority ecc sha-2
56 fingerprint: 34:17:bb:06:cc:60:07:da:1b:96:1c:92:0b:8a:b4:ce:3f:ad:82:0e:4a:a3:0b:9a:cb:c4:a7:4e:bd:ce:bc:6
5 trust flags: websites, email cn = ssl.com ev root certification authority rsa r2 sha-2
56 fingerprint: 2e:7b:f1:6c:c2:24:8
5:a7:bb:e2:aa:86:96:7
5:07:61:b0:ae:39:be:3b:2f:e9:d0:cc:6d:4e:f7:34:91:42:
5c trust flags: websites cn = ssl.com ev root certification authority ecc sha-2
56 fingerprint: 22:a2:c1:f7:bd:ed:70:4c:c1:e7:01:b
5:f4:08:c3:10:88:0f:e9:
56:b
5:de:2a:4a:44:f9:9c:87:3a:2
5:a7:c8 trust flags: websites cn = trustcor rootcert ca-1 sha-2
56 fingerprint: d4:0e:9c:86:cd:8f:e4:68:c1:77:69:
59:f4:9e:a7:74:fa:
54:86:84:b6:c4:06:f3:90:92:61:f4:dc:e2:
57:
5c ...
... trust flags: websites, email cn = trustcor rootcert ca-2 sha-2
56 fingerprint: 07:
53:e9:40:37:8c:1b:d
5:e3:83:6e:39:
5d:ae:a
5:cb:83:9e:
50:46:f1:bd:0e:ae:19:
51:cf:10:fe:c7:c9:6
5 trust flags: websites, email cn = trustcor eca-1 sha-2
56 fingerprint:
5a:88:
5d:b1:9c:01:d9:12:c
5:7
5:93:88:93:8c:af:bb:df:03:1a:b2:d4:8e:91:ee:1
5:
58:9b:42:97:1d:03:9c trust flags: websites, email the following ca certificates were removed: cn = certum ca, o=unizeto sp.
...And 5 more matches
NSS 3.47 release notes
see bug 1
573118 for details.
... see bug 1
57
5411 for details.
... notable changes in nss 3.47 bug 11
5262
5 - support aes hw acceleration on armv8 bug 1267894 - allow per-socket run-time ordering of the cipher suites presented in clienthello bug 1
570
501 - add cmac to freebl and pkcs #11 libraries bugs fixed in nss 3.47 bug 14
59141 - make softoken cbc padding removal constant time bug 1
589120 - more cbc padding tests bug 146
5613 - add ability to distrust certificates issued after a certain date for a specified root cert bug 1
588
557 - bad debug statement in tls13con.c bug 1
579060 - mozilla::pkix tag definitions for issueruniqueid and subjectuniqueid shouldn't have the constructed bit set bug 1
583068 - nss 3.47 should pick up fix from bug 1
57
5821 (nspr 4.23) bug 11
5262
5 - support aes hw acceleration on armv8 bug 1
54922
5 - disable dsa signat...
...And 5 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
header "-----begin certificate-----" #define ns_cert_trailer "-----end certificate-----" /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey =
5, lab = 6, certenc= 7, certvfy= 8, sig = 9 } headertype; /* * print usage message and exit */ static void usage(const char *progname) { fprintf(stderr, "\nusage: %s %s %s %s %s %s %s %s %s %s\n\n", progname, " -<g|a|h|e|ds|v> -d <dbdirpath> ", "[-p <dbpwd> | -f <dbpwdfile>] [-z <noisefilename>] [-a <\"\">]", ...
... = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md
5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; } rv = sgn_begin(sgn); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { rv = sgn_...
...file = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sigitem, sec_oid_pkcs1_md
5_with_rsa_encryption, pwdata); if (!vfy) { pr_fprintf(pr_stderr, "unable to create context for verifying signature\n"); rv = secfailure; goto cleanup; } rv = vfy_begin(vfy); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ib...
...And 5 more matches
NSS environment variables
3.12.
5 nss_hash_alg_support string specifies agorithms allowed to be used in certain applications, such as in signatures on certificates and crls.
... this setting was the default prior 3.12.
5 and makes products vulnerable.
... [0|n|n]: ssl_renegotiate_never never allow renegotiation - that was the default for 3.12.
5 release.
...And 5 more matches
NSS Tools modutil
availability this tool is known to build on solaris 2.
5.1 (sunos
5.
5.1) and windows nt 4.0.
...the following mechanisms are currently available: rsa, dsa, rc2, rc4, rc
5, des, dh, fortezza, sha1, md
5, md2, random (for random number generation), and friendly (meaning certificates are publicly readable).
...if so, the metainfo file for the netscape signing tool would include a line such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:6.2:mips sunos:
5.
5.1:sparc }platforms { winnt::x86 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { executable relativepath { %temp%/setup.exe } } win32/setup.hlp { relativepath { %temp%/setup.hlp } } win32/setup.ca...
...And 5 more matches
XPCOM tasks
5.1 3rd party code that doesn't use any services from our tree should be below xpcom; particularly, code xpcom could exploit, e.g., expat berkeley db changes to apis, functionality, and implementations the following items are listed (very) roughly in their order of importance, i.e., fixing observers is the first thing i want to do.
...see bug
579
5, bug 127
55, and bug 127
55.
...see bug 2
5886.
...And 5 more matches
Plug-in Basics - Plugins
i found other way how check which paths support firefox : $ strace -y /usr/bin/firefox 2>&1 | grep acces | grep -v search | grep plugins access("/home/user_name/.mozilla/firefox/dqh2nb
5k.default-1441864
569209/plugins", f_ok) = -1 enoent (no such file or directory) access("/home/user_name/.mozilla/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib64/firefox/browser/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib/mozilla/plugins", f_ok) = 0 this output i have after close firefox.
... example 1: nesting object elements <html> <head> <title>example 1: nesting object elements</title> <style type="text/css"> .myplugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444
553
540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object data="foo_movie.swf" type="application/x-shockwave-flash" class="...
... for example, this embed element loads a picture with the imaginary data type dgs: <embed src="mypic.dgs" width="320" height="200" border="2
5" align="right"> gecko interprets the attributes as follows: src: load the data file and determine the mime type of the data.
...And 5 more matches
AudioNode.channelInterpretation - Web APIs
output.l = input.m output.r = input.m output.sl = 0 output.sr = 0 1 (mono) 6 (
5.1) up-mix from mono to
5.1.
... output.m = 0.
5 * (input.l + input.r) 2 (stereo) 4 (quad) up-mix from stereo to quad.
... output.l = input.l output.r = input.r output.sl = 0 output.sr = 0 2 (stereo) 6 (
5.1) up-mix from stereo to
5.1.
...And 5 more matches
Background Tasks API - Web APIs
currently, timeremaining() has an upper limit of
50 milliseconds, but in reality you will often have less time than that, since the event loop may already be eating into that time on complex sites, with browser extensions needing processor time, and so forth.
... 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 callback is passed an object which conforms to idledeadline, with didtimeout set to false and a timeremaining() method which is implemented to give the callback
50 milliseconds of time to begin with.
...And 5 more matches
BudgetService - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standardchrome full support
55edge full support ≤79firefox ?
... webview android full support
55chrome android full support
55firefox android ?
... samsung internet android full support 6.0getbudget experimentaldeprecatednon-standardchrome full support
55edge full support ≤79firefox ?
...And 5 more matches
Advanced animations - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100, radius: 2
5, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; ball.draw(); nothing special here, the ball is actually a simple circle and gets drawn with the help of the arc() method.
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx:
5, vy: 2, radius: 2
5, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } ca...
... <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx:
5, vy: 2, radius: 2
5, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > canvas.height || ...
...And 5 more matches
Transformations - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 1
50, 1
50); // draw a rectangle with default settings ctx.save(); // save the default state ctx.fillstyle = '#09f'; // make changes to the settings ctx.fillrect(1
5, 1
5, 120, 120); // draw a rectangle with new settings ctx.save(); // save the current state ctx.fillstyle = '#fff'; // make changes to the settings ctx.globalalpha = 0.
5; ctx.fi...
...llrect(30, 30, 90, 90); // draw a rectangle with new settings ctx.restore(); // restore previous state ctx.fillrect(4
5, 4
5, 60, 60); // draw a rectangle with restored settings ctx.restore(); // restore original state ctx.fillrect(60, 60, 30, 30); // draw a rectangle with restored settings } <canvas id="canvas" width="1
50" height="1
50"></canvas> draw(); the first step is to draw a large rectangle with the default settings.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (
51 * i) + ', ' + (2
55 -
51 * i) + ', 2
55)'; ctx.translate(10 + j *
50, 10 + i *
50); ctx.fillrect(0, 0, 2
5, 2
5); ctx.restore(); } } } <canvas id="canvas" width="1
50" height="1
50"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate().
...And 5 more matches
Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih
5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server.
... <html> <body onload="draw();"> <canvas id="canvas" width="180" height="1
50"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 1
5); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/
539
5/backdro...
...the image is scaled to one third of its original size, which is
50x38 pixels.
...And 5 more matches
FileSystemDirectoryEntry - Web APIs
e name full support 8alternate name alternate name uses the non-standard name: directoryentryedge full support 79prefixed full support 79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support
50ie no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ...
... ≤37alternate name alternate name uses the non-standard name: directoryentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: directoryentryfirefox android full support
50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreatereader experimentalchrome ...
... full support 13edge full support 79firefox full support
50ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support
50opera android no support nosafari ios full support 11.3samsung internet android ful...
...And 5 more matches
HTMLImageElement.sizes - Web APIs
note: the source size value must not be specified as a percentage of the container size; that is, lengths such as
50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of.
... buttons at the bottom of the example let you actually modify the sizes property slightly, switching the largest of the three widths for the image between 40em and
50em.
...award-winning 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 5 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 5 more matches
Timing element visibility with the Intersection Observer API - Web APIs
the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; padding:
5px 10px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen.
... .ad { height: 96px; padding: 6px; border-color: #
555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(2
55, 2
55, 2
55, 0.
5); } there's nothing magic in here.
... setting up to set things up, we run the startup() function below when the page loads: window.addeventlistener("load", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.7
5] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refreshintervalid = window.setinterval(handlerefreshinterval, 1000); } first, a reference to the content wrapping <main> element is obtained, so we can insert our content into it.
...And 5 more matches
Slottable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslottable experimentalchrome full support
53edge full support 79firefox full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 40safari full support 10.1webview android full support
53chrome android full support
53firefox android full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...And 5 more matches
WebGLRenderingContext.texImage2D() - Web APIs
possible values in both webgl1 and webgl2 format type channels bytes per pixel rgba unsigned_byte 4 4 rgb unsigned_byte 3 3 rgba unsigned_short_4_4_4_4 4 2 rgba unsigned_short_
5_
5_
5_1 4 2 rgb unsigned_short_
5_6_
5 3 2 luminance_alpha unsigned_byte 2 2 luminance unsigned_byte 1 1 alpha unsigned_byte 1 1 other possible values in webgl2 for the versions of teximage2d that take an arraybufferview or a glintptr offset sized format base for...
...nderable texture filterable r8 red 8 ● ● r8_snorm red s8 ● rg8 rg 8 8 ● ● rg8_snorm rg s8 s8 ● rgb8 rgb 8 8 8 ● ● rgb8_snorm rgb s8 s8 s8 ● rgb
56
5 rgb
5 6
5 ● ● rgba4 rgba 4 4 4 4 ● ● rgb
5_a1 rgba
5 5 5 1 ● ● rgba8 rgba 8 8 8 8 ● ● rgba8_snorm rgba s8 s8 s8 s8 ● rgb10_a2 rgba 10 10 10 2 ● ● rgb10_a2ui rgba ui...
... ● rgba16f rgba f16 f16 f16 f16 ● r32f red f32 rg32f rg f32 f32 rgb32f rgb f32 f32 f32 rgba32f rgba f32 f32 f32 f32 r11f_g11f_b10f rgb f11 f11 f10 ● rgb9_e
5 rgb 9 9 9
5 ● r8i red i8 ● r8ui red ui8 ● r16i red i16 ● r16ui red ui16 ● r32i red i32 ● r32ui red ui32 ● rg8i rg i8...
...And 5 more matches
Matrix math for the web - Web APIs
and a point in our example code we have defined a function to multiply a matrix and a point — multiplymatrixandpoint(): // point • matrix function multiplymatrixandpoint(matrix, point) { // give a simple variable name to each part of the matrix, a column and row number let c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3]; let c0r1 = matrix[ 4], c1r1 = matrix[
5], c2r1 = matrix[ 6], c3r1 = matrix[ 7]; let c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11]; let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[1
5]; // now set some simple names for the point let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; // multiply the point against each part of the 1st column, then ad...
...the function from above can be re-used to help out in this process: //matrixb • matrixa function multiplymatrices(matrixa, matrixb) { // slice the second matrix up into rows let row0 = [matrixb[ 0], matrixb[ 1], matrixb[ 2], matrixb[ 3]]; let row1 = [matrixb[ 4], matrixb[
5], matrixb[ 6], matrixb[ 7]]; let row2 = [matrixb[ 8], matrixb[ 9], matrixb[10], matrixb[11]]; let row3 = [matrixb[12], matrixb[13], matrixb[14], matrixb[1
5]]; // multiply each row by matrixa let result0 = multiplymatrixandpoint(matrixa, row0); let result1 = multiplymatrixandpoint(matrixa, row1); let result2 = multiplymatrixandpoint(matrixa, row2); let result3 = multiplymatrixandpoi...
...nt(matrixa, row3); // turn the result rows back into a single matrix return [ result0[0], result0[1], result0[2], result0[3], result1[0], result1[1], result1[2], result1[3], result2[0], result2[1], result2[2], result2[3], result3[0], result3[1], result3[2], result3[3] ]; } let's look at this function in action: let somematrix = [ 4, 0, 0, 0, 0, 3, 0, 0, 0, 0,
5, 0, 4, 8, 4, 1 ] let identitymatrix = [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; // returns a new array equivalent to somematrix let somematrixresult = multiplymatrices(identitymatrix, somematrix); important: these matrix functions are written for clarity of explanation, not for speed or memory management.
...And 5 more matches
Using the Web Animations API - Web APIs
here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-
50%, -
50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-
50%, -
50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-
50%, -
50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-
50%, -
50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...this means that a keyframe object with three keys will play the middle key
50% of the way through each loop of the animation unless told otherwise.
...And 5 more matches
Using CSS animations - CSS: Cascading Style Sheets
that’s as simple as adding this keyframe: 7
5% { font-size: 300%; margin-left: 2
5%; width: 1
50%; } the full code now looks like this: p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } 7
5% { font-size: 300%; margin-left: 2
5%; width: 1
50%; } to { margin-left: 0%; width: 100%; } } <p>the caterpillar and alice looked at ea...
...ch other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> this tells the browser that 7
5% of the way through the animation sequence, the header should have its left margin at 2
5% and the width should be 1
50%.
...in this case each animation is run with the corresponding values in the same position on each property, so for example fadeinout has a duration of 2.
5s and an iteration count of 2, etc.
...And 5 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for comparison, it is typical in a typographic system for a magazine to use 10–1
5 or more different weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone).
...for example: font-variation-settings: 'wght' 37
5, 'grad' 88; wght (weight) is a registered axis, and grad (grade) is a custom one.
...this can generally be resolved fairly easily, but does require an extra step in writing your css: font-weight: 37
5; font-variation-settings: 'wght' 37
5; the following live example's css can be edited to allow you to play with font weight values.
...And 5 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
this early implementation is also the version of grid layout implemented in edge up to version 1
5.
... the ie/edge (≤1
5) version of the specification is prefixed with an -ms prefix and the properties implemented in ie/edge (≤1
5) are as follows: grid-template-columns as -ms-grid-columns grid-template-rows as -ms-grid-rows grid-row-start as -ms-grid-row grid-column-start as -ms-grid-column align-self as -ms-grid-row-align justify-self as -ms-grid-column-align the ie version has additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span.
...some simple grid layouts could be implemented for ie10, through to edge 1
5, using the -ms properties.
...And 5 more matches
The stacking context - CSS: Cascading Style Sheets
the hierarchy of stacking contexts is organized as follows: root div #1 div #2 div #3 div #4 div #
5 div #6 it is important to note that div #4, div #
5 and div #6 are children of div #3, so stacking of those elements is completely resolved within div#3.
... notes: div #4 is rendered under div #1 because div #1's z-index (
5) is valid within the stacking context of the root element, while div #4's z-index (6) is valid within the stacking context of div #3.
... for the same reason div #2 (z-index 2) is rendered under div#
5 (z-index 1) because div #
5 belongs to div #3, which has an higher z-index value.
...And 5 more matches
conic-gradient() - CSS: Cascading Style Sheets
syntax /* a conic gradient rotated 4
5 degrees, starting blue and finishing red */ conic-gradient(from 4
5deg, blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%,
50%), hsl(3...
...1
5, 100%,
50%), hsl(270, 100%,
50%), hsl(22
5, 100%,
50%), hsl(180, 100%,
50%), hsl(13
5, 100%,
50%), hsl(90, 100%,
50%), hsl(4
5, 100%,
50%), hsl(0, 100%,
50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...the midpoint of the red to blue gradient change, however, is at the 20% mark rather than the
50% mark as would have happened without the 80grad, or 20%, color hint.
...And 5 more matches
cross-fade() - CSS: Cascading Style Sheets
cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */ cross-fade( url(white.png) 2
5%, url(black.png) 7
5%); /* 2
5% white, 7
5% black */ cross-fade( url(white.png)
50%, url(black.png)
50%); /*
50% white,
50% black */ cross-fade( url(white.png) 7
5%, url(black.png) 2
5%); /* 7
5% white, 2
5% black */ cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */ cross-fade( url(green.png) 7
5%, url(red.png) 7
5%); /* both green and red at 7
5% */ if any percentages are omitted, al...
...a 2
5% value renders the first image at 2
5% and the second at 7
5%.
... the 7
5% value is the inverse, showing the first image at 7
5% and the second at 2
5%.
...And 5 more matches
<length> - CSS: Cascading Style Sheets
in the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.
5em wide by 1em tall.
...on fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.
5em in many fonts.
...1cm = 96px/2.
54.
...And 5 more matches
transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -100%
50%; transform: rotate(4
5deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%,
50%) rotate(4
5deg) translate(100%, -
50%); by default, the origin of a transform is center.
... /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left
5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset; the transform-origin property may be specified using one, two, or three values, where each value represents a...
... the keywords are convenience shorthands and match the following <percentage> values: keyword value left 0% center
50% right 100% top 0% bottom 100% formal definition initial value
50%
50% 0applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | ...
...And 5 more matches
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.
5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 2
50px; height:12
5px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-d...
...elay:0.
5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.
5s; transition-timing-function: linear; } .box1{ width:
50px; height:
50px; background-color: blue; color: yellow; font-size: 18px; left: 1
50px; top:2
5px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.
5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.
5s; transition-timing-function: linear; } function up...
...datetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 2
50px; height:12
5px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background...
...And 5 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
for example: <input type="hidden" id="timezone" name="timezone" value="-08:00"> on the other hand, if you were required to allow the user to enter a timezone along with a date/time input, you could provide a means of inputting a timezone, such as a <select> element: <select name="timezone_offset" id="timezone-offset" class="span
5"> <option value="-12:00">(gmt -12:00) eniwetok, kwajalein</option> <option value="-11:00">(gmt -11:00) midway island, samoa</option> <option value="-10:00">(gmt -10:00) hawaii</option> <option value="-09:
50">(gmt -9:30) taiohae</option> <option value="-09:00">(gmt -9:00) alaska</option> <option value="-08:00">(gmt -8:00) pacific time (us & canada)</option> ...
... div { margin-bottom: 10px; display: flex; align-items: center; } label { display: inline-block; width: 300px; } input:invalid+span:after { content: '✖'; padding-left:
5px; } input:valid+span:after { content: '✓'; padding-left:
5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
... <!--midnight of january 1st, 10000: the exact time of y10k--> <input type="datetime-local" value=""+010000-01-01t0
5:00"/> it's that simple.
...And 5 more matches
<input type="time"> - HTML: Hypertext Markup Language
time in the value attribute when creating the <input> element, like so: <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time" value="13:30"> you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var timecontrol = document.queryselector('input[type="time"]'); timecontrol.value = '1
5:30'; time value format the value of the time input is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).
...it's also possible for the value to look roughly like a valid time but not be correct, such as 2
5:0
5.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid.
...And 5 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
in other words, it sends the origin: http header without a cookie, x.
509 certificate, or performing http basic authentication.
... <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html
5 video.
...see adding captions and subtitles to html
5 video for more information.
...And 5 more matches
Comparing Reflect and Object methods - JavaScript
the reflect object, introduced in es201
5, is a built-in object that provides methods to interface with javascript objects.
... some of the static functions that exist on reflect also correspond to methods available on object, which predates es201
5.
...throws a typeerror for non-objects in es
5, but coerces non-objects in es201
5.
...And 5 more matches
WebAssembly.Module - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0module() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the...
...And 5 more matches
d - SVG: Scalable Vector Graphics
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1
50,30 a 20,20 0,0,1 90,30 q 90,60
50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m
50,
50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current point (po; {xo, yo}) to the end point (pn; {xn, yn}), based on the parameters specified.
... formula: po′ = pn = {xo, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h
50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier curve cubic bézier curves are smooth curve definitions using four points: starting point (current point) (po = {xo, yo}) end point (pn = {xn, yn}) start control point (pcs = {xcs, ycs}) (controls...
...And 5 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m
50,10 a40,40,1,1,1,
50,90 a40,40,1,1,1,
50,10 m30,40 q36,3
5,42,40 m
58,40 q64,3
5,70,40 m30,60 q
50,7
5,70,60 q
50,7
5,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="2
5" y="0" viewbox="0 0 100 100" width="20" height="10"...
...><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid 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="1
5" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="2
5" y="1
5" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax slice" x="
50" y="1
5" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="7
5" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid...
... meet" x="90" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax meet" x="10
5" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <!-- (width<height) slice --> <svg preserveaspectratio="xminymid slice" x="120" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="13
5" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="1
50" y="0" viewbox="0 0 100 100" width="10" height="2
5"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0 100 100" width="160" height="60"><use href="#...
...And 5 more matches
Basic shapes - SVG: Scalable Vector Graphics
the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="2
50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="
5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="
5"/> <circle cx="2
5" cy="7
5" r="20" stroke="red" fill="transparent" stroke-width="
5"/> <ellipse cx="7
5" cy="7
5" rx="20" ry="
5" stroke=...
..."red" fill="transparent" stroke-width="
5"/> <line x1="10" x2="
50" y1="110" y2="1
50" stroke="orange" stroke-width="
5"/> <polyline points="60 110 6
5 120 70 11
5 7
5 130 80 12
5 8
5 140 90 13
5 9
5 1
50 100 14
5" stroke="orange" fill="transparent" stroke-width="
5"/> <polygon points="
50 160
55 180 70 180 60 190 6
5 20
5 50 19
5 3
5 20
5 40 190 30 180 4
5 180" stroke="green" fill="transparent" stroke-width="
5"/> <path d="m20,230 q40,20
5 50,230 t90,230" fill="none" stroke="blue" stroke-width="
5"/> </svg> note: the stroke, stroke-width, and fill attributes are explained later in the tutorial.
... <circle cx="2
5" cy="7
5" r="20"/> r the radius of the circle.
...And 5 more matches
SVG and CSS - SVG: Scalable Vector Graphics
00px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="9
5%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-2
50">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segme...
...class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(
54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g cla...
...ass="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(234)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(2
52)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(270)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"...
...And 5 more matches
widget - Archive of obsolete content
d-on's data directory, and reference it using the data.url() method of the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width:
50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text.
... data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:21
5, height:160, contenturl: data.url("clock.html") }); require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png"), panel: clockpanel }); note that this is, at the moment, the only way you can attach a panel to a widget.
...if you assign the panel to the widget after construction, the panel can still be shown but will not be anchored to the widget: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:21
5, height:160, contenturl: data.url("clock.html") }); widget = require("sdk/widget").widget({ id: "open-clock-btn", label: "clock", contenturl: data.url("history.png") }); widget.panel = clockpanel; // will not be anchored widget.panel.show(); also, if you try to call panel.show() inside your widget's click event listener, the panel will not be anchored: data = require("sdk/self").data var clockpanel = require("sdk/panel").panel({ width:21
5, height:160, contenturl: data.url("clock.html...
...And 4 more matches
Game monetization - Game development
finding publishers might be hard at first — try to look for them at the html
5 gamedevs forums.
...it depends on the quality of the game, it's genre, its publisher, and many others, but usually it will be something between 2000 and
5000 usd.
...the usual cost of a non-exclusive license is around
500 usd.
...And 4 more matches
Advanced styling effects - Learn web development
first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width:
500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2
5)); } .simple { box-shadow:
5px
5px
5px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset ...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width:
500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.2
5)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red,
5px
5px 1px black, 6px 6px 1px black; } now we get this result: we've done something fun here by...
... first, we'll go with some different html for this example: <button>press me!</button> button { width: 1
50px; font-size: 1.1rem; line-height: 2; border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); box-shadow: 1px 1px 1px black, inset 2px 3px
5px rgba(0,0,0,0.3), inset -2px -3px
5px rgba(2
55,2
55,2
55,0.
5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:acti...
...And 4 more matches
Practical positioning examples - Learn web development
next, add the following just below your previous css: .info-box { width: 4
50px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
... next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their list-style-type is set to none to get rid of the bullets, and their width is set to 1
50px so they will comfortably fit across the info-box.
... add the following css: .info-box li { float: left; list-style-type: none; width: 1
50px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states.
...And 4 more matches
HTML table advanced features and accessibility - Learn web development
we'd recommend using the <caption> element instead, however, as summary is deprecated by the html
5 spec, and can't be read by sighted users (it doesn't appear on the page.) active learning: adding a caption let's try this out, revisiting an example we first met in the previous article.
...inside this element, add the following lines of css code: tbody { font-size: 9
5%; font-style: italic; } tfoot { font-weight: bold; } save and refresh, and have a look at the result.
...e> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border: 4px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(23
5,23
5,23
5); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(2
50,2
50,2
50); } tr:nth-child(odd) td { background-color: rgb(24
5,24
5,24
5); } caption { padding: 10px; } tbody { font-size: 90%; font-style: italic; } tf...
...And 4 more matches
Beginning our React todo list - Learn web development
implementing our styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.
5% / 1.1
5 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { bo...
...rder: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.1
5; 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.2
5 arial, sans-serif; background-color: #f
5f
5f
5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31
579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed...
...> * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.2
5rem; } .stack-large > * + * { margin-top: 2.
5rem; } @media screen and (min-width:
550px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { margin-top: 2.8rem; } } .stack-exception { margin-top: 1.2rem; } /* end global styles */ .todoapp { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, ...
...And 4 more matches
CSUN Firefox Materials
firefox 1.
5, beyond the status quo "...firefox is a great little browser.
... it's a quick download, occupies very little disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.
5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...websites such as online magazines with sophisticated audiences are now reporting upwards of 2
5% firefox usage.
...And 4 more matches
Testopia
testopia 3.0 (not yet released) if you upgraded to bugzilla
5.0, you probably noticed that testopia 2.
5 is not compatible with this version.
... despite bugzilla
5.0 has already been released a few months ago, we don't plan to release a fix for testopia immediately, because it's currently under heavy work to make testopia a fully self-contained extension, which means that all tr_*.cgi scripts which are currently in the bugzilla/ root directory are being moved into extensions/testopia/lib/.
... the good news is that the current code in the git repository already works with bugzilla
5.0, and so if you upgraded to
5.0 already, and if you don't mind having a work-in-progress extension on your machine, you can decide to pull the code from the git repository.
...And 4 more matches
Command line options
each message option follows the syntax field=value, for example: to=foo@nowhere.net subject=cool page attachment=www.mozilla.org attachment='file:///c:/test.txt' body=check this page or also in thunderbird
52 and newer: body=c:\path\to\file.txt separate multiple message options by comma (,), for example: "to=foo@nowhere.net,subject=cool page" .
... firefox -new-instance -p "another profile" note: not available for windows, see bug 8
55899.
...instances created with this parameter do not accept or send remote commands, see bug 6
50078.
...And 4 more matches
Creating a Language Pack
x-testing: changed: 6 missinginfiles: 6124 missing:
5 0% of entries changed this step is not necessary anymore to create the language pack, because it is included in the next command.
...before gecko
59 you had to set the preference general.useragent.locale to your language code.
...ng on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b
5pre.en-us.mac.dmg the en-us binary has been downloaded.
...And 4 more matches
Creating localizable web applications
good: <p><strong class="legal"><?= _("design acceptance:");?></strong> <?= _("if a design is accepted, we will send the following message:");?></p> <p><strong class="legal"><?= _("design rejection:");?></strong> <?= _("if a design is rejected, we will send the following message:");?></p> snippet
5.
...good: <p><?= printf(_("if you are interested in supporting the approval process by becoming an approver, please email <a href=\"mailto:%s\">%s</a>."), 'personas@mozilla.com', 'personas@mozilla.com')?> </p> snippet
5.
...printf( /* l10n: %s is a date */ _("<strong>added:</strong> %s"), $persona['date']);?></p> snippet
5.
...And 4 more matches
MathML Demo: <mfrac> - fractions
inline, display style, no line 1.234
567 89 + x the end.
... inline binomial, auto, no line (
5 8 ) the end.
... inline, styles auto, display and text 1 2 - 1 2 + 1.234
56 7890 , the rendering should be script-size, normal-size and script-size in this example.
...And 4 more matches
Refcount tracing and balancing
note: due to an issue with the sandbox on windows (bug 134
5568), refcount logging currently requires the moz_disable_content_sandbox environment variable to be set.
... you may use an object's serial number with the following variable to further restrict the reference count tracing: xpcom_mem_log_objects set this variable to a comma-separated list of object serial number or ranges of serial number, e.g., 1,37-42,73,16
5 (serial numbers start from 1, not 0).
... 0x002
53ab0 (1) 0x002
53ae0 (2) 0x002
53bd0 (4) the number in parentheses indicates the order in which it was allocated, if you care.
...And 4 more matches
TimerFirings logging
-991946880[7f46c36
5ba00]: [677
5] fn timer (slack 100 ms): layeractivitytracker -991946880[7f46c36
5ba00]: [677
5] fn timer (one_shot 2
50 ms): presshell::spaintsuppressioncallback -991946880[7f46c36
5ba00]: [677
5] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c36
5ba00]: [677
5] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643
584[7f46c36
5ec00]: [677
5] obs timer ...
...(slack 1000 ms): 7f46a9
5a0200 each line has the following information.
... -991946880[7f46c36
5ba00]: [677
5] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637
568[7f3219c48000]: [683
5] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:
5:7231 711637
568[7f3219c48000]: [683
5] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript sou...
...And 4 more matches
Optimizing Applications For NSPR
the unix based platforms all implement the function though there may be up to a
5 second delay in processing the request.
... win-9
5 the win-9
5 version of nspr should really be labeled win-32.
... the same library will work on either win-nt or win-9
5.
...And 4 more matches
Certificate functions
function name/documentation source code nss versions cert_addcerttolisttail mxr 3.2 and later cert_addextension mxr 3.
5 and later cert_addocspacceptableresponses mxr 3.6 and later cert_addokdomainname mxr 3.4 and later cert_addrdn mxr 3.2.1 and later cert_asciitoname mxr 3.2 and later cert_cachecrl mxr 3.10 and later cert_clearocspcache mxr 3.11.7 and later cert_certchainfromcert mxr 3.2 and later cert...
... mxr 3.12 and later cert_checkcertusage mxr 3.3 and later cert_comparename mxr 3.2 and later cert_comparevaliditytimes mxr 3.11 and later cert_completecrldecodeentries mxr 3.6 and later cert_convertanddecodecertificate mxr 3.9.3 and later cert_copyname mxr 3.4 and later cert_copyrdn mxr 3.
5 and later cert_createava mxr 3.2.1 and later cert_createcertificate mxr 3.
5 and later cert_createcertificaterequest mxr 3.2 and later cert_createname mxr 3.2.1 and later cert_createocspcertid mxr 3.6 and later cert_createocsprequest mxr 3.6 and later cert_createrdn mxr 3.2.1 and later ...
... cert_createsubjectcertlist mxr 3.4 and later cert_createvalidity mxr 3.
5 and later cert_crlcacherefreshissuer mxr 3.7 and later cert_decodealtnameextension mxr 3.10 and later cert_decodeauthinfoaccessextension mxr 3.10 and later cert_decodeauthkeyid mxr 3.10 and later cert_decodeavavalue mxr 3.4 and later cert_decodebasicconstraintvalue mxr 3.2 and later cert_decodecertfrompackage mxr 3.4 and later cert_decodecertificatepoliciesextension mxr 3.2 and later cert_decodecertpackage mxr 3.2 and later cert_decodecrldistributionpoints mxr 3.10 and later cert_decodedercrl mxr 3.2 and later cert_decodedercr...
...And 4 more matches
JSS Provider Notes
rc4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs
5 padding desede des3 ecb nopadding cbc nopadding pkcs
5 padding aes ecb nopadding cbc nopadding ...
... pkcs
5 padding rc4 none none rc2 cbc nopadding pkcs
5padding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
... rsa the following transformations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x
509encodedkeyspec rsapublickey dsapublickey rsaprivatecrtkeyspec rsaprivatekey dsaprivatekeyspec dsaprivatekey pkcs8encodedkeyspec rsaprivatekey dsaprivatekey ...
...And 4 more matches
Mozilla-JSS JCA Provider notes
saprivatekey rsapublickey secretkeyfactory secretkey securerandom signature cipher supported algorithms notes aes des desede (des3) rc2 rc4 rsa the following modes and padding schemes are supported: algorithm mode padding des ecb nopadding cbc nopadding pkcs
5 padding desede des3 ecb nopadding cbc nopadding pkcs
5 padding aes ecb nopadding cbc nopadding pkcs
5 padding rc4 none none rc2 cbc nopadding ...
... pkcs
5padding the securerandom argument passed to initsign() and initverify() is ignored, because nss does not support specifying an external source of randomness.
... keyfactory supported algorithms notes dsa rsa the following transformations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x
509encodedkeyspec rsapublickey dsapublickey rsaprivatecrtkeyspec rsaprivatekey dsaprivatekeyspec dsaprivatekey pkcs8encodedkeyspec rsaprivatekey dsaprivatekey getkeyspec() is not supported.
...And 4 more matches
NSS 3.21 release notes
nss 3.21 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_21_rtm/src/ security fixes in nss 3.21 bug 11
58489 / cve-201
5-7
57
5 - prevent md
5 downgrade in tls 1.2 signatures.
...nelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo_all - used with sslpreliminarychannelinfo to indicate that all preliminary information has been set notable changes in nss 3.21 nss now builds with elliptic curve ciphers enabled by default (bug 120
5688) nss now builds with warnings as errors (bug 1182667) the following ca certificates were removed cn = verisign class 4 public primary certification authority - g3 sha1 fingerprint: c8:ec:8c:87:92:69:cb:4b:ab:39:e9:8d:7e:
57:67:f3:14:9
5:73:9d cn = utn-userfirst-network applications sha1 fingerprint:
5d:98:9c:db:1
5:96:11:36:
51:6
5:64:1b:
56:0f:db:ea:2a:c2:3e:...
...f1 cn = tc trustcenter universal ca iii sha1 fingerprint: 96:
56:cd:7b:
57:96:98:9
5:d0:e1:41:46:68:06:fb:b8:c6:11:06:87 cn = a-trust-nqual-03 sha-1 fingerprint: d3:c0:63:f2:19:ed:07:3e:34:ad:
5d:7
5:0b:32:76:29:ff:d
5:9a:f2 cn = usertrust legacy secure server ca sha-1 fingerprint: 7c:2f:91:e2:bb:96:68:a9:c6:f6:bd:10:19:2c:6b:
52:
5a:1b:ba:48 friendly name: digital signature trust co.
...And 4 more matches
NSS 3.28 release notes
this includes a number of improvements to tls 1.3: the signed certificate timestamp, used in certificate transparency, is supported in tls 1.3 (bug 12
5274
5).
... nss includes support for the x2
5519 key exchange algorithm (bug 9
5710
5), which is supported and enabled by default in all versions of tls.
... notable changes in nss 3.28 nss can no longer be compiled with support for additional elliptic curves (the nss_ecc_more_than_suite_b option, bug 12
53912).
...And 4 more matches
Enc Dec MAC Output Public Key as CSR
nss sample code
5: encryption/decryption and mac and output public as a csr.
...n pub key -----" #define pubkey_trailer "-----end pub key -----" #define ns_certreq_header "-----begin new certificate request-----" #define ns_certreq_trailer "-----end new certificate request-----" typedef enum { gen_csr, encrypt, decrypt, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey =
5, lab = 6 } headertype; /* this is conditionalized because port_errortostring was introduced with nss 3.13.
...he random numbers : %s\n", port_errortostring(rv)); goto cleanup; } pk11_randomupdate(randbuf, blocksize); switch (keytype) { case rsakey: rsaparams.keysizeinbits = size; rsaparams.pe = publicexponent; mechanism = ckm_rsa_pkcs_key_pair_gen; algtag = sec_oid_pkcs1_md
5_with_rsa_encryption; params = &rsaparams; break; default: goto cleanup; } fprintf(stderr, "\n\n"); fprintf(stderr, "generating key.
...And 4 more matches
nss tech note3
bolyard this week at least
5 different people came to me with variants of the same question: what certificate extensions do i have to put into my cert for nss to allow it to be used for purpose <x>??
... the oid for this extension is { 2
5 29 19 }, encoded in hex as 0x
55, 0x1d, 0x13.
...the oid for this extension is { 2 16 840 1 113730 1 1 } encoded in hex as 0x60, 0x86, 0x48, 0x01, 0x86, 0xf8, 0x42, 0x01, 0x01 in addition to netscape's own cert type extension, nss recognizes various x.
509 extensions.
...And 4 more matches
SpiderMonkey 38
— sep 17, 201
5 the download url is outdated and spidermonkey not release alone!
... js::clonefunctionobject (bug 1088228) interned_string_to_jsid (bug 104
5900) js::construct (bug 1017109) js::createerror (bug 984048) js::falsehandlevalue (bug 9
59787) js::handlesymbol (bug 64
5416) js::identifystandardconstructor (bug 976148) js::iscallable (bug 106
5811) js::isconstructor (bug 106
5811) js::mutablehandlesymbol (bug 64
5416) js::ordinarytoprimitive (bug 11031
52) js::propertyspecnameequalsid (bug 1082672) js::propertyspecnameissymbol (bug 10826...
...72) js::propertyspecnametopermanentid (bug 1082672) js::protokeytoid (bug 987669) js::rootedsymbol (bug 64
5416) js::truehandlevalue (bug 9
59787) jsconstintegerspec (bug 1066020) jsid_is_symbol (bug 64
5416) jsid_to_symbol (bug 64
5416) jsprop_define_late (bug 82
5199) jsprop_ignore_enumerate (bug 1037770) jsprop_ignore_permanent (bug 1037770) jsprop_ignore_readonly (bug 1037770) jsprop_ignore_value (bug 1037770) jsprop_propop_accessors (bug 1088002) jsprop_redefine_nonconfigurable (bug 1101123) js_addfinalizecallback (bug 99678
5) js_defineconstintegers (bug 1066020) js_getflatstringcharat (bug 1034627) js_getfunctionscript (bug 1069694) js_getlatin1flatstringchars (bug 1037869) js_getlatin1internedstringchars (bug 1037869) js_getlatin1stringcharsandlength (bug 1032726) js...
...And 4 more matches
nsIDBFolderInfo
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) implemented by: ?????????????????????????????????????.
...own missing exception missing description getcharacterset() void getcharacterset( out acstring charset, out boolean overriden ); parameters charset missing description overriden missing description exceptions thrown missing exception missing description getcharactersetoverride() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void getcharactersetoverride( out boolean charactersetoverride ); parameters charactersetoverride missing description exceptions thrown missing exception missing description getcharptrcharacterset() string getcharptrcharacterset(); parameters none.
... missing description exceptions thrown missing exception missing description getcharptrproperty() string getcharptrproperty( in string propertyname ); parameters propertyname missing description return value missing description exceptions thrown missing exception missing description native code only!getlocale obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0)this feature is obsolete.
...And 4 more matches
nsIHttpActivityObserver
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextrasizedata, in acstring aextrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false.
... activity subtype constants constant value description activity_subtype_request_header 0x
5001 the http request is about to be queued for sending.
... observers can look at request headers in aextrastringdata activity_subtype_request_body_sent 0x
5002 the http request's body has been sent.
...And 4 more matches
nsIPromptService
inherits from: nsisupports last changed in gecko 1.7.
5 you can define access keys (or keyboard shortcuts) for buttons by including an ampersand ("&") in front of the character that should be the access key for that button.
... button_pos_1 2
56 this is the button used to cancel the prompt.
... button_pos_2 6
5536 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt.
...And 4 more matches
WebIDL bindings
arg
5); }; will correspond to these c++ function declarations: void getmyattr(jscontext* cx, js::mutablehandle<jsobject*> retval); void setmyattr(jscontext* cx, js::handle<jsobject*> value); void mymethod(jscontext* cx, js::handle<jsobject*> arg1, js::handle<jsobject*> arg2, const sequence<jsobject*>& arg3, const optional<js::handle<jsobject*> >& arg4, const ...
...optional<js::handle<jsobject*> >& arg
5, js::mutablehandle<jsobject*> retval); interface types there are four kinds of interface types in the webidl bindings.
... for example, this webidl: dictionary dict { long foo =
5; domstring bar; }; interface test { void initsomething(optional dict arg = {}); }; will correspond to this c++ function declaration: void initsomething(const dict& arg); and the dict struct will look like this: struct dict { bool init(jscontext* acx, js::handle<js::value> aval, const char* asourcedescription = "value"); optional<nsstring> mbar; int32_t mfoo; } note that the di...
...And 4 more matches
Network request list - Firefox Developer Tools
(starting in firefox 80) on the right edge of the file column, a turtle icon appears if the server waiting time exceeds a threshhold (default:
500 ms).
...this is new in firefox
55.
...this is new in firefox
55.
...And 4 more matches
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; canvas.style.margin = "
5px"; canvas.width = width/2; canvas.height = height/2; return canvas; } function runcomposite() { var dl = document.createelement("dl"); document.body.appendchild(dl); while(gco.length) { var pop = gco.pop(); var dt = document.createelement("dt"); dt.textcontent = pop; dl.appendchild(dt); var dd = document.createelement("dd"); ...
... ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext(pop,
5, height/2 -
5); ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('exist...
...ing content',
5, height/2 -
5); ctx.restore(); var ctx = canvastodrawfrom.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14px arial"; ctx.filltext('new content',
5, height/2 -
5); ctx.restore(); dd.appendchild(canvastodrawon); dd.appendchild(canvastodrawfrom); dd.appendchild(canvastodrawresult); dl.appendchild(dd); } }; utility functions the program relies on a number of utility functions.
...And 4 more matches
DOMHighResTimeStamp - Web APIs
the time, given in milliseconds, should be accurate to
5 µs (microseconds), with the fractional part of the number indicating fractions of a millisecond.
... however, if the browser is unable to provide a time value accurate to
5 µs (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.
...in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20 µs in firefox
59; in 60 it will be 2ms.
...And 4 more matches
Document.cookie - Web APIs
note that each key and value may be surrounded by whitespace (space and tab characters): in fact, rfc 626
5 mandates a single space after each semicolon, but some user agents may not abide by this.
... ;max-age=max-age-in-seconds (e.g., 60*60*24*36
5 or 31
536000 for a year) ;expires=date-in-gmtstring-format if neither expires nor max-age specified it will expire at the end of session.
...before chrome
52, this flag could appear with cookies from http domains.
...And 4 more matches
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignele...
...And 4 more matches
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
HTMLInputElement.stepUp() - Web APIs
input type default step value example step declaration date 1 (day) 7 day (one week) increments: <input type="date" min="2019-12-2
5" step="7"> month 1 (month) 12 month (one year) increments: <input type="month" min="2019-12" step="12"> week 1 (week) two week increments: <input type="week" min="2019-w23" step="2"> time 60 (seconds) 900 second (1
5 minute) increments: <input type="time" min="09:00" step="900"> datetime-local 1 (day) same day of the week: ...
... <input type="datetime-local" min="019-12-2
5t19:30" step="7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type="range" min="0" step="2" max="10"> 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 on the form control.
... example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is divisible by
5: <input type="number" step="
5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="2
5"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = document.getelem...
...And 4 more matches
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
HTMLMarqueeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a></svg></div...
...> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
...the default value is 8
5.
...And 4 more matches
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
HTMLTimeElement.dateTime - Web APIs
the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid month string yyyy-mm 2011-11, 2013-0
5 valid date string yyyy-mm-dd 1887-12-01 valid yearless date string mm-dd 11-12 valid time string hh:mm hh:mm:ss hh:mm:ss.mmm 23:
59 12:1
5:47 12:1
5:
52.998 valid local date and time string yyyy-mm-dd hh:mm yyyy-mm-dd hh:mm:ss yyyy-mm-dd hh:mm:ss.mmm yyyy-mm-ddthh:mm yyyy-mm-ddthh:mm:ss yyyy-mm-ddthh:mm:ss.mmm 2013-12-2
5 11:12 1972-07-2
5 13:4...
...3:07 1941-03-1
5 07:06:23.678 2013-12-2
5t11:12 1972-07-2
5t13:43:07 1941-03-1
5t07:06:23.678 valid time-zone offset string z +hhmm +hh:mm -hhmm -hh:mm z +0200 +04:30 -0300 -08:00 valid global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-2
5 11:12+0200 1972-07-2
5 13:43:07+04:30 1941-03-1
5 07:06:23.678z 2013-12-2
5t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digits yyyy 2013, 0001 valid duration string pddthhmmss pddthhmms.xs pddthhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s ...
... p12dt7h12m13.3s p12dt7h12m13.4
5s p12dt7h12m13.4
55s pt7h12m13s pt7h12m13.2s pt7h12m13.
56s pt7h12m13.999s 7d
5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the html var t = document.getelementbyid("t"); t.datetime = "6w
5h 34m
5s"; specifications specification status comment html living standardthe definition of 'htmltimeelement' in that specification.
...And 4 more matches
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 4 more matches
Ajax navigation example - Web APIs
include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.6
5; } include/after_content.php: <p>this is the footer.
... break; case 3: // redirection 3xx console.log("redirection code " + vmsg); break; */ case 4: /* client error 4xx */ alert("client error #" + vmsg); break; case
5: /* server error
5xx */ alert("server error #" + vmsg); break; default: /* unknown status */ ajaxerror(); } } closereq(); } function filterurl (surl, sviewmode) { return surl.replace(rsearch, "") + ("?" + surl.
... url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritative information", 204: "no content", 20
5: "reset content", 206: "partial content", 207: "multi-status", 208: "already reported", 226: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 30
5: "use proxy", 306: "reserved", 307: "tempor...
...And 4 more matches
SubtleCrypto.digest() - Web APIs
supported values are: sha-1 (but don't use this in cryptographic applications) sha-2
56 sha-384 sha-
512.
... sha-2
56 this algorithm is specified in fips 180-4, section 6.2, and produces an output 2
56 bits long.
... sha-384 this algorithm is specified in fips 180-4, section 6.
5, and produces an output 384 bits long.
...And 4 more matches
SubtleCrypto.wrapKey() - Web APIs
*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-2
56" }, keymaterial, { "name": "aes-kw", "length": 2
56}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...*/ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 2
56, }, true, ["encrypt", "decrypt"] ) .then((secretkey) => { return wrapcryptokey(secretkey); }) .then((wrappedkey) => { console.log(wrappedkey); }); pkcs #8 wrap this example wraps an rsa private signing key.
...*/ function getkey(keymaterial, salt) { return window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-2
56" }, keymaterial, { "name": "aes-gcm", "length": 2
56}, true, [ "wrapkey", "unwrapkey" ] ); } /* wrap the given key.
...And 4 more matches
TextDecoder() - Web APIs
each label is associated with a specific encoding type: possible values of utflabel encoding "unicode-1-1-utf-8", "utf-8", "utf8" 'utf-8' "866", "cp866", "csibm866", "ibm866" 'ibm866' "csisolatin2", "iso-88
59-2", "iso-ir-101", "iso88
59-2", "iso88
592", "iso_88
59-2", "iso_88
59-2:1987", "l2", "latin2" 'iso-88
59-2' "csisolatin3", "iso-88
59-3", "iso-ir-109", "iso88
59-3", "iso88
593", "iso_88
59-3", "iso_88
59-3:1988", "l3", "latin3" 'iso-88
59-3' "csisolatin4", "iso-88
59-4", "iso-ir-110", "iso88
59-4", "iso88
594", "iso_88
59-4", "iso_88
59-4:1988", "l4", "latin4" 'iso-88
59-4' ...
... "csisolatincyrillic", "cyrillic", "iso-88
59-
5", "iso-ir-144", "iso88
59
5", "iso_88
59-
5", "iso_88
59-
5:1988" 'iso-88
59-
5' "arabic", "asmo-708", "csiso88
596e", "csiso88
596i", "csisolatinarabic", "ecma-114", "iso-88
59-6", "iso-88
59-6-e", "iso-88
59-6-i", "iso-ir-127", "iso88
59-6", "iso88
596", "iso_88
59-6", "iso_88
59-6:1987" 'iso-88
59-6' "csisolatingreek", "ecma-118", "elot_928", "greek", "greek8", "iso-88
59-7", "iso-ir-126", "iso88
59-7", "iso88
597", "iso_88
59-7", "iso_88
59-7:1987", "sun_eu_greek" 'iso-88
59-7' "csiso88
598e", "csisolatinhebrew", "hebrew", "iso-88
59-8", "iso-88
59-8-e", "iso-ir-138", "iso88
59-8", "iso88
598", "iso_88
59-8", "iso_88
59-8:1988", "visual" 'iso-88
59-8' "csiso88
598i", "iso-88
59-8-i", "logical" 'i...
...so-88
59-8i' "csisolatin6", "iso-88
59-10", "iso-ir-1
57", "iso88
59-10", "iso88
5910", "l6", "latin6" 'iso-88
59-10' "iso-88
59-13", "iso88
59-13", "iso88
5913" 'iso-88
59-13' "iso-88
59-14", "iso88
59-14", "iso88
5914" 'iso-88
59-14' "csisolatin9", "iso-88
59-1
5", "iso88
59-1
5", "iso88
591
5", "l9", "latin9" 'iso-88
59-1
5' "iso-88
59-16" 'iso-88
59-16' "cskoi8r", "koi", "koi8", "koi8-r", "koi8_r" 'koi8-r' "koi8-u" 'koi8-u' "csmacintosh", "mac", "macintosh", "x-mac-roman" 'macintosh' "dos-874", "iso-88
59-11", "iso88
59-11", "iso88
5911", "tis-620", "windows-874" 'windows-874' "cp12
50", "windows-12
50", "x-cp12
50" 'windows-12
50' "cp12
51", "windo...
...And 4 more matches
Writing a WebSocket server in Java - Web APIs
this server conforms to rfc 64
55, so it only handles connections from chrome version 16, firefox 11, ie 10 and higher.
... you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "2
58eafa
5-e914-47da-9
5ca-c
5ab0dc8
5b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response.
... if (get.find()) { matcher match = pattern.compile("sec-websocket-key: (.*)").matcher(data); match.find(); byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "2
58eafa
5-e914-47da-9
5ca-c
5ab0dc8
5b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.length); decoding messages after a successful handshake, client can send messages to the server, but now these are encoded.
...And 4 more matches
Web Authentication API - Web APIs
note most javascript programmers that are creating an application will only really care about steps 1 and
5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2
549 or nearly any other protocol provided that the protocol is secure.
...the parameters to the create() call are passed to the authenticator, along with a sha-2
56 hash of the clientdatajson (only a hash is sent because the link to the authenticator may be a low-bandwidth nfc or bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).
...And 4 more matches
:nth-child() - CSS: Cascading Style Sheets
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3,
5, etc.
...'='<attr-modifier> = i | s examples example selectors tr:nth-child(odd) or tr:nth-child(2n+1) represents the odd rows of an html table: 1, 3,
5, etc.
... :nth-child(
5n) represents elements
5 [=
5×1], 10 [=
5×2], 1
5 [=
5×3], etc.
...And 4 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.wrapper > p { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now t...
...it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2...
...</div> <div class="item3">item 3</div> <div class="item4">item 4</div> <div class="item
5">item
5</div> </div> if we add writing-mode: vertical-lr to the grid container, we can see that the block and inline axis are now running in a different direction.
...And 4 more matches
Grid template areas - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd ...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd ...
...And 4 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
bel for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.
53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } ...
...const radius = 4; // place needed to draw the rulers const rulers = 30.
5; const margin = 10.
5; const basic_scale_size =
5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); scaling = math.min(canvas.height - rulers - margin, canvas.width - rulers - margin); canvas.onmousedown = mousedown; ...
... canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.
5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var result = cx(x); return math.round(result) == result ?
...And 4 more matches
Viewport concepts - CSS: Cascading Style Sheets
when zoomed in you may get: document.documentelement.clientwidth /* 800 */ window.innerwidth /* 800 */ window.outerwidth /* 800 in firefox, 1200 in chrome */ document.documentelement.clientheight /*
533 */ window.innerheight /*
533 */ window.outerheight /*
596 in firefox, 900 in chrome */ the viewport was originally 1200 x 800 pixels.
... upon zooming in, the viewport became 800 x
533 pixels.
... body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x
533 measurement when we zoomed in using the keyboard.
...And 4 more matches
animation-timing-function - CSS: Cascading Style Sheets
ming-function: step-start; animation-timing-function: step-end; /* function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); /* steps function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(
5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; timing functions may be specified on individual keyframes in a @k...
... ease equal to cubic-bezier(0.2
5, 0.1, 0.2
5, 1.0), the default value, increases in velocity towards the middle of the animation, slowing back down at the end.
... ease-out equal to cubic-bezier(0, 0, 0.
58, 1.0), starts quickly, slowing down the animation continues.
...And 4 more matches
linear-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient tilted 4
5 degrees, starting blue and finishing red */ linear-gradient(4
5deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40...
...%, red); /* color hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.2
5turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 4
5 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(4
5deg, red 0
50%, blue
50% 100%); values <side-or-corner> the position of the gradient line's starting point.
... linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 2
5%, yellow
50%, green 7
5%, blue 100%); by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
...And 4 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
css /* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 2
56px; height: 2
56px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping > div { scroll-snap-stop: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll...
...-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 2
56px; font-size: 128px; width: 2
56px; height: 2
56px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div class="container x mandatory-scroll-snapping" dir="ltr"> <div>x mand.
... ltr </div> <div>2</div> <div>3</div> <div>4</div> <div>
5</div> </div> <div class="container x proximity-scroll-snapping" dir="ltr"> <div>x proximity ltr</div> <div>2</div> <div>3</div> <div>4</div> <div>
5</div> </div> <div class="container y mandatory-scroll-snapping" dir="ltr"> <div>y mand.
...And 4 more matches
transition-timing-function - CSS: Cascading Style Sheets
n: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps(4, jump-end); transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); /* steps function keywords */ transition-timing-function: steps(4, jump-start); transition-timing-function: steps(10, jump-end); transition-timing-function: steps(20, jump-none); transition-timing-function: steps(
5, jump-both); transition-timing-function: steps(6, start); transition-timing-function: steps(8, end); /* multiple timing functions */ transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ transition-timing-function: inherit; transition-timing-function: initial; transition-timing-function: unset; values <timing-function> each <timing-function> re...
... ease equal to cubic-bezier(0.2
5, 0.1, 0.2
5, 1.0), the default value, increases in velocity towards the middle of the transition, slowing back down at the end.
... ease-out equal to cubic-bezier(0, 0, 0.
58, 1.0), starts transitioning quickly, slowing down the transition continues.
...And 4 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
in other words, it sends the origin: http header without a cookie, x.
509 certificate, or performing http basic authentication.
...ped because of a temporary lack of data usage notes browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p>your browser doesn't support html
5 audio.
... 1 00:00:00 --> 00:00:4
5 [energetic techno music] 2 00:00:46 --> 00:00:
51 welcome to the time keeper's podcast!
...And 4 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
note that this is the requirement as of html
5.
...note that this directly contradicts the above normative requirement from html
5.
... deprecated attributes align deprecated since html4obsolete since html
5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
...And 4 more matches
Global attributes - HTML: Hypertext Markup Language
that means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer html
5-compliant.
... for example, html
5-compliant browsers hide content marked as <foo hidden>...</foo>, even though <foo> is not a valid html element.
... html
5.2the definition of 'global attributes' in that specification.
...And 4 more matches
MIME types (IANA media types) - HTTP
examples include multipart/form-data (for data produced using the formdata api) and multipart/byteranges (defined in rfc 7233:
5.4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
...nt that doesn't have a valid one) allows javascript to be served using any mime type that essentially matches any of the following: application/javascript application/ecmascript application/x-ecmascript application/x-javascript text/javascript text/ecmascript text/javascript1.0 text/javascript1.1 text/javascript1.2 text/javascript1.3 text/javascript1.4 text/javascript1.
5 text/jscript text/livescript text/x-ecmascript text/x-javascript note: even though any given user agent may support any or all of these, you should only use text/javascript.
...tp://localhost:8000/" method="post" enctype="multipart/form-data"> <label>name: <input name="mytextfield" value="test"></label> <label><input type="checkbox" name="mycheckbox"> check</label> <label>upload file: <input type="file" name="myfile" value="test.txt"></label> <button>send the file</button> </form> will send this message: post / http/1.1 host: localhost:8000 user-agent: mozilla/
5.0 (macintosh; intel mac os x 10.9; rv:
50.0) gecko/20100101 firefox/
50.0 accept: 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 connection: keep-alive upgrade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------87216
5604191141
56
539
55004498 content-length: 46
5 -------------------...
...And 4 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
er/resources/public-data/'; xhr.open('get', url); xhr.onreadystatechange = somehandler; xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ 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 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 first exchange is the preflight request/response: options /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 accept-encoding: gzip,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...
...And 4 more matches
HTTP resources and specifications - HTTP
rfc 7231 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 7234 hypertext transfer protocol (http/1.1): caching proposed standard rfc
5861 http cache-control extensions for stale content informational rfc 8246 http immutable responses proposed standard rfc 723
5 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 626
5 http state management mechanism defines cookies proposed standard draft spec cookie prefixes ietf draft draft sp...
...ec same-site cookies ietf draft draft spec deprecate modification of 'secure' cookies from non-secure origins ietf draft rfc 214
5 use and interpretation of http version numbers informational rfc 6
58
5 additional http status codes proposed standard rfc 7
538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 772
5 an http status code to report legal obstacles on the standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc
5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (htt...
...p) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7
578 returning values from forms: multipart/form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standard rfc 2183 communicating presentation information in internet messages: the content-disposition header field only a subset of syntax of the content-disposition header can be used in the context of http messages.
...And 4 more matches
Equality comparisons and sameness - JavaScript
there are four equality algorithms in es201
5: abstract equality comparison (==) strict equality comparison (===): used by array.prototype.indexof, array.prototype.lastindexof, and case-matching samevaluezero: used by %typedarray% and arraybuffer constructors, as well as map and set operations, and also string.prototype.includes and array.prototype.includes since es2016 samevalue: used in all other places javascript provides three different value-comparison operations: === - strict equality comparison ("strict equality", "identity", "triple equals") == - abstract equality comparison ("loose equality", "double equals") object.is provides samevalue (new in es201
5).
...briefly: double equals (==) will perform a type conversion when comparing two things, and will handle nan, -0, and +0 specially to conform to ieee 7
54 (so nan != nan, and -0 == +0); triple equals (===) will do the same comparison as double equals (including the special handling for nan, -0, and +0) but without type conversion; if the types differ, false is returned.
... abstract equality, strict equality, and same value in the specification in es
5, the comparison performed by == is described in section 11.9.3, the abstract equality algorithm.
...And 4 more matches
Inheritance and the prototype chain - JavaScript
javascript is a bit confusing for developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es201
5, but is syntactical sugar, javascript remains prototype-based).
...since ecmascript 201
5, the [[prototype]] is accessed using the accessors object.getprototypeof() and object.setprototypeof().
... var o = { a: 2, m: function() { return this.a + 1; } }; console.log(o.m()); // 3 // when calling o.m in this case, 'this' refers to o var p = object.create(o); // p is an object that inherits from o p.a = 4; // creates a property 'a' on p console.log(p.m()); //
5 // when p.m is called, 'this' refers to p.
...And 4 more matches
JavaScript language resources - JavaScript
en approved or are being worked on: name links release date description current editions ecma-262 10th edition pdf, html, working draft, repository 2019 ecmascript 2019 language specification ecma-262 9th edition pdf, html, working draft, repository 2018 ecmascript 2018 language specification ecma-402
5th edition working draft, repository 2018 ecmascript 2018 internationalization api specification obsolete/historical editions ecma-262 pdf june 1997 ecmascript: a general purpose, cross-platform programming language.
...this is the third revision of the ecmascript standard; corresponds to javascript 1.
5.
... see also the errata ecma-262
5th edition pdf december 2009 ecmascript language specification.
...And 4 more matches
Functions - JavaScript
method definition syntax starting with ecmascript 201
5, you are able to define own methods in a shorter syntax, similar to the getters and setters.
...function constructor * each of which will log 'p' */ var p =
5; function myfunc() { var p = 9; function decl() { console.log(p); } var expr = function() { console.log(p); }; var cons = new function('\tconsole.log(p);'); decl(); expr(); cons(); } myfunc(); /* * logs:- * 9 - for 'decl' by function declaration (current scope) * 9 - for 'expr' by function expression (current scope) *
5 - for 'cons' by...
...eclaration function foo() {} // function expression (function bar() {}) // function expression x = function hello() {} if (x) { // function expression function world() {} } // function declaration function a() { // function declaration function b() {} if (0) { // function expression function c() {} } } block-level functions in strict mode, starting with es201
5, functions inside blocks are now scoped to that block.
...And 4 more matches
Array.prototype.reduce() - JavaScript
polyfill // production steps of ecma-262, edition
5, 1
5.4.4.21 // reference: http://es
5.github.io/#x1
5.4.4.21 // https://tc39.github.io/ecma262/#sec-array.prototype.reduce if (!array.prototype.reduce) { object.defineproperty(array.prototype, 'reduce', { value: function(callback /*, initialvalue*/) { if (this === null) { throw new typeerror( 'array.prototype.reduce ' + 'called on null or undefined' ); } if ...
... var len = o.length >>> 0; // steps 3, 4,
5, 6, 7 var k = 0; var value; if (arguments.length >= 2) { value = arguments[1]; } else { while (k < len && !(k in o)) { k++; } // 3.
...lator, currentvalue) { return accumulator + currentvalue.x }, initialvalue) console.log(sum) // logs 6 alternatively written with an arrow function: let initialvalue = 0 let sum = [{x: 1}, {x: 2}, {x: 3}].reduce( (accumulator, currentvalue) => accumulator + currentvalue.x , initialvalue ) console.log(sum) // logs 6 flatten an array of arrays let flattened = [[0, 1], [2, 3], [4,
5]].reduce( function(accumulator, currentvalue) { return accumulator.concat(currentvalue) }, [] ) // flattened is [0, 1, 2, 3, 4,
5] alternatively written with an arrow function: let flattened = [[0, 1], [2, 3], [4,
5]].reduce( ( accumulator, currentvalue ) => accumulator.concat(currentvalue), [] ) counting instances of values in an object let names = ['alice', 'bob', 'tiff', 'b...
...And 4 more matches
Date - JavaScript
it should be noted that the maximum date is not of the same value as the maximum safe integer (number.max_safe_integer is 9,007,199,2
54,740,991).
... instead, it is defined in ecma-262 that a maximum of ±100,000,000 (one hundred million) days relative to january 1, 1970 utc (that is, april 20, 271821 bce ~ september 13, 27
5760 ce) can be represented by the standard date object (equivalent to ±8,640,000,000,000,000 milliseconds).
... date.prototype.getminutes() returns the minutes (0–
59) in the specified date according to local time.
...And 4 more matches
Number - JavaScript
number is a primitive wrapper object used to represent and manipulate numbers like 37 or -9.2
5.
... the javascript number type is a double-precision 64-bit binary format ieee 7
54 value, like double in java or c#.
... number.max_safe_integer the maximum safe integer in javascript (2
53 - 1).
...And 4 more matches
String.prototype.charCodeAt() - JavaScript
the charcodeat() method returns an integer between 0 and 6
553
5 representing the utf-16 code unit at the given index.
...(for information on unicode, see the javascript guide.) note: charcodeat() will always return a value that is less than 6
5536.
... because of this, in order to examine (or reproduce) the full character for individual character values of 6
5536 or greater, for such characters, it is necessary to retrieve not only charcodeat(i), but also charcodeat(i+1) (as if manipulating a string with two letters), or to use codepointat(i) instead.
...And 4 more matches
WebAssembly.Memory - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0memory() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the...
...And 4 more matches
parseInt() - JavaScript
ecmascript
5 clarifies that 10 (decimal) should be used, but not all browsers support this yet.
... octal interpretations with no radix although discouraged by ecmascript 3 and forbidden by ecmascript
5, many implementations interpret a numeric string beginning with a leading 0 as octal.
... the ecmascript
5 specification of the function parseint no longer allows implementations to treat strings beginning with a 0 character as octal values.
...And 4 more matches
Template literals (Template strings) - JavaScript
they were called "template strings" in prior editions of the es201
5 specification.
... strings: console.log('string text line 1\n' + 'string text line 2'); // "string text line 1 // string text line 2" using template literals, you can do the same like this: console.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2" expression interpolation in order to embed expressions within normal strings, you would use the following syntax: let a =
5; let b = 10; console.log('fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.'); // "fifteen is 1
5 and // not 20." now, with template literals, you are able to make use of the syntactic sugar, making substitutions like this more readable: let a =
5; let b = 10; console.log(`fifteen is ${a + b} and not ${2 * a + b}.`); // "fifteen is 1
5 and // not 20." nesting templates in certain cases, ...
... in es
5: let classes = 'header'; classes += (islargescreen() ?
...And 4 more matches
end - SVG: Scalable Vector Graphics
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="3
5" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="1
5" width="0"> <animate attributetype="xml" attributename="width" to="7
5" begin="0s" end="6s" fill="freeze" /> </rect> <rect x="10" y="8
5" h...
...eight="1
5" width="0"> <animate attributetype="xml" attributename="width" to="
50" begin="0s" end="4s" fill="freeze" /> </rect> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="2
5" x2="10" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="3
5" y="20" text-anchor="middle">2s</text> <line x1="3
5" y1="2
5" x2="3
5" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="60" y="20" text-anchor="middle">4s</text> <line x1="60" y1="2
5" x2="60" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="8
5" y="20" text-anchor="middle">6s</text> <line x1="8
5" y1="2
5" x2="8
5" y2="10
5" stroke="grey" stroke-width=".
5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1=...
..."2
5" x2="110" y2="10
5" stroke="grey" stroke-width=".
5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".
5" /> <line x1="10" y1="10
5" x2="110" y2="10
5" stroke="grey" stroke-width=".
5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="3
5" height="1
5" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style="cursor:pointer;" x="19.
5" y="62.
5" rx="
5" height="2...
...And 4 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 1
50 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10
50 100) translate(-36 4
5.
5) skewx(40) scale(1 0.
5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1
50,30 a 20,20 0,0,1 90,30 q 90,60
50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
...0% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 =
50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 + 40 = 80 top right corner: oldx=40 oldy=10 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 10 + 30 = 140 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 10 + 40 = 110 bottom left corner: oldx=10 oldy=30 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 + 40 = 140 bottom righ...
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="
5" y="
5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="
5" y="
5" width="40" height="40" fill="blue" transform="translate(
50)" /> <!-- vertical translation --> <rect x="
5" y="
5" width="40" height="40" fill="red" transform="translate(0
50)" /> <!-- both horizontal and vertical translation --> <rect x="
5" y="
5" width="40" height="40" fill...
...And 4 more matches
<feColorMatrix> - SVG: Scalable Vector Graphics
every pixel's color value [r,g,b,a] is matrix multiplied by a
5 by
5 color matrix to create new color [r',g',b',a'].
... | r' | | r1 r2 r3 r4 r
5 | | r | | g' | | g1 g2 g3 g4 g
5 | | g | | b' | = | b1 b2 b3 b4 b
5 | * | b | | a' | | a1 a2 a3 a4 a
5 | | a | | 1 | | 0 0 0 0 1 | | 1 | in simplified terms, below is how each color channel in the new pixel is calculated.
... r' = r1*r + r2*g + r3*b + r4*a + r
5 g' = g1*r + g2*g + g3*b + g4*a + g
5 b' = b1*r + b2*g + b3*b + b4*a + b
5 a' = a1*r + a2*g + a3*b + a4*a + a
5 take the amount of red in the new pixel, or r': it is the sum of r1 times the old pixel's red r, r2 times the old pixel's green g, r3 times of the old pixel's blue b, r4 times the old pixel's alpha a, plus a shift r
5.
...And 4 more matches
Example - SVG: Scalable Vector Graphics
this example should work in firefox 1.
5 and above.
... view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 1
50px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 7
5px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='1
50' r='7' fill='#0000ff' fill-opacity='0.
5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles.
... </p> <p> this is done completely in w3c standards–xhtml, svg and javascript–no flash or any vendor specific extensions. currently, this will work in mozilla firefox version 1.
5 and above.
...And 4 more matches
Return Codes - Archive of obsolete content
in mozilla/seamonkey, these constants are defined as part of the xpinstall object (formerly the softwareupdate object in netscape communicator 4.
5).
... execution_error -203 an error occurred executing the script no_install_script -204 installation script was not signed no_certificate -20
5 extracted file is not signed or the file (and, therefore, its certificate) could not be found.
... read_only -21
5 the specified file cannot be deleted because its permissions are set to read only.
...And 3 more matches
Archived Mozilla and build documentation - Archive of obsolete content
activex control for hosting netscape plug-ins in ie microsoft has removed support for netscape plug-ins from ie
5.
5 sp 2 and beyond.
...mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.
5.
... introducing the audio api extension the audio data api extension extends the html
5 specification of the <audio> and <video> media elements by exposing audio metadata and raw audio data.
...And 3 more matches
Mozilla release FAQ - Archive of obsolete content
it was last updated in 200
5.
...originally, the plan was just to re-stabilize the code and release
5.0, but it was decided within the community that the more ambitious changes that were planned for later integration were close to being ready.
... gemini was a previous rendering engine project, renamed nglayout aurora is the navigation center in mozilla and navigator
5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup?
...And 3 more matches
Adobe Flash - Archive of obsolete content
versions of flash prior to flash 6r49 (such as flash
5) are not scriptable in netscape gecko browsers.
...determine whether the browser is a mach-o browser //
5.
...the description string is broken into an array of constituent strings based on an invocation of the match method with a regular expression that assumes that the string format will be in the format flash major rminor where major can be a major revision such as "
5" or "6" and minor is the subsidiary version number.
...And 3 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=19
53371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly.
... @media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more information about this issue please see bug 7327
57 and bug 7327
57 and this mozillazine thread.
... mac os x os x lion missing toolbar button icons due to firefox bug 679708 and bug 702
558, some toolbar buttons icons may be missing on firefox 8 and later running on mac os x lion.
...And 3 more matches
Browser Feature Detection - Archive of obsolete content
test summary standard netscape 7.0x firefox 1.
5 safari 2 opera 7 / 8.
5-9.0 internet explorer 6 / 7 dom core 1 100% 100% 100% 7
5% / 91% 7
5% / 7
5% dom core 2 100% 100% 100% 70% / 94%
58% /
58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / ...
...83% 38% / 42% test results cross reference dom core level 1 support for properties/methods in document name firefox 1.
5 ie 6 & 7 opera 8.
54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.c...
...reateentityreference()obsolete since gecko 7 (method present but only returns null: bug 98
50) false false document.getelementsbytagname() true true true dom core level 2 support for properties/methods in document name firefox 1.
5 ie 6 & 7 opera 8.
54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true true document.createcdatasection() true false true document.c...
...And 3 more matches
Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the xforms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox 3.
5.
...the following table gives you an overview of which version you want to build: firefox version gecko/toolkit version source code notes status firefox 2.0 gecko 1.8.1 cvs, branch mozilla_1_8_branch not developed any more last release: 0.8.
5ff2 firefox 3.0 gecko 1.9.0 cvs, branch head not developed any more last release: 0.8.
5ff3 firefox 3.
5 gecko 1.9.1 xforms/schema-validation code does not build with firefox 3.
5 any more not supported firefox 3.6 gecko 1.9.2 xforms/schema-validation code does not build with firefox 3.6 any more not developed any more last release: 0.8.6 firefox 4 gecko 2.0 mercurial, repositories mozilla-c...
...firefox 3.
5 and up: get the source code if you want to build xforms for firefox up to 3.0, you already have the required source code, it's part of your cvs checkout.
...And 3 more matches
2D collision detection - Game development
var rect1 = {x:
5, y:
5, width:
50, height:
50} var rect2 = {x: 20, y: 10, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { // collision detected!
... } // filling in the values => if (
5 < 30 &&
55 > 20 &&
5 < 20 &&
55 > 10) { // collision detected!
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.
5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x:
5, y:
5, w:
50, h:
50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("enterframe", function () { if (rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.h + rect1.y > rect2.y) { // collision detected!
...And 3 more matches
Building up a basic demo with the PlayCanvas engine - Game development
let's start by defining the geometry for a cube shape — add the following new code below your previous additions: var box = new pc.entity(); box.addcomponent("model", { type: "box" }); app.root.addchild(box); box.rotate(10, 1
5, 0); it will create an entity with the box model component and add it to the root of the application, our scene.
... var light = new pc.entity(); light.addcomponent('light'); app.root.addchild(light); light.rotate(4
5, 0, 0); it will create a light entity component and add it to the scene.
... var boxmaterial = new pc.phongmaterial(); boxmaterial.diffuse.set(0, 0.
58, 0.86); boxmaterial.update(); box.model.model.meshinstances[0].material = boxmaterial; by diffusing the light on the object we can give it it's own color —we'll choose a nice familiar blue.
...And 3 more matches
GLSL Shaders - Game development
the vertex shader code let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+
5.0, 1.0); } the resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
... both projectionmatrix and modelviewmatrix are provided by three.js and the vector is passed with the new 3d position, which results in the original cube moving 10 units along the x axis and
5 units along the z axis, translated via a shader.
... the texture shader code now we'll add the texture shader to the code — add the code below to the body's second <script> tag: void main() { gl_fragcolor = vec4(0.0, 0.
58, 0.86, 1.0); } this will set an rgba color to recreate the current light blue one — the first three float values (ranging from 0.0 to 1.0) represent the red, green, and blue channels while the fourth one is the alpha transparency (ranging from 0.0 — fully transparent — to 1.0 — fully opaque).
...And 3 more matches
Move the ball - Game development
now, let's draw the ball — add the following inside your draw() function: ctx.beginpath(); ctx.arc(
50,
50, 10, 0, math.pi*2); ctx.fillstyle = "#009
5dd"; ctx.fill(); ctx.closepath(); try your updated code now — the ball should be repainted on every frame.
...first, instead of a hardcoded position at (
50,
50) we will define a starting point at the bottom center part of the canvas in variables called x and y, then use those to define the position the circle is drawn at.
... first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#009
5dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving.
...And 3 more matches
Buttons - Game development
« previousnext » this is the 1
5th step out of 16 of the gamedev phaser tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson1
5.html.
...add the following lines to the bottom of your create() function: startbutton = game.add.button(game.world.width*0.
5, game.world.height*0.
5, 'button', startgame, this, 1, 0, 2); startbutton.anchor.set(0.
5); the button() method's parameters are as follows: the button's x and y coordinates the name of the graphic asset to be displayed for the button a callback function that will be executed when the button is pressed a reference to this to specify the execution context the frames that will be used for th...
...And 3 more matches
The box model - Learn web development
if we assume that the box has the following css defining width, height, margin, border, and padding: .box { width: 3
50px; height: 1
50px; margin: 10px; padding: 2
5px; border:
5px solid black; } the space taken up by our box using the standard box model will actually be 410px (3
50 + 2
5 + 2
5 +
5 +
5), and the height 210px (1
50 + 2
5 + 2
5 +
5 +
5), as the padding and border are added to the width used for the content box.
...the same css as used above would give the below result (width = 3
50px, height = 1
50px).
...the top paragraph has a margin-bottom of
50 pixels.
...And 3 more matches
Multiple-column layout - Learn web development
.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 18
5, 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, 18
5, 227); } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... spanning the columns body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 18
5, 227); } h2 { column-span: all; background-color: rgb(79, 18
5, 227); color: white; padding: .
5em; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 3 more matches
How CSS is structured - Learn web development
an example would be the calc() function, which can do simple math within css: <div class="outer"><div class="box">the inner box is 90% - 30px.</div></div> .outer { border:
5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } this renders as: a function consists of the function name, and parentheses to enclose the values for the function.
...there are also other shorthand types, for example 2-value shorthands, which set padding/margin for top/bottom, then left/right */ padding: 10px 1
5px 1
5px
5px; is equivalent to these four lines of code: padding-top: 10px; padding-right: 1
5px; padding-bottom: 1
5px; padding-left:
5px; this one line: background: red url(bg-graphic.png) 10px 10px repeat-x fixed; is equivalent to these five lines: background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment:...
... /* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/1
50% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* let's special case the global font size.
...And 3 more matches
Advanced form styling - Learn web development
for example, consider this simple test case: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, often ugly ways: browser rendering firefox 71 (macos) firefox
57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example html: <form> <...
...t { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding:
5px; height: 30px; } input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius:
5px; } label { margin-bottom:
5px; } button { width: 60%; margin: 0 auto; } note: if you want to test these examples across a number of browsers simultaneously, you can find it live here (also see here for the source code).
... we've applied some global normalizing css to all the controls and their labels, to get them to size in the same way, adopt their parent font, etc., as mentioned in the previous article: button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: border-box; width: 100%; padding:
5px; height: 30px; } we also added some uniform shadow and rounded corners to the controls on which it made sense: input[type="text"], input[type="datetime-local"], input[type="color"], select { box-shadow: inset 1px 1px 3px #ccc; border-radius:
5px; } on other controls like range types, progress bars, and meters they just add an ugly box around the control area, so it doesn't make sense.
...And 3 more matches
Example 1 - Learn web development
t hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #2277
55; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.62
5em; /* 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 2
5px 2px
5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.4
5); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; ba...
...t hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #2277
55; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.62
5em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.
5em 0.2em 0.
5em; /* 1px 2
5px 2px
5p...
...And 3 more matches
How to build custom form controls - Learn web development
*/ box-shadow: 0 0 3px 1px #2277
55; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control.
... if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.62
5em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.
5em .2em .
5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.4
5); /* the first de...
...*/ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width.
...And 3 more matches
CSS basics - Learn web development
to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width:
500px; border: 1px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them.
... changing the page color html { background-color: #00
539f; } this rule sets a background color for the entire page.
... styling the body body { width: 600px; margin: 0 auto; background-color: #ff9
500; padding: 0 20px 20px 20px; border:
5px solid black; } there are several declarations for the <body> element.
...And 3 more matches
Deployment and next steps - Learn web development
your generated bundle.js and bundle.css files will be something like this (file size on the left):
504 jul 13 02:43 bundle.css 9
5981 jul 13 02:43 bundle.js to compile our application for production we have to run npm run build instead.
... so, after running npm run build, our generated bundle.js and bundle.css files will be more like this:
504 jul 13 02:43 bundle.css 21782 jul 13 02:43 bundle.js try running npm run build in your app's root directory now.
...do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html absolute paths" > git push counting objects:
5, done.
...And 3 more matches
Implementing feature detection - Learn web development
we will add the html
5 shiv to our example too so that the html
5 semantic elements will style properly in older versions of ie.
... download the latest version (see manual installation), unzip the zip file, copy the html
5shiv-printshiv.min.js and html
5shiv.min.js files into your example directory, and link to one of the files by putting the following under your <title> element: <script src="html
5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels.
...the example shown is a way of detecting html
5 canvas support.
...And 3 more matches
Package management basics - Learn web development
run the following command: parcel build index.html you should see an output like so: ✨ built in 9.3
5s.
... dist/my-project.fb76efcf.js.map 648.
58 kb 64ms dist/my-project.fb76efcf.js 19
5.74 kb 8.43s dist/index.html 288 b 806ms again, the destination for our production files is the dist directory.
...the javascript bundle my-project.fb76efcf.js is a whopping 19
5k — very large, given that all it does is print a line of text.
...And 3 more matches
Simple Thunderbird build
for thunderbird up to
59, see the old build documentation.
... windows build prerequisites gnu/linux build prerequisites macos build prerequisites mapi headers on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=1290
5 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (windows sdk 10).
... 18/10/2010 16:11 7,334 mapiaux.h 02/06/2009 17:02 7,938 mapicode.h 02/06/2009 17:02 22,960 mapidbg.h 02/06/2009 17:02 84,644 mapidefs.h 02/06/2009 17:02 27,840 mapiform.h 02/06/2009 17:02 11,880 mapiguid.h 02/06/2009 17:02 2,648 mapihook.h 02/06/2009 17:02
5,3
59 mapinls.h 02/06/2009 17:02 2,743 mapioid.h 02/06/2009 17:02 32,978 mapispi.h 02/06/2009 17:02
54,39
5 mapitags.h 02/06/2009 17:02 26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02 1,906 mapiwz.h 02/06/2009 17:02 18,277 mapix.h 02/06/2009 17:02 ...
...And 3 more matches
Gecko Keypress Event
gecko 1.9 key handling changed significantly after beta
5 (bug 3
59638, bug 429
510 and the bugs on which they depend).
... the charcode value depends on the state of capslock and numlock (except they are currently ignored if alt (option) is down on mac - see bug 4329
53).
...this behavior is a bug, this behavior will be changed in a future major release (bug 4329
51).
...And 3 more matches
Basics
you can also make displayed equations, such as the following ones: x → maps to y = f n ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a )
5 4 !
...
5 !
...y</mi> <mn>2</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>4</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>3</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> </maction> </mtd> <mtd> <maction id="a43" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>
5</mn> </msup> <mrow> <msup> <mi>x</mi> <mn>
5</mn> </msup> <mo>+</mo> <mrow> <mn>
5</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>4</mn> </msup> <mo>&invisibletimes;</mo> <mi>y</mi> </mrow> <mo>+</mo> <mrow> <mn>10</mn> <mo>&invisibletimes;</mo> <msup> <mi>x</mi> <mn>3</mn> </msup> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mo>+</mo> <mrow> <mn>10</mn> <mo>&invisi...
...And 3 more matches
MathML Demo: <mtable> - tables and matrices
1 22 333 4444 x
55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below.
... 1 22 333 4444 x
55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here 7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed".
... 1 22 333 4444
55555 x + 1 666666 a b c 7777777 11 cols arg is"r|c:l".
...And 3 more matches
Investigating leaks using DMD heap scan mode
the result of that grep will contain output that looks something like this: cc-edges.1
5873.log:0x7f0897082c00 [rc=128
5] nsglobalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.1
5873.log: the first part is the file name where it was found.
... 1
5873 is the pid of the process that leaked.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e
550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
...And 3 more matches
NSS Certificate Download Specification
in all cases the certificates are x
509 version 1, 2, or 3.
...the begin and end lines must begin and end with
5 dashes, with no extra leading or trailing white space (excluding the end of line characters).
...these mime types are: application/x-x
509-user-cert the certificate being downloaded is a user certificate belonging to the user operating the browser.
...And 3 more matches
NSS 3.14.1 release notes
bug 812399 - in nss 3.14, a regression caused bug 6410
52 / cve-2011-3640 to be re-introduced under certain situations.
... bug 3
5702
5 - nss 3.14 added support for tokens that make use of cka_always_authenticate.
... bug 802429 - the nss softoken is now the default token for sha-2
56 and sha-
512.
...And 3 more matches
NSS 3.16.3 release notes
notable changes in nss 3.16.3 the following 1024-bit ca certificates were removed cn = entrust.net secure server certification authority sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:
54:fc:31:7e:1
5:39 cn = gte cybertrust global root sha1 fingerprint: 97:81:79:
50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 ou = valicert class 1 policy validation authority sha1 fingerprint: e
5:df:74:3c:b6:01:c4:9b:98:43:dc:ab:8c:e8:6a:81:10:9f:e4:8e ou = valicert class 2 policy validation authority sha1 fingerprint: 31:7a:2a:d0...
...:7f:2b:33:
5e:f
5:a1:c3:4e:4b:
57:e8:b7:d8:f1:fc:a6 ou = valicert class 3 policy validation authority sha1 fingerprint: 69:bd:8c:f4:9c:d3:00:fb:
59:2e:17:93:ca:
55:6a:f3:ec:aa:3
5:fb additionally, the following ca certificate was removed as requested by the ca ou = tdc internet root ca sha1 fingerprint: 21:fc:bd:8e:7f:6c:af:0
5:1b:d1:b3:43:ec:a8:e7:61:47:f2:0f:8a the following ca certificates were added cn = certification authority of wosign sha1 fingerprint: b9:42:94:bf:91:ea:8f:b6:4b:e6:10:97:c7:fb:00:13:
59:b6:76:cb cn = ca 沃通根证书 sha1 fingerprint: 16:32:47:8d:89:f9:21:3a:92:00:8
5:63:f
5:a4:a7:d3:12:40:8a:d6 cn = digicert assured id root g2 sha1 fingerprint: a1:...
...4b:48:d9:43:ee:0a:0e:40:90:4f:3c:e0:a4:c0:91:93:
51:
5d:3f cn = digicert assured id root g3 sha1 fingerprint: f
5:17:a2:4f:9a:48:c6:c9:f8:a2:00:26:9f:dc:0f:48:2c:ab:30:89 cn = digicert global root g2 sha1 fingerprint: df:3c:24:f9:bf:d6:66:76:1b:26:80:73:fe:06:d1:cc:8d:4f:82:a4 cn = digicert global root g3 sha1 fingerprint: 7e:04:de:89:6a:3e:66:6d:00:e6:87:d3:3f:fa:d9:3b:e8:3d:34:9e cn = digicert trusted root g4 sha1 fingerprint: dd:fb:16:cd:49:31:c9:73:a2:03:7d:3f:c8:3a:4d:7d:77:
5d:0
5:e4 cn = quovadis root ca 1 g3 sha1 fingerprint: 1b:8e:ea:
57:96:29:1a:c9:39:ea:b8:0a:81:1a:73:73:c0:93:79:67 cn = quovadis root ca 2 g3 sha1 fingerprint: 09:3c:61:f3:8b:8b:dc:7d:
55:df...
...And 3 more matches
NSS 3.22 release notes
nss 3.22 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_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 121
529
5) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa keys to be used with pss.
... pseudorandom functions based on hashes other than sha-1 are now supported with pbkdf (bug
554827).
... pk11_createpbev2algorithmid() now supports sec_oid_pkcs
5_pbkdf2 with cipheralgtag and prfalgtag set to sec_oid_hmac_sha2
56, sec_oid_hmac_sha224, sec_oid_hmac_sha384, or sec_oid_hmac_sha
512.
...And 3 more matches
NSS 3.23 release notes
nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly130
5 cipher and tls cipher suites now supported (bug 917
571, bug 122790
5) experimental-only support tls 1.3 1-rtt mode (draft-11).
... the build time environment variable nss_disable_chachapoly was added, which can be used to prevent compilation of the chacha20/poly130
5 code.
... the following ca certificates were removed cn = staat der nederlanden root ca sha-2
56 fingerprint: d4:1d:82:9e:8c:16:
59:82:2a:f9:3f:ce:62:bf:fc:de:26:4f:c8:4e:8b:9
5:0c:
5f:f2:7
5:d0:
52:3
5:46:9
5:a3 cn = netlock minositett kozjegyzoi (class qa) tanusitvanykiado sha-2
56 fingerprint: e6:06:dd:ee:e2:ee:7f:
5c:de:f
5:d9:0
5:8f:f8:b7:d0:a9:f0:42:87:7f:6a:17:1e:d8:ff:69:60:e4:cc:
5e:a
5 cn = netlock kozjegyzoi (class a) tanusitvanykiado sha-2
56 fingerprint: 7f:12:cd:
5f:7e:
5e:29:0e:c7:d8:
51:79:d
5:b7:2c:20:a
5:be:7
5:08:ff:db:
5b:f8:1a:b9:68:4a:7f:c9:f6:67 cn = netlock uzleti (class b) tanusitvanykiado sha-2
56 fingerprint: 39:df:7b:68:2b:7b:93:8f:84:71:
54:81:cc:de:8d:60:d8:f2:2e:c
5:98:87:7d:0a:aa:c1:2b:
59:18:2b:03:12 ...
...And 3 more matches
Release notes for recent versions of NSS
the current stable release of nss is 3.
56, which was released on 21 august 2020.
... (nss 3.
56 release notes) the current esr releases of nss are 3.44.4 (nss 3.44.4 release notes), intended for firefox esr 68, which was released on 19 may 2020, and 3.
53.1 (nss 3.
53.1 release notes), intended for firefox esr 78, which was released on 16 june 2020.
... past releases nss 3.
56 release notes nss 3.
55 release notes nss 3.
54 release notes nss 3.
53.1 release notes nss 3.
53 release notes nss 3.
52.1 release notes nss 3.44.4 release notes nss 3.
52 release notes nss 3.
51.1 release notes nss 3.
51 release notes nss 3.
50 release notes nss 3.49.2 release notes nss 3.49.1 release notes nss 3.49 release notes nss 3.48.1 release notes nss 3.48 release notes nss 3.47.1 release notes nss 3.47 release notes nss 3.46.1 release notes nss 3.46 release notes nss 3.4
5 release notes nss 3.44.3 release notes nss 3.44.2 release notes nss 3.44.1 release notes nss 3.44 release notes nss 3.43 release notes nss 3.42.1 release notes nss 3.42 release notes nss 3.36.8 release notes nss 3.36.7 release notes nss 3.41 release notes nss 3.40...
...And 3 more matches
Overview of NSS
tls v1.3 (rfc 8446), tls v1.2 (rfc
5246), tls v1.1 (rfc 4346), tls v1 (rfc 2246).
... pkcs #
5.
... x.
509 v3.
...And 3 more matches
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 1
5 - error read from import file o 16 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version 7 to version
5 error o 22 - cert and key dbs patch error o 23 - get default cert db error o 24 - find cert by nickname error o ...
...2
5 - create export context error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 4
5:2e:6a:a0:03:4d:7b:a1:63:3c:1
5:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t own,st=western cape,c=za" alternatively, the -r prints the certifica...
...And 3 more matches
NSS Tools crlutil
list of possible algorithms: md2 | md4 | md
5 | sha1 | sha2
56 | sha384 | sha
512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
... for example: 200
502041
53000z add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (
5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
...And 3 more matches
NSS tools : pk12util
return codes o 0 - no error o 1 - user cancelled o 2 - usage error o 6 - nls init error o 8 - certificate db open error o 9 - key db open error o 10 - file initialization error o 11 - unicode conversion error o 12 - temporary file creation error o 13 - pkcs11 get slot error o 14 - pkcs12 decoder start error o 1
5 - error read from import file o 16 - pkcs12 decode error o 17 - pkcs12 decoder verify error o 18 - pkcs12 decoder validate bags error o 19 - pkcs12 decoder import bags error o 20 - key db conversion version 3 to version 2 error o 21 - cert db conversion version 7 to version
5 error o 22 - cert and key dbs patch error o 23 - get default cert db error...
... o 24 - find cert by nickname error o 2
5 - create export context error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 input file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
...id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 4
5:2e:6a:a0:03:4d:7b:a1:63:3c:1
5:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services division,o=thawte consulting,l=cape t ...
...And 3 more matches
Scripting Java
this works just as in java, with the use of the new operator: js> new java.util.date() thu jan 24 16:18:17 est 2002 if we store the new object in a javascript variable, we can then call methods on it: js> f = new java.io.file("test.txt") test.txt js> f.exists() true js> f.getname() test.txt static methods and fields can be accessed from the class object itself: js> java.lang.math.pi 3.141
5926
53
589793 js> java.lang.math.cos(0) 1 in javascript, unlike java, the method by itself is an object and can be evaluated as well as being called.
... js> t = new java.lang.thread(r) thread[thread-2,
5,main] js> t.start() js> running the final js prompt and the output from the new thread may appear in either order, depending on thread scheduling.
... here is the simplified runnable example: js> t = java.lang.thread(function () { print("\nrunning"); }); thread[thread-0,
5,main] js> t.start() js> running rhino also allows use of javascript functions as implementations of java interfaces with more than one method if all the methods have the same signature.
...And 3 more matches
Mozilla internal string guide
void processstring(const nsastring& str) { const nsastring& firstfive = substring(str, 0,
5); // from index 0, length
5 // firstfive is now a string representing the first
5 characters } unicode conversion ns*cstring vs.
...(win32 w apis and mac os x natively use utf-16.) latin1 - 8-bit encoding for the first 2
56 unicode code points.
...specifying charset=latin1 means the same as charset=windows-12
52.
...And 3 more matches
nsIDocumentLoader
inherits from: nsisupports last changed in gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) implemented by: @mozilla.org/docloaderservice;1.
... methods clearparentdocloader() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void clearparentdocloader(); parameters none.
... createdocumentloader() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void createdocumentloader( out nsidocumentloader aninstance ); parameters aninstance destroy() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void destroy(); parameters none.
...And 3 more matches
nsIEditor
66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.1
5) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframe...
...output methods astring outputtostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpreformatted = 16, outputwrap = 32, // outputformatflowed = 64, outputabsolutelinks = 2
58, // outputencodew3centities = 2
56, outputcrlinebreak =
512, // outputlflinebreak = 1024, outputnoscriptcontent = 2048, // outputnoframescontent = 4096, outputnoformattinginpre = 8192, // outputencodebasicentities=16384, outputencodelatin1entities=32768, // outputencodehtmlentities=6
5536, outputpersistnbsp=131072 editorapi.outputtostring('text/html', 2); editorapi.outputtostring('te...
... ; void debugunittests(out long outnumtests, out long outnumtestsfailed); [notxpcom] boolean ismodifiablenode(in nsidomnode anode); constants load flags constant value description enone 0 enext 1 eprevious 2 enextword 3 epreviousword 4 etobeginningofline
5 etoendofline 6 attributes attribute type description contentsmimetype string the mime type of the document.
...And 3 more matches
nsISyncJPAKE
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void final(in acstring ab, in acstring agvb, in acstring arb, in acstring ahkdfinfo, out acstring aaes2
56key, out acstring ahmac2
56key); void round1(in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2); void round2(in acstring apeerid, in acstring apin, in acstring agx3, in acstring agv3, in acstring ar3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() perform th...
...this will compute the key and expand the key to two keys, an aes2
56 encryption key and a 2
56 bit hmac key.
... it returns a key confirmation value (sha2
56d of the key) and the encryption and hmac keys.
...And 3 more matches
nsIWebBrowserChrome
chrome_personal_toolbar 2
56 value for the chromeflags attribute.
... chrome_scrollbars
512 value for the chromeflags attribute.
... chrome_window_raised 33
554432 represent special cases.
...And 3 more matches
nsIMsgCloudFileProvider
constant value description offlineerr 0x80
550014 returned when it appears that there is no active network connection.
... autherr 0x80
55001e returned when authorizing has failed.
... uploaderr 0x80
55311a returned when uploading has failed for an unknown reason.
...And 3 more matches
Plugin Roadmap for Firefox - Plugins
march 2017 starting with firefox
52 in march 2017, plugins other than adobe flash are no longer supported in firefox.
... firefox extended support release
52 will continue to support non-flash plugins until early 2018.
... august 2017 starting with firefox
55 in august 2017, users must choose which sites are allowed to activate the flash plugin.
...And 3 more matches
Network request details - Firefox Developer Tools
opy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1
5602
58099074460" }, { "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" }, { ...
...ver-timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106384710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/
5.1), 1.1 varnish (varnish/
5.1)" }, { "name": "x-analytics", "value": "ns=-1;special=badtitle;wmf-last-access=11-jun-2019;wmf-last-access-global=11-jun-2019;https=1" }, { "name": "x-cache", "value": "cp107
5 pass, cp107
5 pass" }, { "name": "x-cache-status", "value": "pass" }, { "name": "x-client-i...
...p", "value": "204.210.1
58.136" }, { "name": "x-content-type-options", "value": "nosniff" }, { "name": "x-firefox-spdy", "value": "h2" }, { "name": "x-frame-options", "value": "sameorigin" }, { "name": "x-powered-by", "value": "hhvm/3.18.6-dev" }, { "name": "x-search-id", "value": "esvan0r
5bnnwscyk2wq09i1im" }, { "name": "x-varnish", "value": "7660194
57, 417
549316" } ] }, "request headers (66
5 b)": { "headers": [ { "name": "accept", "value": "*/*" }, { "name": "accept-encoding", "value": "gzip, deflate, br" }, { "name": "accept-lang...
...And 3 more matches
Work with animations - Firefox Developer Tools
the timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 2
50 milliseconds (this depends on the time scale of the animations currently displayed).
...both properties were initialized at 0ms and finalized at 7
50ms.
... filter was given a value at 2
50ms and transform at
500ms.
...And 3 more matches
ByteLengthQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbytelengthqueuingstrategy experimentalchrome full support
59edge full support 16firefox full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... webview android full support
59chrome android full support
59firefox android full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... samsung internet android full support 7.0bytelengthqueuingstrategy() constructor experimentalchrome full support
59edge full support 16firefox full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
...And 3 more matches
CanvasRenderingContext2D.rotate() - Web APIs
examples rotating a shape this example rotates a rectangle by 4
5°.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0,
5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(4
5 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue.
...its horizontal center is at (80 + 140 / 2), or 1
50.
...And 3 more matches
CountQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountqueuingstrategy experimentalchrome full support
59edge full support 16firefox full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... webview android full support
59chrome android full support
59firefox android full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
... samsung internet android full support 7.0countqueuingstrategy() constructor experimentalchrome full support
59edge full support 16firefox full support
57disabled full support
57disabled disabled from version
57: this feature is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true).
...And 3 more matches
FileSystemFlags - Web APIs
13prefixed full support 13prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support
50ie no support noopera no support nosafari no support nowebview android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitc...
...hrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitfirefox android full support
50opera android no support nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreate experimentalchrome full support 13prefixed full support 13prefi...
...xed prefixed implemented with the vendor prefix: webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox partial support
50notes partial support
50notes notes for security reasons, firefox does not support creating files.
...And 3 more matches
FontFaceSetLoadEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimentalchrome full support 3
5edge full support ≤79firefox full support yesie ?
... webview android no support nochrome android full support 3
5firefox android full support yesopera android full support 22safari ios ?
... samsung internet android full support 3.0fontfacesetloadevent() constructor experimentalchrome full support
57edge full support ≤79firefox ?
...And 3 more matches
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><...
...And 3 more matches
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121...
...,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4...
...e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:h...
...And 3 more matches
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" ...
...text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2p...
...x" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1=...
...And 3 more matches
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20...
... 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
..."#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xl...
...And 3 more matches
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 3 more matches
IDBCursorWithValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,2
5 101,20 ...
...101,30 91,2
5" stroke="#d4dde4" fill="none"/><line x1="101" y1="2
5" x2="131" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
...And 3 more matches
IDBRequest.error - Web APIs
in chrome 48+/firefox
58+ this property returns a domexception because domerror has been removed from the dom standard.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
...And 3 more matches
IDBTransaction.error - Web APIs
in chrome 48+/firefox
58+ this property returns a domexception because domerror has been removed from the dom standard.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
...And 3 more matches
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,2
5 171,20 171,30 161,2
5" stroke="...
...#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="2
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full support
58edge full support ≤79firefox no support nonotes no support nonotes notes see bug 134840
5.ie ?
...And 3 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,...
...2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 3 more matches
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stro...
...ke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline point...
...s="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="6
5" width="180" hei...
...And 3 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" ...
...x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</tex...
...t></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y...
...And 3 more matches
ScreenOrientation - Web APIs
for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
...android full support 3.0anglechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
... android full support 3.0lockchrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
...And 3 more matches
Screen Orientation API - Web APIs
for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
...android full support 3.0anglechrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
... android full support 3.0lockchrome full support 38edge full support 79firefox full support 43ie no support noopera full support 2
5safari no support nowebview android full support 38chrome android full support 38firefox android full support 43opera android full support 2
5safari ios no supp...
...And 3 more matches
SubtleCrypto.sign() - Web APIs
syntax const signature = crypto.subtle.sign(algorithm, key, data); parameters algorithm is a string or object that specifies the signature algorithm to use and its parameters: to use rsassa-pkcs1-v1_
5, pass the string "rsassa-pkcs1-v1_
5" or an object of the form { "name": "rsassa-pkcs1-v1_
5" }.
... three of these algorithms — rsassa-pkcs1-v1_
5, rsa-pss, and ecdsa — are public-key cryptosystems that use the private key for signing and the public key for verification.
... rsassa-pkcs1-v1_
5 the rsassa-pkcs1-v1_
5 algorithm is specified in rfc 3447.
...And 3 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
we can allow the user to control these using range inputs on the interface: <label for="attack">attack</label> <input name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <input name="release" id="release" type="range" min="0" max="1" value="0.
5" step="0.1" /> now we can create some variables over in javascript and have them change when the input values are updated: let attacktime = 0.2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('input', function() { attacktime = number(this.value); }, false); let releasetime = 0.
5; const releasecontrol = document.queryselector('#release'); releasecont...
...we could modify the function to run values from 0.
5 to -0.
5 or similar to take the peaks off and reduce the discomfort, however, where's the fun in that?
... the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="
5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { noiseduration = number(this.value); }, false); let bandhz = 1000; const bandcontrol = document.queryselector('#band'); bandcontrol.addeventlistener('input', function() { bandhz = number(this.value); }, false); the final playnoise() function here's the e...
...And 3 more matches
Web audio spatialization basics - Web APIs
the listener's position to emulate a person looking into our room: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const listener = audioctx.listener; const posx = window.innerwidth/2; const posy = window.innerheight/2; const posz = 300; listener.positionx.value = posx; listener.positiony.value = posy; listener.positionz.value = posz-
5; we could move the listener left or right using positionx, up or down using positiony, or in or out of the room using positionz.
...'#move-controls').queryselectorall('button'); const boombox = document.queryselector('.boombox-body'); // the values for our css transforms let transform = { xaxis: 0, yaxis: 0, zaxis: 0.8, rotatex: 0, rotatey: 0 } // set our bounds const topbound = -posy; const bottombound = posy; const rightbound = posx; const leftbound = -posx; const innerbound = 0.1; const outerbound = 1.
5; let's create a function that takes the direction we want to move as a parameter, and both modifies the css transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.
... function moveboombox(direction) { switch (direction) { case 'left': if (transform.xaxis > leftbound) { transform.xaxis -=
5; panner.positionx.value -= 0.1; } break; case 'up': if (transform.yaxis > topbound) { transform.yaxis -=
5; panner.positiony.value -= 0.3; } break; case 'right': if (transform.xaxis < rightbound) { transform.xaxis +=
5; panner.positionx.value += 0.1; } break; c...
...And 3 more matches
ARIA: grid role - Accessibility
<th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday">w</th> <th role="columnheader" aria-label="thursday">t</th> <th role="columnheader" aria-label="friday">f</th> <th role="columnheader" aria-label="saturday">s</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <th scope="row" role="rowheader">week 3
5</th> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> <td>31</td> <td role="gridcell" tabindex="-1">1</td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 36</th> <td role="gridcell" tabindex="-1"> 2 </td> <td role="gridcell" tabindex="-1"> 3 </td> <td role="gridcell" ta...
...bindex="-1"> 4 </td> <td role="gridcell" tabindex="-1">
5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 37</th> <td role="gridcell" tabindex="-1"> 9 </td> <td role="gridcell" tabindex="-1"> 10 </td> <td role="gridcell" tabindex="-1"> 11 </td> <td role="gridcell" tabindex="-1"> 12 </td> <td role="gridcell" tabindex="-1"> 13 </td> <td role="gridcell" tabindex="-1"> 14 </td> <td role="gridcell" tabindex="-1"> ...
...1
5 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 38</th> <td role="gridcell" tabindex="-1"> 16 </td> <td role="gridcell" tabindex="-1"> 17 </td> <td role="gridcell" tabindex="-1"> 18 </td> <td role="gridcell" tabindex="-1"> 19 </td> <td role="gridcell" tabindex="-1"> 20 </td> <td role="gridcell" tabindex="-1"> 21 </td> <td role="gridcell" tabindex="-1"> 22 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 39</th> <td role="gridcell" tabindex="-1"> 23 </td> <td role="gridcell" tabindex="-1"> 24 </td> <td role="gridcell" tabindex="-1"> ...
...And 3 more matches
Accessibility Information for Web Authors - Accessibility
guidelines and regulations section
508 guidelines for web authors these guidelines must be followed by u.s.
... automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage related to section
508 standards and/or the wcag guidelines.
...the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section
508, wcag priorities 1, 2 and 3.
...And 3 more matches
Basic Shapes - CSS: Cascading Style Sheets
in the screenshot below i have created a circle, using shape-outside: circle(
50%).
... .shape { shape-outside: circle(
50%) margin-box; } you can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.
... .shape { shape-outside: circle(
50%) border-box; } what is worth noting is that the margin-box will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box.
...And 3 more matches
animation - CSS: Cascading Style Sheets
</div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.
5em; height: 1.
5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d...
...%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m
5%2c4%20l7%2c4%20l7%2c13%20l
5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a
5%2c
5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c
5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2...
...f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m
5%2c4%20l7%2c4%20l7%2c13%20l
5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a
5%2c
5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c
5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m
5%2c4%20l7%2c4%20l7%2c13%20l
5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%2...
...And 3 more matches
<integer> - CSS: Cascading Style Sheets
opera 12.1 supports values up to 21
5-1, ie up to 220-1, and other browsers even higher.
... examples valid integers 12 positive integer (without a leading + sign) +123 positive integer (with a leading + sign) -4
56 negative integer 0 zero +0 zero, with a leading + -0 zero, with a leading - invalid integers 12.0 this is a <number>, not an <integer>, though it represents an integer.
..._
5 special characters are not allowed.
...And 3 more matches
perspective - CSS: Cascading Style Sheets
syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.
5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied.
... <table> <tbody> <tr> <th><code>perspective: 2
50px;</code> </th> <th><code>perspective: 3
50px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers2
50"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> ...
... <div class="face bottom">6</div> </div> </div> </td> <td> <div class="container"> <div class="cube pers3
50"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </div> </div> </td> </tr> <tr> <th><code>perspective:
500px;</code> </th> <th><code>perspective: 6
50px;</code> </th> </tr> <tr> <td> <div class="container"> <div class="cube pers
500"> <div class="face front">1</div> <div class="face back">2</div> <div c...
...And 3 more matches
text-emphasis-style - CSS: Cascading Style Sheets
/* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\2
5b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used.
...the filled dot is '•' (u+2022), and the open dot is '◦' (u+2
5e6).
...the filled circle is '●' (u+2
5cf), and the open circle is '○' (u+2
5cb).
...And 3 more matches
<article>: The Article Contents element - HTML: Hypertext Markup Language
note that the pubdate attribute of <time> is no longer a part of the w3c html
5 standard.
... examples <article class="film_review"> <header> <h2>jurassic park</h2> </header> <section class="main_review"> <p>dinos were great!</p> </section> <section class="user_reviews"> <article class="user_review"> <p>way too scary for me.</p> <footer> <p> posted on <time datetime="201
5-0
5-16 19:00">may 16</time> by lisa.
... </p> </footer> </article> <article class="user_review"> <p>i agree, dinos are my favorite.</p> <footer> <p> posted on <time datetime="201
5-0
5-17 19:00">may 17</time> by tom.
...And 3 more matches
<input type="date"> - HTML: Hypertext Markup Language
for example: var datecontrol = document.queryselector('input[type="date"]'); datecontrol.value = '2017-06-01'; console.log(datecontrol.value); // prints "2017-06-01" console.log(datecontrol.valueasnumber); // prints 149627
5200000, 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).
...the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the key bday to https://example.com — resulting in a url like https://example.com/?bday=19
55-06-08.
... label { display: flex; align-items: center; } span::after { padding-left:
5px; } input:invalid + span::after { content: '✖'; } input:valid+span::after { content: '✓'; } important: client-side form validation is no substitute for validating on the server.
...And 3 more matches
<input type="file"> - HTML: Hypertext Markup Language
note: though originally implemented only for webkit-based browsers, webkitdirectory is also usable in microsoft edge as well as firefox
50 and later.
... note: you can set as well as get the value of htmlinputelement.files in all modern browsers; this was most recently added to firefox, in version
57 (see bug 1384030).
...ipart/form-data"> <div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width:
580px; background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, ...
...And 3 more matches
<input type="text"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
...n is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } this renders like so: if you try to submit the form with no search term entered into it, the browser will show an error message.
... <input type="text" id="uname" name="name" required size="10" placeholder="username" minlength="4" maxlength="8"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers).
...And 3 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
<table> <thead> <tr> <th>student id</th> <th>name</th> <th>major</th> </tr> </thead> <tbody> <tr> <td>37412
55</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>3971244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next.
... table { border: 2px solid #
555; border-collapse: collapse; font: 16px "lucida grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between.
... result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>37412
55</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>
51
51701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2">astr...
...And 3 more matches
accesskey - HTML: Hypertext Markup Language
the way to activate the accesskey depends on the browser and its platform: windows linux mac firefox alt + shift + key on firefox
57 or newer: control + option + key or control + alt + key on firefox 14 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key google chrome alt + shift + key safari n/a opera 1
5+ alt...
... webaim: keyboard accessibility - accesskey specifications specification status comment html
5.2the definition of 'accesskey' in that specification.
... living standard no change from latest w3c html
5.1 spec.
...And 3 more matches
Microformats - HTML: Hypertext Markup Language
dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b
5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks for making this microformats resource</p> <p> <a href="https://quick...
...thoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/0
5/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-0
5-31t14:19:09+0000">31 may 2019</time></a></p> </div> { "items": [ { "type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/0
5/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-0
5-31t14:19:09+0000" ], "content": [ { "html": "hey thanks for making this microformats resource", ...
... "value": "hey thanks for making this microformats resource", "lang": "en" } ], "author": [ { "type": [ "h-card" ], "properties": { "name": [ "greg mcverry" ], "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b
5bc7e6a630/thumb.jpg" ], "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] }, "lang": "en", "value": "greg mcverry" } ] }, "lang": "en" } h-feed the h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts example h-feed <div class="h-feed"> <h1 class="...
...And 3 more matches
List of default Accept values - HTTP
user agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 6
5) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 6
5 and earlier, this value can be modified using the network.http.accept.default parameter.
... (source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 (source) safari
5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */* see ie and the accept header (ieinternals' msdn blog).
... user agent value comment firefox image/webp,*/* (since firefox 6
5) */* (since firefox 47) image/png,image/*;q=0.8,*/*;q=0.
5 (before) this value can be modified using the image.http.accept parameter.
...And 3 more matches
User-Agent - HTTP
header type request header forbidden header name no syntax user-agent: <product> / <product-version> <comment> common format for web browsers: user-agent: mozilla/
5.0 (<system-information>) <platform> (<platform-details>) <extensions> directives <product> a product identifier — its name or development codename.
...the ua string of firefox is broken down into 4 components: mozilla/
5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/
5.0 is the general token that says the browser is mozilla-compatible.
... examples mozilla/
5.0 (windows nt 6.1; win64; x64; rv:47.0) gecko/20100101 firefox/47.0 mozilla/
5.0 (macintosh; intel mac os x x.y; rv:42.0) gecko/20100101 firefox/42.0 chrome ua string the chrome (or chromium/blink-based engines) user agent string is similar to firefox’s.
...And 3 more matches
Closures - JavaScript
here's a slightly more interesting example—a makeadder function: function makeadder(x) { return function(y) { return x + y; }; } var add
5 = makeadder(
5); var add10 = makeadder(10); console.log(add
5(2)); // 7 console.log(add10(2)); // 12 in this example, we have defined a function makeadder(x), that takes a single argument x, and returns a new function.
... add
5 and add10 are both closures.
...in add
5's lexical environment, x is
5, while in the lexical environment for add10, x is 10.
...And 3 more matches
Character classes - JavaScript
for example, /\w/ matches "a" in "apple", "
5" in "$
5.28", and "3" in "3d".
...for example, /\w/ or /[^a-za-z0-9_]/ matches "%" in "
50%".
...equivalent to [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u20
5f\u3000\ufeff].
...And 3 more matches
Text formatting - JavaScript
caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 8
57438 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=8
57438 ).
... '\u00a9' // "©" unicode code point escapes new in ecmascript 201
5.
...(examples should be added to this page after mdn bug 8
57438 is fixed.) see also string.fromcodepoint() or string.prototype.codepointat().
...And 3 more matches
Working with objects - JavaScript
bj.hasownproperty() is used to filter out properties from the object's prototype chain if (obj.hasownproperty(i)) { result += `${objname}.${i} = ${obj[i]}\n`; } } return result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties of an object starting with ecmascript
5, there are three native ways to list/traverse object properties: for...in loops this method traverses all enumerable properties of an object and its prototype chain.
... before ecmascript
5, there was no native way to list all properties of an object.
...if you initially define an object property with an index, such as mycar[
5] = "2
5 mpg", you subsequently refer to the property only as mycar[
5].
...And 3 more matches
Arrow function expressions - JavaScript
this.age++; }, 1000); } var p = new person(); in ecmascript 3/
5, the this issue was fixable by assigning the value in this to a variable that could be closed over.
... this code sample using chrome 81 demonstrates that arrow functions allow the creation of global variables in such situations (both for a concise body and for a normal function body): > f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; } > y vm
51
587:1 uncaught referenceerror: y is not defined at <anonymous>:1:1 (anonymous) @ vm
51
587:1 > f1(3) vm
51
533:1 x: 3, y: 3 4 > y 3 > f2 = x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } > z vm
517
57:1 uncaught referenceerror: z is not defined at <anonymous>:1:1 (anonymous) @ vm
517
57:1...
... > f2(4) vm
51712:1 uncaught referenceerror: z is not defined at f2 (<anonymous>:1:29) at <anonymous>:1:1 f2 @ vm
51712:1 (anonymous) @ vm
51800:1 > f3 = x => (z1 = x + 1) x => (z1 = x + 1) > z1 vm
51891:1 uncaught referenceerror: z1 is not defined at <anonymous>:1:1 (anonymous) @ vm
51891:1 > f3(10) 11 > z1 11 f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.
...And 3 more matches
arguments.callee - JavaScript
warning: the
5th edition of ecmascript (es
5) forbids use of arguments.callee() in strict mode.
... why was arguments.callee removed from es
5 strict mode?
...1 : factorial(n - 1) * n; } [1, 2, 3, 4,
5].map(factorial); but: [1, 2, 3, 4,
5].map(function(n) { return !(n > 1) ?
...And 3 more matches
Array.prototype.reduceRight() - JavaScript
polyfill reduceright was added to the ecma-262 standard in the
5th edition; as such it may not be present in all implementations of the standard.
... // production steps of ecma-262, edition
5, 1
5.4.4.22 // reference: http://es
5.github.io/#x1
5.4.4.22 if ('function' !== typeof array.prototype.reduceright) { array.prototype.reduceright = function(callback /*, initialvalue*/) { 'use strict'; if (null === this || 'undefined' === typeof this) { throw new typeerror('array.prototype.reduce called on null or undefined'); } if ('function' !== typeof callback) { throw new typeerror(callback + ' is not a function'); } var t = object(this), len = t.length >>> 0, k = len - 1, value; if (arguments.length >= 2) { value = arguments[1];...
...mpty array with no initial value'); } value = t[k--]; } for (; k >= 0; k--) { if (k in t) { value = callback(value, t[k], k, t); } } return value; }; } examples sum up all values within an array var sum = [0, 1, 2, 3].reduceright(function(a, b) { return a + b; }); // sum is 6 flatten an array of arrays var flattened = [[0, 1], [2, 3], [4,
5]].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 ...
...And 3 more matches
Array.prototype.filter() - JavaScript
polyfill filter() was added to the ecma-262 standard in the
5th edition.
...this algorithm is exactly equivalent to the one specified in ecma-262,
5th edition, assuming that fn.call evaluates to the original value of function.prototype.bind(), and that array.prototype.push() has its original value.
... function isbigenough(value) { return value >= 10 } let filtered = [12,
5, 8, 130, 44].filter(isbigenough) // filtered is [12, 130, 44] find all prime numbers in an array the following example returns all prime numbers in the array: const array = [-3, -2, -1, 0, 1, 2, 3, 4,
5, 6, 7, 8, 9, 10, 11, 12, 13]; function isprime(num) { for (let i = 2; num > i; i++) { if (num % i == 0) { return false; } } return num > 1; } console.log(array.filter(isp...
...And 3 more matches
Array.prototype.sort() - JavaScript
thus the character formed by the surrogate pair \ud6
55\ude
55 will be sorted before the character \uff3a.
...the following function will sort the array in ascending order (if it doesn't contain infinity and nan): function comparenumbers(a, b) { return a - b; } the sort method can be conveniently used with function expressions: var numbers = [4, 2,
5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // [1, 2, 3, 4,
5] es201
5 provides arrow function expressions with even shorter syntax.
... let numbers = [4, 2,
5, 1, 3]; numbers.sort((a, b) => a - b); console.log(numbers); // [1, 2, 3, 4,
5] objects can be sorted, given the value of one of their properties.
...And 3 more matches
BigInt - JavaScript
bigint is a built-in object that provides a way to represent whole numbers larger than 2
53 - 1, which is the largest number javascript can reliably represent with the number primitive and represented by the number.max_safe_integer constant.
... const thebiggestint = 90071992
54740991n const alsohuge = bigint(90071992
54740991) // ↪ 90071992
54740991n const hugestring = bigint("90071992
54740991") // ↪ 90071992
54740991n const hugehex = bigint("0x1fffffffffffff") // ↪ 90071992
54740991n const hugebin = bigint("0b11111111111111111111111111111111111111111111111111111") // ↪ 90071992
54740991n bigint is similar to number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in math object and cannot be mixed with instances of number in operations; they must be coerced to the same type.
... const previousmaxsafe = bigint(number.max_safe_integer) // ↪ 90071992
54740991n const maxplusone = previousmaxsafe + 1n // ↪ 90071992
54740992n const thefuture = previousmaxsafe + 2n // ↪ 90071992
54740993n, this works now!
...And 3 more matches
Date.prototype.getYear() - JavaScript
for example, if the year is 18
56, the value returned is 18
56.
... examples years between 1900 and 1999 the second statement assigns the value 9
5 to the variable year.
... var xmas = new date('december 2
5, 199
5 23:1
5:00'); var year = xmas.getyear(); // returns 9
5 years above 1999 the second statement assigns the value 100 to the variable year.
...And 3 more matches
Function.prototype.apply() - JavaScript
starting with ecmascript
5 these arguments can be a generic array-like object instead of an array.
... since ecmascript
5th edition, you can also use any kind of object which is array-like.
... // min/max number in an array const numbers = [
5, 6, 2, 3, 7]; // using math.min/math.max apply let max = math.max.apply(null, numbers); // this about equal to math.max(numbers[0], ...) // or math.max(
5, 6, ...) let min = math.min.apply(null, numbers); // vs.
...And 3 more matches
Function.prototype.bind() - JavaScript
description the bind() function creates a new bound function, which is an exotic function object (a term from ecmascript 201
5) that wraps the original function object.
... // does not work with `new (funca.bind(thisarg, args))` if (!function.prototype.bind) (function(){ var slice = array.prototype.slice; function.prototype.bind = function() { var thatfunc = this, thatarg = arguments[0]; var args = slice.call(arguments, 1); if (typeof thatfunc !== 'function') { // closest thing possible to the ecmascript
5 // internal iscallable function throw new typeerror('function.prototype.bind - ' + 'what is trying to be bound is not callable'); } return function(){ var funcargs = args.concat(slice.call(arguments)) return thatfunc.apply(thatarg, funcargs); }; }; })(); you can partially work around this by inserting the following code at the beginning of your ...
... // yes, it does work with `new (funca.bind(thisarg, args))` if (!function.prototype.bind) (function(){ var arrayprototypeslice = array.prototype.slice; function.prototype.bind = function(otherthis) { if (typeof this !== 'function') { // closest thing possible to the ecmascript
5 // internal iscallable function throw new typeerror('function.prototype.bind - what is trying to be bound is not callable'); } var baseargs= arrayprototypeslice.call(arguments, 1), baseargslength = baseargs.length, ftobind = this, fnop = function() {}, fbound = function() { baseargs.length = baseargslength; // reset to default bas...
...And 3 more matches
Function.name - JavaScript
property attributes of function.name writable no enumerable no configurable yes note that in non-standard, pre-es201
5 implementations the configurable attribute was false as well.
... (function() {}).name; // "" (() => {}).name; // "" inferred function names variables and methods can infer the name of an anonymous function from its syntactic position (new in ecmascript 201
5).
... let o = { get foo(){}, set foo(x){} }; var descriptor = object.getownpropertydescriptor(o, "foo"); descriptor.get.name; // "get foo" descriptor.set.name; // "set foo"; function names in classes you can use obj.constructor.name to check the "class" of an object (but be sure to read the warnings below): function foo() {} // es201
5 syntax: class foo {} var fooinstance = new foo(); console.log(fooinstance.constructor.name); // logs "foo" warning: the script interpreter will set the built-in function.name property only if a function does not have an own property called name (see section 9.2.11 of the ecmascript201
5 language specification).
...And 3 more matches
Intl.NumberFormat() constructor - JavaScript
"percent" for percent formatting "unit" for unit formatting unit the unit to use in unit formatting, possible values are core unit identifiers, defined in uts #3
5, part 2, section 6.
... let amount = 3
500; console.log(new intl.numberformat().format(amount)); // → '3,
500' if in us english locale decimal and percent formatting let amount = 3
500; new intl.numberformat('en-us', {style: 'decimal'}).format(amount); // → '3,
500' new intl.numberformat('en-us', {style: 'percent'}).format(amount); // → '3
50,000%' unit formatting if the style is 'unit', a unit property must be provided.
... let amount = 3
500; new intl.numberformat('en-us', {style: 'unit', unit: 'liter'}).format(amount); // → '3,
500 l' new intl.numberformat('en-us', {style: 'unit', unit: 'liter', unitdisplay: 'long'}).format(amount); // → '3,
500 liters' currency formatting if the style is 'currency', a currency property must be provided.
...And 3 more matches
JSON.stringify() - JavaScript
examples using json.stringify json.stringify({}); // '{}' json.stringify(true); // 'true' json.stringify('foo'); // '"foo"' json.stringify([1, 'false', false]); // '[1,"false",false]' json.stringify([nan, null, infinity]); // '[null,null,null]' json.stringify({ x:
5 }); // '{"x":
5}' json.stringify(new date(2006, 0, 2, 1
5, 4,
5)) // '"2006-01-02t1
5:04:0
5.000z"' json.stringify({ x:
5, y: 6 }); // '{"x":
5,"y":6}' json.stringify([new number(3), new string('false'), new boolean(false)]); // '[3,"false",false]' // string-keyed array elements are not enumerable and make no sense in json let a = ['foo', 'bar']; a['baz'] = 'quux'; // a: [ 0: 'foo...
...}]' // typedarray json.stringify([new int8array([1]), new int16array([1]), new int32array([1])]); // '[{"0":1},{"0":1},{"0":1}]' json.stringify([new uint8array([1]), new uint8clampedarray([1]), new uint16array([1]), new uint32array([1])]); // '[{"0":1},{"0":1},{"0":1},{"0":1}]' json.stringify([new float32array([1]), new float64array([1])]); // '[{"0":1},{"0":1}]' // tojson() json.stringify({ x:
5, y: 6, tojson(){ return this.x + this.y; } }); // '11' // symbols: json.stringify({ x: undefined, y: object, z: symbol('') }); // '{}' json.stringify({ [symbol('foo')]: 'foo' }); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, [symbol.for('foo')]); // '{}' json.stringify({ [symbol.for('foo')]: 'foo' }, function(k, v) { if (typeof k === 'symbol') { return 'a symbol'; } }); // undef...
... example replacer, as a function function replacer(key, value) { // filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'mozilla', model: 'box', week: 4
5, transport: 'car', month: 7}; json.stringify(foo, replacer); // '{"week":4
5,"month":7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the resulting json string.
...And 3 more matches
Math.log1p() - JavaScript
the double floats used in js give you about 1
5 digits of precision.
... 1 + 1e-1
5 = 1.000000000000001, but 1 + 1e-16 = 1.000000000000000 and therefore exactly 1.0 in that arithmetic, because digits past 1
5 are rounded off.
... if you calculate math.log(1 + 1.1111111111e-1
5) you should get an answer close to 1.1111111111e-1
5.
...And 3 more matches
Number.prototype.toLocaleString() - JavaScript
var number = 3
500; console.log(number.tolocalestring()); // displays "3,
500" if in u.s.
...to check for support in es
5.1 and later implementations, the requirement that illegal language tags are rejected with a rangeerror exception can be used: function tolocalestringsupportslocales() { var number = 0; try { number.tolocalestring('i'); } catch (e) { return e.name === 'rangeerror'; } return false; } prior to es
5.1, implementations were not required to throw a range error exception if tolocalestring is called with arguments.
... a check that works in all hosts, including those supporting ecma-262 prior to ed
5.1, is to test for the features specified in ecma-402 that are required to support regional options for number.prototype.tolocalestring directly: function tolocalestringsupportsoptions() { return !!(typeof intl == 'object' && intl && typeof intl.numberformat == 'function'); } this tests for a global intl object, checks that it's not null and that it has a numberformat property that is a function.
...And 3 more matches
Operator precedence - JavaScript
assignment operators are right-associative, so you can write: a = b =
5; // same as writing a = (b =
5); with the expected result that a and b get the value
5.
...first, b is set to
5.
... then the a is also set to
5, the return value of b =
5, aka right operand of the assignment.
...And 3 more matches
this - JavaScript
es
5 introduced the bind() method to set the value of a function's this regardless of how it's called, and es201
5 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).
... class base {} class good extends base {} class alsogood extends base { constructor() { return {a:
5}; } } class bad extends base { constructor() {} } new good(); new alsogood(); new bad(); // referenceerror examples this in function contexts // an object can be passed as the first argument to call or apply and this will be bound to it.
...ject whatsthis.call(obj); // 'custom' as this in the function is set to obj whatsthis.apply(obj); // 'custom' as this in the function is set to obj this and object conversion function add(c, d) { return this.a + this.b + c + d; } var o = {a: 1, b: 3}; // the first parameter is the object to use as // 'this', subsequent parameters are passed as // arguments in the function call add.call(o,
5, 7); // 16 // the first parameter is the object to use as // 'this', the second is an array whose // members are used as the arguments in the function call add.apply(o, [10, 20]); // 34 note that in non–strict mode, with call and apply, if the value passed as this is not an object, an attempt will be made to convert it to an object.
...And 3 more matches
for...of - JavaScript
const iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31 iterating over a string const iterable = 'boo'; for (const value of iterable) { console.log(value); } // "b" // "o" // "o" iterating over a typedarray const iterable = new uint8array([0x00, 0xff]); for (const value of iterable) { console.log(value); } // 0 // 2
55 iterating over a map const iterable = new map([['a', 1], ['b', 2], ['c', 3]]); for (const entry of iterable) { console.log(entry); } // ['a', 1] // ['b', 2] // ['c', 3] for (const [key, value] of iterable) { console.log(value); } // 1 // 2 // 3 iterating over a set const iterable = new set([1, 1, 2, 2, 3, 3]); for (const value of iterable) { console.log(value); } // 1 // 2 // 3 ...
... object.prototype.objcustom = function() {}; array.prototype.arrcustom = function() {}; const iterable = [3,
5, 7]; iterable.foo = 'hello'; for (const i in iterable) { console.log(i); // logs 0, 1, 2, "foo", "arrcustom", "objcustom" } for (const i in iterable) { if (iterable.hasownproperty(i)) { console.log(i); // logs 0, 1, 2, "foo" } } for (const i of iterable) { console.log(i); // logs 3,
5, 7 } let us look into the above code step by step.
... object.prototype.objcustom = function() {}; array.prototype.arrcustom = function() {}; const iterable = [3,
5, 7]; iterable.foo = 'hello'; every object will inherit the objcustom property and every object that is an array will inherit the arrcustom property since these properties have been added to object.prototype and array.prototype, respectively.
...And 3 more matches
throw - JavaScript
ception'; } function getmonthname(mo) { mo = mo - 1; // adjust month number for array index (1 = jan, 12 = dec) var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; if (months[mo] !== undefined) { return months[mo]; } else { throw new userexception('invalidmonthno'); } } try { // statements to try var mymonth = 1
5; // 1
5 is out of bound to raise the exception var monthname = getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an input string for a u.s.
... * * accepted formats for a zip code are: * 1234
5 * 1234
5-6789 * 1234
56789 * 1234
5 6789 * * if the argument passed to the zipcode constructor does not * conform to one of these patterns, an exception is thrown.
... */ function zipcode(zip) { zip = new string(zip); pattern = /[0-9]{
5}([- ]?[0-9]{4})?/; if (pattern.test(zip)) { // zip code value will be the first match in the string this.value = zip.match(pattern)[0]; this.valueof = function() { return this.value }; this.tostring = function() { return string(this.value) }; } else { throw new zipcodeformatexception(zip); } } function zipcodeformatexception(value) { this.value = value; this.message = 'does not conform to the expected format for a zip code'; this.tostring = function() { return this.value + this.message; }; } /* * this could be in a script that validates address data * for us addresses.
...And 3 more matches
Authoring MathML - MathML
note that by design, mathml is well-integrated in html
5 and in particular you can use usual web features like css, dom, javascript or svg.
... using mathml mathml in html pages you can use presentation mathml inside html
5 documents: <!doctype html> <html> <head> <title>mathml in html
5</title> </head> <body> <h1>mathml in html
5</h1> <p> square root of two: <math> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> content mathml is not supported by browsers.
...="http://www.w3.org/1999/xhtml"> <head> <title>xhtml+mathml example</title> </head> <body> <h1>xhtml+mathml example</h1> <p> square root of two: <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> mathml in email and instant messaging clients modern mail clients may send and receive emails in the html
5 format and thus can use mathml expressions.
...And 3 more matches
Digital audio concepts - Web media technologies
therefore, a typical three-minute song requires about 34.
5 mb of memory.
... monophonic audio has one channel, stereo sound has two channels,
5.1 surround sound has 6 channels (five standard and one lfe), and so forth.
...the size of an audio frame is calculated by multiplying the sample size in bytes by the number of channels, so a single frame of stereo 16-bit audio is 4 bytes long and a single frame of
5.1 floating-point audio is 24 (4 bytes per sample multiplied by 6 channels).
...And 3 more matches
Media container formats (file types) - Web media technologies
codec name (short) full codec name browser compatibility1 3gp third generation partnership firefox for android adts audio data transport stream firefox2 flac free lossless audio codec chrome
56, edge 16, firefox
51, safari 11 mpeg / mpeg-2 moving picture experts group (1 and 2) — mpeg-4 (mp4) moving picture experts group 4 chrome 3, edge 12, firefox, internet explorer 9, opera 24, safari 3.1 ogg ogg chrome 3, firefox 3.
5, edge 173 (desktop only), internet explorer 9, opera 10.
50 quicktime (mov) apple quicktime movie only old...
...for example, firefox 3.
5 and 3.6 support ogg, but not webm.
...through quicktime, mac applications (including web browsers, through the quicktime plugin or direct quicktime integration) were able to read and write audio formats including aac, aiff, mp3, pcm, and qualcomm purevoice; and video formats including avi, dv, pixlet, prores, flac, cinepak, 3gp, h.261 through h.26
5, mjpeg, mpeg-1 and mpeg-4 part 2, sorenson, and many more.
...And 3 more matches
Codecs used by WebRTC - Web media technologies
mandatory video codecs codec name profile(s) browser compatibility vp8 — chrome, edge, firefox, safari (12.1+) avc / h.264 constrained baseline (cb) chrome (
52+), edge, firefox[1], safari [1] firefox for android 68 and later do not support avc (h.264) anymore.
...see page 4
5 of rfc 6184 for details.
...the rtp payload format for opus is found in rfc 7
587.
...And 3 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html
5 <canvas>), and save them to a gallery.
...this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { x-card:nth-child(1), x-card:nth-child(2) { width:
50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card:nth-child(3) img { width: 20%; } } so here we're altering the widths of the columns and removing the float of the third column (and adding clearing to guard against any float funny business).
... x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.
5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom:
5.9rem; } x-card:nth-child(1) button { font-size: 7vw; } x-card:nth-child(2) button { font-size: 7vw; } the next rules do some sizing on the buttons inside the first two cards, and give all card contents a t...
...And 3 more matches
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="
50,0 21,90 98,3
5 2,3
5 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... --> <polygon fill-rule="evenodd" stroke="red" points="1
50,0 121,90 198,3
5 102,3
5 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero animatable yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray.
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="
50,0 21,90 98,3
5 2,3
5 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 h-90 z m130,20 h
50 v
50 h-
50 z"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segm...
...And 3 more matches
SVG animation with SMIL - SVG: Scalable Vector Graphics
although chrome 4
5 deprecated smil in favor of css animations and web animations, the chrome developers have since suspended that deprecation.
... dur the duration of the animation (for example, write '
5s' for
5 seconds).
... <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="
50" r="1
5" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="
500" dur="
5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes.
...And 3 more matches
Basic Transformations - SVG: Scalable Vector Graphics
<svg width="40" height="
50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0).
...use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(4
5)" /> </svg> this example shows a square that is rotated by 4
5 degrees.
... <svg width="40" height="
50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(4
5)" /> </svg> this example shows again the small square shown above that this time is also rotated by 4
5 degrees.
...And 3 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
you can use the same css color naming schemes that you use in html, whether that's color names (that is red), rgb values (that is rgb(2
55,0,0)), hex values, rgba values, etc.
... <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.
5" stroke-opacity="0.8"/> in addition, you can specify the opacity of either the fill or stroke separately in svg.
... <?xml version="1.0" standalone="no"?> <svg width="200" height="1
50" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="m 10 7
5 q
50 10 100 7
5 t 190 7
5" stroke="black" stroke-linecap="round" stroke-dasharray="
5,10,
5" fill="none"/> <path d="m 10 7
5 l 190 7
5" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="
5,
5" fill="none"/> </svg> the stroke-dasharray attribute takes a series of comma-separated numbers as its argument.
...And 3 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="2
50" viewbox="0 0 200 8
5" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> ...
... <!-- litpaint --> <fespecularlighting in="blur" surfacescale="
5" specularconstant=".7
5" specularexponent="20" lighting-color="#bbbbbb" result="specout"> <fepointlight x="-
5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="specout" in2="sourcealpha" operator="in" result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" s...
...troke-width="10" d="m
50,66 c-
50,0 -
50,-60 0,-60 h100 c
50,0
50,60 0,60z" /> <path fill="#d90000" d="m60,
56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="4
5" font-family="verdana" > <text x="
52" y="
52">svg</text> </g> </g> </svg> step 1 <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <fegaussianblur> takes in "sourcealpha", which is the alpha channel of the source graphic, applies a blur of 4, and stores the result in a temporary buffer named "blur".
...And 3 more matches
lang/functional - Archive of obsolete content
let { invoke } = require("sdk/lang/functional"); invoke(sum, [1,2,3,4,
5], null); // 1
5 function sum () { return array.slice(arguments).reduce(function (a, b) { return a + b; }); } parameters callee : function function to invoke.
... let { partial } = require("sdk/lang/functional"); let add = function add (x, y) { return x + y; } let addone = partial(add, 1); addone(
5); // 6 addone(10); // 11 partial(add, addone(20))(2); // 23 parameters fn : function function on which partial application is to be performed.
... let { identity } = require("sdk/lang/functional"); let x =
5; identity(x); //
5 parameters value : mixed the value to be returned.
...And 2 more matches
Forms related code snippets - Archive of obsolete content
666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-radius:
5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius:
5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: ...
...999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly class="date-picker" name="date-to" /> </p> </form> </body> </html> note: the current implementation of const (constant statement) is not part of ecmascript
5.
...class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td class="zdp-empty-cell"> </td> <td id="zdp-day-1-1" class="zdp-active-cell">1</td> <td id="zdp-day-1-2" class="zdp-active-cell">2</td> </tr> <tr> <td id="zdp-day-1-3" class="zdp-active-cell">3</td> <td id="zdp-day-1-4" class="zdp-active-cell">4</td> <td id="zdp-day-1-
5" class="zdp-active-cell">
5</td> <td id="zdp-day-1-6" class="zdp-active-cell">6</td> <td id="zdp-day-1-7" class="zdp-active-cell">7</td> <td id="zdp-day-1-8" class="zdp-active-cell">8</td> <td id="zdp-day-1-9" class="zdp-active-cell">9</td> </tr> <tr> <td id="zdp-day-1-10" class="zdp-active-cell">10</td> <td id="zdp-day-1-11" class="zdp-active-cell">11</...
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
le apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web browser uses most of the firefox
55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.
5m downloads and ~40...
...ercial open source business intelligence uses xul and mozilla rhino persevere tools for persistence and distributed computing uses mozilla rhino phloneme publishing tool for vocab collab phped php editor embedded mozilla browser in product pidgin im client uses nss plain old webserver extension and standalone webserver
5,000 users and 30,000 downloads poe::xul framework for remote xul application in poe postbox email client started as a fork of thunderbird printgroove jt suite print process software uses xulrunner and spidermonkey prism (was webrunner) single-site browser xulrunner application pro/engineer wildfire cadcam product ...
...roduct uses nss regex renamer tool to rename files sameplace im client scenari platform application suite for designing publishing chains script it android development platform uses mozilla rhino, develop directly on your android device seamonkey suite a volunteer community legally backed by mozilla foundation with 2.
5 million downloads secure browser browser that uses virtualization created by dell sept cms for lemonde.fr web site more information here (in english) and here (in french) skyfire mobile browser sipear im client smartreport supervision appliance network monitoring and performance management smartreport is an appliance cre...
...And 2 more matches
MMgc - Archive of obsolete content
sample stack trace: xmlclass.cpp:391 toplevel.cpp:164 toplevel.cpp:
507 interpreter.cpp:1098 interpreter.cpp:20 methodenv.cpp:47 allocation traces, deletion traces etc.
...the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% - 301
5 kb
514 items, avg 6007b 98.9% - 2983 kb -
512 items - poolobject.cpp:29 abcparser.cpp:948 … 0.8% - 24 kb - 1 items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 13.2% - 1602 kb 1
567
5 items, avg 104b 6
5.6% - 10
51 kb - 14397 items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb - 10439 items - avmcore.cpp:2300 abcparser.cpp:1077 … 6.
5% - ...
... output looks like this: [mem] ------- gross stats ----- [mem] private
5877 (23.0m) 100% [mem] mmgc
5792 (22.6m) 98% [mem] unmanaged 13 (
52k) 0% [mem] managed 2
596 (10.1m) 44% [mem] free 3081 (12.0m)
52% [mem] jit 0 (0k) 0% [mem] other 8
5 (340k) 1% [mem] bytes (interal fragmentation) 2
527 (9.9m) 96% [mem] managed bytes 2
520 (9.8m) 97% [mem] unmanaged bytes 7 (28k)
53% [mem] -------- gross stats end ----- numbers are in pages (with m and k in parens).
...And 2 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
see bug 2
5537 for a lengthy, sometimes passionate discussion of gecko's behavior in this regard.
...a quick check of various user agents showed that title attribute contents were displayed as a "tooltip" in: gecko-based browsers (mozilla firefox, netscape 6+, etc.) internet explorer
5.
5+/win internet explorer
5.x/mac safari opera 6.x+ of these, only ie/win treated alt text as a "tooltip"; the other browsers did not reproduce this behavior.
...bug 2
5537#c73, which is to run a proxy server that rewrites html source on the fly, as it is sent to the user.
...And 2 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
html
5 has a more general feature called "data blocks" that can carry almost any textual data, including xml.
...for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.2
5</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(orde...
...rsource, "application/xml"); the html
5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...And 2 more matches
JavaScript crypto - Archive of obsolete content
if you choose to implement these flags, your module must supply the following additional functions for each flag: pkcs11_mech_flag: must support ckm_rsa_pkcs and ckm_rsa_x_
509 and the following functions: c_wrapkey, c_encrypt, c_sign, c_decrypt, c_unwrapkey, c_verifyrecover, c_verify, c_generatekeypair (2048, 1024,
512) size pkcs11_mech_dsa_flag: must support ckm_dsa and the following functions: c_sign, c_verify, c_generatekeypair pkcs11_mech_rc2_flag: must support ckm_rc2_cbc and ckm_rc2_ecb and the following functions: c_generatekey, c_encrypt, c_decrypt, c_wrapk...
...crypt, c_decrypt, c_wrapkey, c_unwrapkey pkcs11_mech_des_flag: must support ckm_cpmf_cbc, ckm_des_cbc, ckm_des3_cbc, ckm_cpmf_ecb, ckm_des_ecb, ckm_des3_ecb and the following functions: c_generatekey, c_encrypt, c_decrypt, c_wrapkey, c_unwrapkey pkcs11_mech_dh_flag: must support ckm_dh_pkcs_derive and ckm_dh_key_pair_gen and the following functions: c_derivekey, c_generatekeypair pkcs11_mech_md
5_flag: hashing must be able to function without authentication.
... pkcs11_mech_rsa_flag = 0x1<<0; pkcs11_mech_dsa_flag = 0x1<<1; pkcs11_mech_rc2_flag = 0x1<<2; pkcs11_mech_rc4_flag = 0x1<<3; pkcs11_mech_des_flag = 0x1<<4; pkcs11_mech_dh_flag = 0x1<<
5; //diffie-hellman pkcs11_mech_skipjack_flag = 0x1<<6; //skipjack algorithm as in fortezza cards pkcs11_mech_rc
5_flag = 0x1<<7; pkcs11_mech_sha1_flag = 0x1<<8; pkcs11_mech_md
5_flag = 0x1<<9; pkcs11_mech_md2_flag = 0x1<<10; pkcs11_mech_random_flag = 0x1<<27; //random number generator pkcs11_pub_readable_cert_flag = 0x1<<28; //stored certs c...
...And 2 more matches
Running Tamarin acceptance tests - Archive of obsolete content
rt asc=/users/build/hg/tamarin-redux/utils/asc.jar $ export builtinabc=/users/build/hg/tamarin-redux/generated/builtin.abc $ export shellabc=/users/build/hg/tamarin-redux/generated/shell_toplevel.abc $ export avm=/users/build/hg/tamarin-redux/objdir-release/shell/avmshell $ python runtests.py tamarin tests started: 2010-09-28 10:37:06.410676 current configuration: x64-mac-tvm-release avm version:
5260:6d1899261bac executing 2
532 tests against vm: /users/build/hg/builds/
5260-6d1899261bac/mac/avmshell_64 2
532 running abcasm/abs_helper.as skipping...
... reason: 2
531 running abcasm/adhoc.abs skipping...
... reason: inconsistencies in different debug output, need to implement regex matching of diffs 2
527 running abcasm/branchtocommon.abs 2
530 running abcasm/arithmetic.abs 2
529 running abcasm/bkpt.abs 2
528 running abcasm/bkptline.abs 2
526 running abcasm/bug_476
556.abs 2
524 running abcasm/bug_4910
56.abs ...
...And 2 more matches
Running Tamarin performance tests - Archive of obsolete content
$ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 13:
56:
54.820920 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe test avm sunspider/access-binary-trees.as 82.0 sunspider/access-fannkuch.as 1
52.0 sunspider/access-nbody.as 173.0 sunspider/access-nsieve.as 6
5.0 sunspider/bitops-3bit-bits-in-byte.as ...
... 13.0 sunspider/bitops-bits-in-byte.as 36.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-07-22 14:03:
51.9
57381 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe avm2: c:/dev/tamarin-tracing2/bld/shell/avmshell.exe test avm avm2 %sp sunspider/access-binary-trees.as 82.0 80.0 2.
5 sunspider/access-fannkuch.as 1
53.0 1
55.0 -1.3 sunspider/access-nbody.as 176.0 178.0 -1.1 sunspider/access-nsieve.as 6
5.0 68.0 -4.4 sunspider/bitops-3bit-bits-in-byte.as 12.0 13.0 -7.7 sunspider/bitops-bits-in-byte.as ...
...if more than 2 repetitions are specified the 9
5% percentile confidence rating is calculated.
...And 2 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
often, the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" width="
50" height="
50" pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine.
...the initinstall method is polymorphic, but here is a recommended invocation mechanism: initinstall("my plugin software", "@myplugin.com/myplugin,version=2.
5", "2.
5.0.0"); in the code snippet above, the initinstall method is invoked with three parameters: a string for the name of the application a string signifying the plugin identifier associated with the plugin.
...here is an example: var plid = "myplugin.plug/version=6.
5"; err = initinstall(software_name, plid, version); if (err != 0) { // install may have failed because of n6 and = // replace plid with a simple string err = initinstall(software_name, "mypluginstring", version); if (err != 0) cancelinstall(err); } note that above, the plid contains an "=" and in case the xpi package is running on browsers that treat "=" as an illegal token, the workaround...
...And 2 more matches
Using Spacers - Archive of obsolete content
for example, if a box is 200 pixels wide and contains two flexible buttons, the first
50 pixels and the other 90 pixels, there will be 60 pixels of space left over.
...ample 1: <button label="find" flex="1"/> <button label="cancel" flex="1"/> example 2: <button label="find" flex="10"/> <button label="cancel" flex="1"/> example 3: <button label="find" flex="2"/> <button label="replace"/> <button label="cancel" flex="4"/> example 4: <button label="find" flex="2"/> <button label="replace" flex="2"/> <button label="cancel" flex="3"/> example
5: <html:div> <button label="find" flex="2"/> <button label="replace" flex="2"/> </html:div> example 6: <button label="find" flex="14
5"/> <button label="replace" flex="14
5"/> example 1 in this case the flexibility is divided up evenly between both buttons.
...both the find and replace buttons will be the same size but the cancel button will be somewhat larger (
50% larger to be exact).
...And 2 more matches
2006-10-06 - Archive of obsolete content
adam gutherie replied that cbeard's blog post from nov 200
5 is as close to a roadmap as exists right now and agrees that needs to be done about this.
... re: plan to hold trunk closed for lack of talkback dbaron mentioned that maybe trunk should be closed because of lack of talkbacks received ( bug 3
5483
5 is suspected).
... pal-moz offers a solution to bug 3
5483
5.
...And 2 more matches
E4X - Archive of obsolete content
e4x is standardized by ecma international in ecma-3
57 standard (currently in its second edition, december 200
5).
... note: in gecko 1.8 based browsers such as firefox 1.
5, e4x is already partially enabled for web page authors.
... someone verify the above known bugs and limitations it is not currently possible to access a dom object through e4x (bug 270
553).
...And 2 more matches
Array comprehensions - Archive of obsolete content
the array comprehensions syntax is non-standard and removed starting with firefox
58.
...obsolete since gecko
58 (firefox
58 / thunderbird
58 / seamonkey 2.
55)this feature is obsolete.
... examples simple array comprehensions [for (i of [1, 2, 3]) i * i ]; // [1, 4, 9] var abc = ['a', 'b', 'c']; [for (letters of abc) letters.tolowercase()]; // ["a", "b", "c"] array comprehensions with if statement var years = [19
54, 1974, 1990, 2006, 2010, 2014]; [for (year of years) if (year > 2000) year]; // [2006, 2010, 2014] [for (year of years) if (year > 2000) if (year < 2010) year]; // [2006], the same as below: [for (year of years) if (year > 2000 && year < 2010) year]; // [2006] array comprehensions compared to map and filter an easy way to understand array comprehension syntax, is to compare it with the array ...
...And 2 more matches
New in JavaScript 1.3 - Archive of obsolete content
the following is a changelog for javascript from netscape navigator 4.0 to 4.
5.
...netscape navigator 4.
5 was released on october 19, 1998.
... javascript versions netscape communicator and navigator 4.06 and 4.
5 executes javascript language versions up to 1.3.
...And 2 more matches
Player paddle and controls - Game development
rendering the paddle, with physics next up, we will init our paddle by adding the following add.sprite() call inside the create() function — add it right at the bottom: paddle = game.add.sprite(game.world.width*0.
5, game.world.height-
5, 'paddle'); we can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.
5 will be right in the middle of the screen.
...add the following line below the previous new one: paddle.anchor.set(0.
5,1); the paddle is now positioned right where we want it to be.
...update the previous line as follows: paddle.x = game.input.x || game.world.width*0.
5; if you haven't already done so, reload your index.html and try it out!
...And 2 more matches
Plug-in Development Overview - Gecko Plugin API Reference
for more information about mime types, see these mime rfcs: rfc-204
5: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...see bug 12
5469.
...for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string
5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in.
...And 2 more matches
What is CSS? - Learn web development
for example "i want the main heading on my page to be shown as large red text." the following code shows a very simple css rule that would achieve the styling described above: h1 { color: red; font-size:
5em; } the rule opens with a selector .
... h1 { color: red; font-size:
5em; } p { color: black; } you will find that you quickly learn some values, whereas others you will need to look up.
...see bug 1
536148.ie full support 3opera full support 3.
5safari full support 1webview android full support 1chrome android full support 18firefox android full support ...
...And 2 more matches
HTML Cheatsheet - Learn web development
usage code snippet result a simple link <a href="https://realityripple.com/">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="2
5" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</span> that we will work on differently </p> span its used to differentiat...
... suggesting a line break it is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line it is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line date in readable form it is used to format the date legibly for the user, such as: <time datetime="2020-0
5-24" pubdate>published on 23-0
5-2020</time> it is used to format the date legibly for the user, such as: published on 23-0
5-2020 text displayed in code format <p>this text is in normal format.</p> <code>this text is in code format.</code> <pre>this text is in predefined format.</pre> this text is in normal format.
... embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">your browser does not support the html
5 audio element.</audio> your browser does not support the html
5 audio element.
...And 2 more matches
What’s in the head? Metadata in HTML - Learn web development
for example, your page could handle english and japanese just fine: if you set your character encoding to iso-88
59-1, for example (the character set for the latin alphabet), your page rendering may appear all messed up: note: some browsers (e.g.
... active learning: experiment with character encoding to try this out, revisit the simple html template you obtained in the previous section on <title> (the title-example.html page), try changing the meta charset value to iso-88
59-1, and add the japanese to your page.
...in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html
5 apps.
...And 2 more matches
Adding vector graphics to the Web - Learn web development
colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="1
50" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode.
... here's a quick review: <iframe src="triangle.svg" width="
500" height="
500" sandbox> <img src="triangle.png" alt="triangle with three unequal sides" /> </iframe> this is definitely not the best method to choose: cons iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
... playable code <h2>live output</h2> <div class="output" style="min-height:
50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 9
5%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="1
50" fill="blue" stroke="black" /> <polygon points="120,0 ...
...And 2 more matches
Video and audio content - Learn web development
fortunately, a few years later the html
5 specification had such features added, with the <video> and <audio> elements, and some shiny new javascript apis for controlling them.
...a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html
5 video.
...take a look at the following updated example (try it live here, also): <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html
5 video.
...And 2 more matches
Getting started with Svelte - Learn web development
it will start a local server at localhost:
5000.
...initially it's just an empty html
5 page that loads the css files and js bundles generated by svelte.
... you can see this in action by opening localhost:
5000 in a new browser tab, right/ctrl-clicking on the hello world!
...And 2 more matches
Working with Svelte stores - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a
5a4494366b179c8739
5940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events.
... content: <script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </div> {/if} <style> div { position: fixed; cursor: pointer; margin-right: 1.
5rem; margin-left: 1.
5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #
56
56
56; color: #fff; font-size: 0.87
5rem; font-weight: 700; padding: 0.
5rem 1.4rem; font-size: 1.
5rem; z-index: 100; opacity: 9
5%; } div p { color: #fff; } div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right:...
... 0.
5rem; } </style> let's walk through this piece of code in detail.
...And 2 more matches
Handling common JavaScript problems - Learn web development
the error is now being thrown at line
51.
... click on line number
51 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it).
... now refresh the page (cmd/ctrl + r) — the browser will pause execution of the code at line
51.
...And 2 more matches
Simple Sunbird build
install visual c++ 200
5 or 2008.
...after that all should be well.) open a shell window by running: c:\mozilla-build\start-msvcx.bat (where x is 8 for vs 200
5, and 9 for vs 2008).
... building sunbird building sunbird requires at least 2.
5 gb of disk space,
500 mb of ram, and lots of available swap space.
...And 2 more matches
HTTP Cache
unimplemented or underimplemented functionality: asyncevictstorage (bug 977766), asyncvisitstorage (bug 9160
52) nsicacheentryopencallback //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentryopencallback.idl the result of nsicachestorage.asyncopenuri is always and only sent to callbacks on this interface.
...the form is following (currently pending in bug 968
593): a,b,i1009,p, regular expression: (.([^,]+)?,)* the first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ',' a - when present the scope is belonging to an anonymous load b - when present the scope is in browser element load i - when present must have a decimal integer value that represents an app id the scope belongs to, otherwise there i...
...current behavior is simpler and causes a serious memory consumption regression (bug 97
5367).
...And 2 more matches
Localization prerequisites
tools a recent posix shell python 2.
5 or newer.
... perl
5.6 or higher older perl versions may work if you upgrade file::spec to version 0.8 gnu make 3.79.1 or higher.
... autoconf-2.13 - autoconf 2.
5x will not work.
...And 2 more matches
Extras
<mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="1
5px" depth="1
5px" voffset="-1
5px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="
50%" cy="
50%" r="
50%" fx="
50%" fy="
50%"> <stop offset="0%" style="stop-color:rgb(2
55,2
55,2
55); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(2
55,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g t...
...ransform="translate(1
5,1
5)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="360" to="0" dur="1
5s" repeatcount="indefinite"/> <g transform="translate(-1
5, -1
5)"> <path fill="url(#radgrad1)" d="m 1
5 0 l 20 10 l 30 1
5 l 20 20 l 1
5 30 l 10 20 l 0 1
5 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="1
5px" height="1
5px"> <defs> <radialgradient id="radgrad2" cx="
50%" cy="
50%" r="
50%" fx="
50%" fy="
50%"> <stop offset="0%" style="st...
...op-color:rgb(2
55,2
55,2
55); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,2
55); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,
5 l
5,
5 l0,4 l
5,2 z" begin="0s" dur="0.
5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="
5px" cx="
5px" cy="
5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="2
50px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,2
55);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,2
55,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2...
...And 2 more matches
Fonts for Mozilla's MathML engine
installation instructions windows install the latin modern math and stix fonts as follows: download latinmodern-math-19
59.zip.
... open the zip archive, move inside the latinmodern-math-19
59 directory and then inside the otf directory.
... os x install the latin modern math and stix fonts as follows: download latinmodern-math-19
59.zip.
...And 2 more matches
MathML Demo: <mo> - operator, fence, separator, or accent
( 1 2 3 4
5 ) + 1 given the symmetric restriction on fences, it is very difficult for latex to produce the product of a fenced row vector and a fenced column vector as shown below.
...| +
5 | + 6 | + 7 | + 8 | .
...| +
5 | + 6 | + 7 | + 8 | the size ratio is 3.0 : 2.4 : 1.8 : 1.2.
...And 2 more matches
Using the viewport meta tag to control layout on mobile browsers
for example, recent smartphones generally have a
5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi).
...on displays with density between 200 and 300dpi, the ratio is 1.
5.
... for displays with density over 300dpi, the ratio is the integer floor(density/1
50dpi).
...And 2 more matches
Mozilla Port Blocking
background on 08/1
5/2001, cert issued a vulnerability note vu#476267 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
...enabling ports user_pref("network.security.ports.banned.override, "port1,port2"); disabling ports user_pref("network.security.ports.banned", "port3,port4"); blocked ports ports blocked by default in mozilla: port service 1 tcpmux 7 echo 9 discard 11 systat 13 daytime 1
5 netstat 17 qotd 19 chargen 20 ftp data 21 ftp control 22 ssh 23 telnet 2
5 smtp 37 time 42 name 43 nicname
53 domain 77 priv-rjs 79 finger 87 ttylink 9
5 supdup 101 hostriame 102 iso-tsap ...
... 103 gppitnp 104 acr-nema 109 pop2 110 pop3 111 sunrpc 113 auth 11
5 sftp 117 uucp-path 119 nntp 123 ntp 13
5 loc-srv / epmap 139 netbios 143 imap2 179 bgp 389 ldap 46
5 smtp+ssl
512 print / exec
513 login
514 shell
51
5 printer
526 tempo
530 courier
531 chat
532 netnews
540 uucp
556 remotefs
563 nntp+ssl
587 submission 601 syslog 636 ldap+ssl 993 imap+ssl 99
5 pop3+ssl 2049 nfs 404
5 lockd 600...
...And 2 more matches
BloatView
== bloatview: all (cumulative) leak and bloat statistics, tab process 1862 |<----------------class--------------->|<-----bytes------>|<----objects---->| | | per-inst leaked| total rem| 0 |total | 17 2484|2
539
53338 38| 17 |asynctransactiontrackersholder | 40 40| 10
594 1| 78 |compositorchild | 472 472| 1 1| 79 |condvar | 24 48| 3086 2| 279 |messagepump | 8 8| 30 1| 28
5 |mutex | 20 ...
... class name instance size bytes allocated bytes allocated but not freed blank mozilla yahoo netscape total blank mozilla yahoo netscape total total 17
54408 432
556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 129
55760 222760 48760 13280 76160 360960 nshashkey 8 610
568 1842400 24
57872 1134
592 604
5432 32000
536
568 1216 34320 nstexttransformer
548 8220 469088 1414936 1
5327
56 342
5000 ...
... 0 0 0 0 0 nsstylecontextdata 736 2
59808 32
5312 489440 338
560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 22
5500 402600
562100 1192400 0 0 0 0 0 nslocalfile 424
558832 19928 1696 1272
581728 72080 1272 424 -424 733
52 the first set of columns, bytes allocated, shows the amount of memory allocated for the first log file (blank.txt), the difference between the first log file and the second (mozilla.txt), the difference between the second log file and the third (yahoo.txt), the difference between the third log file and the fourth (netscape.txt), and the total amount of memory allocated in the fourth lo...
...And 2 more matches
NSPR build instructions
--enable-win32-target=win9
5 this option is only used on windows.
...we recommend most applications use the "win9
5" configuration.
... the "win9
5" configuration supports all versions of windows.
...And 2 more matches
An overview of NSS Internals
the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.
509 version 3.
... many (if not most) of the operations performed by nss involve the use of x.
509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “computer emergency response team“).
...a trust anchor is just another x.
509 certificate that is already known and has been deliberately marked as trusted by a software vendor, administrators inside an organizational infrastructure, or the software user.
...And 2 more matches
NSS 3.12.9 release notes
bug 609068: implement j-pake in freebl bug 6070
58: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-
512 and sha-384 hashes are incorrect for inputs of
512mb or larger when running under windows and other 32-bit platforms (fx 3.6.1...
...2 and 4.0b6) bug
518
551: vfychain crashes in pkits tests.
... bug
53648
5: crash during ssl handshake in [@ intel_aes_decrypt_cbc_2
56] bug 444367: nss 3.12 softoken returns the certificate type of a certificate object as ckc_x_
509_attr_cert.
...And 2 more matches
NSS 3.32 release notes
cn = addtrust class 1 ca root sha-2
56 fingerprint: 8c:72:09:27:9a:c0:4e:27:
5e:16:d0:7f:d3:b7:7
5:e8:01:
54:b
5:96:80:46:e3:1f:
52:dd:2
5:76:63:24:e9:a7 cn = swisscom root ca 2 sha-2
56 fingerprint: f0:9b:12:2c:71:14:f4:a0:9b:d4:ea:4f:4a:99:d
5:
58:b4:6e:4c:2
5:cd:81:14:0d:29:c0:
56:13:91:4c:38:41 the following ca certificates were removed: cn = addtrust public ca root sha-2
56 fingerprint: 0...
...7:91:ca:07:49:b2:07:82:aa:d3:c7:d7:bd:0c:df:c9:48:
58:3
5:84:3e:b2:d7:99:60:09:ce:43:ab:6c:69:27 cn = addtrust qualified ca root sha-2
56 fingerprint: 80:9
5:21:08:0
5:db:4b:bc:3
5:
5e:44:28:d8:fd:6e:c2:cd:e3:ab:
5f:b9:7a:99:42:98:8e:b8:f4:dc:d0:60:16 cn = china internet network information center ev certificates root sha-2
56 fingerprint: 1c:01:c6:f4:db:b2:fe:fc:22:
55:8b:2b:ca:32:
56:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:
59:9f:9e:8c:7a:f7 cn = cnnic root sha-2
56 fingerprint: e2:83:93:77:3d:a8:4
5:a6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:6a:8d:99:ae:a7 cn = comsign secured ca sha-2
56 fingerprint:
50:79:41:c7:44:60:a0:b4:70:86:22:0d:4e:99:32:
57:2a:b
5:d1:b
5:bb:cb:89:80:ab:1c:b1:76:
51:a8:44:d2 ...
... cn = geotrust global ca 2 sha-2
56 fingerprint: ca:2d:82:a0:86:77:07:2f:8a:b6:76:4f:f0:3
5:67:6c:fe:3e:
5e:32:
5e:01:21:72:df:3f:92:09:6d:b7:9b:8
5 cn = secure certificate services sha-2
56 fingerprint: bd:81:ce:3b:4f:6
5:91:d1:1a:67:b
5:fc:7a:47:fd:ef:2
5:
52:1b:f9:aa:4e:18:b9:e3:df:2e:34:a7:80:3b:e8 cn = swisscom root ca 1 sha-2
56 fingerprint: 21:db:20:12:36:60:bb:2e:d4:18:20:
5d:a1:1e:e7:a8:
5a:6
5:e2:bc:6e:
55:b
5:af:7e:78:99:c8:a2:66:d9:2e cn = swisscom root ev ca 2 sha-2
56 fingerprint: d9:
5f:ea:3c:a4:ee:dc:e7:4c:d7:6e:7
5:fc:6d:1f:f6:2c:44:1f:0f:a8:bc:77:f0:34:b1:9e:
5d:b2:
58:01:
5d cn = trusted certificate services sha-2
56 fingerprint: 3f:06:e
5:
56:81:d4:96:f
5:be:16:9e:b
5:38:9f:9f:2b:8f:f6:1e:17:08:df:68...
...And 2 more matches
NSS 3.37 release notes
added hacl* poly130
5 32-bit the code to support the npn protocol, which had already been disabled in a previous release, has been fully removed.
...nss now requires the sqlite apis of version 3.
5.0 or newer.
... starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix platform was available (bug 134673
5), which performed seeding exclusively based on /dev/urandom.
...And 2 more matches
NSS 3.41 release notes
nss 3.41 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_41_rtm/src/ new in nss 3.41 new functionality bug 12
52891 - implemented eku handling for ipsec ike.
... bug 149321
5 - enabled the following ciphersuites by default: tls_ecdhe_ecdsa_with_aes_2
56_gcm_sha384 tls_ecdhe_rsa_with_aes_2
56_gcm_sha384 tls_dhe_rsa_with_aes_2
56_gcm_sha384 tls_rsa_with_aes_2
56_gcm_sha384 new functions none notable changes in nss 3.41 the following ca certificates were added: cn = certigna root ca sha-2
56 fingerprint: d48d3d23eedb
50a4
59e
55197601c27774b9d7b18c94d
5a0
59
511a102
50b93168 cn = gts root r1 sha-2
56 fingerprint: 2a
57
5471e31340bc21
581cbd2cf13e1
58463203ece94bcf9d3cc196bf09a
5472 cn = gts root r2 sha-2
56 fingerprint: c4
5d7bb08e6d67e62e423
5110b
564e
5f78fd92ef0
58c840aea4e64
55d7
58
5c60 cn = gts root r3 sha-2
56 fingerprint: 1
5d
5b8774619ea7d
54ce1ca6...
...d0b0c403e037a917f131e8a04e1e6b7a71babce
5 cn = gts root r4 sha-2
56 fingerprint: 71cca
5391f9e794b04802
530b363e121da8a3043bb26662fea4dca7fc9
51a4bd cn = uca global g2 root sha-2
56 fingerprint: 9bea11c976fe014764c1be
56a6f914b
5a
560317abd9988393382e
5161aa0493c cn = uca extended validation root sha-2
56 fingerprint: d43af9b3
54737
55c9684fc06d7d8cb70ee
5c28e773fb294eb41ee71722924d24 the following ca certificates were removed: cn = ac raíz certicámara s.a.
...And 2 more matches
NSS API Guidelines
the areas which need the most work (both here and throughout the code) is: the relationship of the certificate library with just about every other component (most noticeably pkcs #12, pkcs #7, and pkcs #11) splitting low key and high key components more clearly the crypto wrappers (pkcs #11 wrappers) and high key pkcs #12 and pkcs #
5 libraries nss compiles into the libraries described below.
... high cert lib/certhigh ocsp.h, ocspt.h crmf provides functions, and data types, to handle certificate management message format (cmmf) and certificate request message format (crmf, see rfc 2
511) data.
... pkcs #11: implementation lib/softoken keydbt.h, keylow.h, keytboth.h, keytlow.h, secpkcs
5.h, pkcs11.h, pkcs11f.h, pkcs11p.h, pkcs11t.h, pkcs11u.h ssl provides an implementation of the ssl protocol using nss and nspr.
...And 2 more matches
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[80
5ef10]: c_initialize 1024[80
5ef10]: rv = 0x0 1024[80
5ef10]: c_getinfo 1024[80
5ef10]: rv = 0x0 1024[80
5ef10]: c_getslotlist 1024[80
5ef10]: rv = 0x0 2.
...osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[80
5ef10]: c_initialize 1024[80
5ef10]: pinitargs = 0x4010c938 1024[80
5ef10]: rv = 0x0 1024[80
5ef10]: c_getinfo 1024[80
5ef10]: pinfo = 0xbffff340 1024[80
5ef10]: rv = 0x0 1024[80
5ef10]: c_getslotlist 1024[80
5ef10]: tokenpresent = 0x0 1024[80
5ef10]: pslotlist = 0x0 1024[80
5ef10]: pulcount = 0xbffff33c 1024[80
5ef10]: *pulcount = 0x2 1024[80
5ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argumen...
...for example, 1024[80
5ef10]: c_findobjectsinit 1024[80
5ef10]: hsession = 0x1000001 1024[80
5ef10]: ptemplate = 0xbffff410 1024[80
5ef10]: ulcount = 3 1024[80
5ef10]: cka_label = localhost.nyc.rr.com [20] 1024[80
5ef10]: cka_token = ck_true [1] 1024[80
5ef10]: cka_class = cko_certificate [4] 1024[80
5ef10]: rv = 0x0 1024[80
5ef10]: c_findobjects 1024[80
5ef10]: hsession = 0x1000001 1024[80
5ef10]: phobject = 0x806d810 1024[80
5ef10]: ulmaxobjectcount = 16...
...And 2 more matches
JSClass.flags
n is an integer in the range [0..2
55].
...ing standard constructors or prototypes (such as function.prototype.) objects that can end up with the wrong prototype object, if this flag is not present, include: arguments objects (ecma 262-3 §10.1.8 specifies "the original object prototype"), function objects (ecma 262-3 §13.2 specifies "the original function prototype"), and objects created by many standard constructors (ecma 262-3 §1
5.4.2.1 and others).
... jsclass_share_all_properties obsolete since javascript 1.8.
5 instructs spidermonkey to automatically give all properties of objects of this class the jsprop_shared attribute.
...And 2 more matches
SpiderMonkey 1.8
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md
5 checksum: eaad881
5dcc66a717ddb87e9724d964e).
...this includes iterators and generators (bug 349263) and arrays (bug 417
501).
... when javascript 1.8 support is enabled, the parser accepts some incorrect programs by inserting a semicolon where it should instead throw a syntaxerror (bug 3847
58).
...And 2 more matches
Starting WebLock
pr_true); // persist a complete code listing for registering weblock as a startup observer follows: #define mozilla_strict_api #include "nsigenericfactory.h" #include "nscomptr.h" #include "nsxpcom.h" #include "nsiservicemanager.h" #include "nsicategorymanager.h" #include "nsmemory.h" #include "nsiobserver.h" #include "nsembedstring.h" #define weblock_cid \ { 0x777f71
50, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x
5e, 0xab, 0x2
5, 0xb3, 0x22, 0xaa}} #define weblock_contractid "@dougt/weblock" class weblock: public nsiobserver { public: weblock(); virtual ~weblock(); ns_decl_isupports ns_decl_nsiobserver }; weblock::weblock() { ns_init_isupports(); } weblock::~weblock() { } ns_impl_isupports1(weblock, nsiobserver); ns_imethodimp weblock::observe(...
...the xpidl for iweblock appears below: iweblock #include "nsisupports.idl" interface nsisimpleenumerator; [scriptable, uuid(ea
54eee4-9
548-4b63-b94d-c
519ffc91d09)] interface iweblock : nsisupports { void lock(); void unlock(); // assume strings are utf-8 void addsite(in string url); void removesite(in string url); attribute nsisimpleenumerator sites; }; the first line includes the file nsisupports.idl, which defines the nsisupports interface from which all xpcom interfaces must derive, and makes it possible ...
... [scriptable, uuid(ea
54eee4-9
548-4b63-b94d-c
519ffc91d09)] the rest of the line provides a uuid for this interface.
...And 2 more matches
nsIAppStartup
createstartupstate() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs.
... doprofilestartup() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) starts up the profile manager with the given arguments.
... ensure1window() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) ensures that at least one window exists after creating the startup state.
...And 2 more matches
nsIDocShell
kcharsetfromparentframe
5 the parent frame's character set is being used.
... kcharsetfrommetaprescan 8 values from this one downward are html
5 tentative.
... kcharsetfrommetatag 9 values from this one upward are html
5 confident.
...And 2 more matches
nsIHttpServer
string or hash component; it * also should usually be canonicalized, since most browsers will do so * before sending otherwise-matching requests * @param handler * an object which will handle any requests for the given path, or null to * remove any existing handler; if while the server is running the handler * throws an exception while responding to a request, an http
500 response * will be returned * @throws ns_error_invalid_arg * if path does not begin with a "/" */ void registerpathhandler(in string path, in nsihttprequesthandler handler); /** * registers a custom prefix handler.
... * @param handler * an object which will handle any requests for the given path, or null to * remove any existing handler; if while the server is running the handler * throws an exception while responding to a request, an http
500 response * will be returned * @throws ns_error_invalid_arg * if path does not begin with a "/" or does not end with a "/" */ void registerprefixhandler(in string prefix, in nsihttprequesthandler handler); /** * registers a custom error page handler.
... if the handler throws an * exception during server operation, fallback is to the genericized error * handler (the x00 version), then to
500, using a user-defined error * handler if one exists or the server default handler otherwise.
...And 2 more matches
nsISelectionPrivate
inherits from: nsisupports last changed in gecko 3
5 (firefox 3
5 / thunderbird 3
5 / seamonkey 2.32) warning: the content of this article may be out of date.
...see bug 3
5296 and bug 199412 native code only!
... constants constant value description endofprecedingline 0 startofnextline 1 tableselection_none 0 tableselection_cell 1 tableselection_row 2 tableselection_column 3 tableselection_table 4 tableselection_allcells
5 methods addselectionlistener() void addselectionlistener( in nsiselectionlistener newlistener ); parameters newlistener endbatchchanges() will resume user interface updates after a previous call to startbatchchanges().
...And 2 more matches
nsIWebBrowserPersist
persist_flags_fixup_links_to_destination 2
56 fix links relative to destination location (not origin) persist_flags_dont_fixup_links
512 do not make any adjustments to links.
... persist_flags_force_allow_cookies 6
5536 force relevant cookies to be sent with this load even if normally they wouldn't be.
... encode_flags_encode_w3c_entities 2
56 attempt to encode entities standardized at w3c (html, mathml, and so on.).
...And 2 more matches
nsMsgSearchAttrib
*/ [scriptable, uuid(a83ca7e8-4
591-4111-8fb8-fd76ac73c866)] interface nsmsgsearchattrib { const nsmsgsearchattribvalue custom = -2; /* a custom term, see nsimsgsearchcustomterm */ const nsmsgsearchattribvalue default = -1; const nsmsgsearchattribvalue subject = 0; /* mail and news */ const nsmsgsearchattribvalue sender = 1; const nsmsgsearchattribvalue body = 2; const nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue priority = 4; /* mail only */ ...
...const nsmsgsearchattribvalue msgstatus =
5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /* result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 1
5; const nsmsgsearchattribvalue keywords = 16; // keywords are the internal representation of tags.
... const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21; const nsmsgsearchattribvalue additionalemail = 22; const nsmsgsearchattribvalue phonenumber = 23; const nsmsgsearchattribvalue workphone = 24; const nsmsgsearchattribvalue homephone = 2
5; const nsmsgsearchattribvalue fax = 26; const nsmsgsearchattribvalue pager = 27; const nsmsgsearchattribvalue mobile = 28; const nsmsgsearchattribvalue city = 29; const nsmsgsearchattribvalue street = 30; const nsmsgsearchattribvalue title = 31; const nsmsgsearchattribvalue organization = 32; const nsmsgsearchattribvalue department = 33; // 34 - 43, ...
...And 2 more matches
Building a Thunderbird extension 3: install manifest
?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>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}</em:id> <em:minversion>1.
5</em:minversion> <em:maxversion>
5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the following items (shown in bold) should be customized for your application: <em:id>myfirstext@jen.zed</em:id>: this is the id of the extension.
... <em:id>{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}</em:id>: this element contains the version id of the application that this add on is developed for.
... <em:minversion>1.
5</em:minversion>: this element indicates the earliest version of thunderbird for which the extension is intended to work.
...And 2 more matches
Using COM from js-ctypes
basis and reference for this article bugzilla :: bug 738
501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug
50
5907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c.
...volume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms69
5279%28v=vs.8
5%29.aspx let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms68871
5%28v=vs.8
5%29.aspx let couninitialize = lib.declare('couninitialize', winabi, void // return ); // http://msdn.microsoft.com/en-us/library/windows/desktop/m...
...s68661
5%28v=vs.8
5%29.aspx let cocreateinstance = lib.declare('cocreateinstance', winabi, hresult, // return refclsid, // rclsid lpunknown, // punkouter dword, // dwclscontext refiid, // riid lpvoid // *ppv ); // helper functions function checkhresult(hr /*primative hresult*/, funcname /*jsstr*/) { // primative because thats what is returned by declared functions that // return hresult hr = hr.tostring(); // makes it primative if (hr < 0) { console.error('hresult', hr, 'returned from function ', funcname /*, 'getstrofresult:', getstrofresult(hr)*/); throw new error('hresult ' + hr + ' returned from function ' + funcname); } } let clsidfromarr = iidfromarr = function...
...And 2 more matches
Using js-ctypes
examples can be found here: bugzilla :: bug
50
5907 - support c++ calling from jsctypes library search paths if you specify a full path, that path is used to load the library.
...line 1
5 calls the msgbox() routine, which displays the alert.
... note: this example will not work on 64bit os x, see below for core foundation for 64bit os x /* build a str2
55 ("pascal style") string from the passed-in string */ function makestr(str) { return string.fromcharcode(str.length) + str; } components.utils.import("resource://gre/modules/ctypes.jsm"); var carbon = ctypes.open("/system/library/frameworks/carbon.framework/carbon"); stdalert = carbon.declare("standardalert", /* function name */ ctypes.default_abi, /* abi ...
...And 2 more matches
Mozilla
for a discussion on extended c++ support see bug
50
5907.
... mozilla port blocking on 08/1
5/2001, cert issued a vulnerability note vu#476267 for a "cross-protocol" scripting attack, known as the html form protocol attack which allowed sending arbitrary data to most tcp ports.
... phishing: a short definition in 2014, the msci estimated an annual global impact of phishing, and various forms of identity theft, to be as high as $
5 billion usd.
...And 2 more matches
Plug-in Development Overview - Plugins
for more information about mime types, see these mime rfcs: rfc-204
5: "multipurpose internet mail extensions (mime) part one: format of internet message bodies" rfc-2046: "multipurpose internet mail extensions (mime) part two: media types" rfc-4288: "media type specifications and registration procedures" there are some variations to how plug-ins are handled on different platforms.
...see bug 12
5469.
...for example: str 128 mime type string 1 video/quicktime string 2 mov, moov string 3 audio/aiff string 4 aiff string
5 image/jpeg string 6 jpg several other optional strings may contain useful information about the plug-in.
...And 2 more matches
Migrating from Firebug - Firefox Developer Tools
only the live preview of changes is currently missing, which is tracked in bug 1067318 and bug 81
5464.
...there is no such feature in the rules side panel of the devtools, but it is requested in bug 133
5327.
...xhr, dom, cookie and error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 89
5893 and bug 116
5010).
...And 2 more matches
Call Tree - Firefox Developer Tools
for example, we can expand the entry for bubblesort(): so we can see the call graph is like this: sortall() -> sort() -> bubblesort() note also that self cost for sort() here is 1.4
5%, and note that this is the same as for the separate entry for sort() later in the list.
...let's expand the entry for swap(): there were 2
53 samples taken inside swap().
...we can also see that 2
52 of the 2
53 samples in swap() were taken in the bubblesort() branch, and only one in the selectionsort() branch.
...And 2 more matches
AudioParam.cancelAndHoldAtTime() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelandholdattimechrome full support
57 full support
57 no support ?
... —
56alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()edge full support ≤79firefox no support noie no support noopera full support 44 full support 44 no support ?
... — 43alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()safari no support nowebview android full support
57 full support
57 no support ?
...And 2 more matches
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monosp...
...ace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,2
5 406,20 406,30 396,2
5" stroke="#d4dde4" fill="none"/><line x1="406" y1="2
5" x2="436" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="473.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="
511,2
5 521,20
521,30
511,2
5" stroke="#d4dde4" fill="none"/><line x1="
521" y1="2
5" x2="
529" y2="2
5" stroke="#d4dde4"/><line x1="
529" y1="2
5" x2="
529" y2="90" stroke="#d4dde4"/><line x1="
529" y1="90" x2="
512" y2="90" stroke="#d4dde4"/><a...
...And 2 more matches
Using the CSS Typed Object Model - Web APIs
lue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( allcomputedstyles.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } we included border-left-color to demonstrate that, had we included all the properties, every value that defaults to currentcolor (including caret-color, outline-color, text-decoration-color, column-rule-color, etc.) would return rgb(2
55, 0, 0).
...we'll take a look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat
5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.9
5); } let's add the class to a button (a button which does nothing).
... // 'sum' // csstransformvalue let transform = allcomputedstyles.get('transform'); console.log( transform ); // csstransformvalue {0: cssscale, 1: csstranslate, length: 2, is2d: true} console.log( transform.length ); // 1 console.log( transform[0] ); // cssscale {x: cssunitvalue, y: cssunitvalue, z: cssunitvalue, is2d: true} console.log( transform[0].x ); // cssunitvalue {value: 0.9
5, unit: "number"} console.log( transform[0].y ); // cssunitvalue {value: 0.9
5, unit: "number"} console.log( transform[0].z ); // cssunitvalue {value: 1, unit: "number"} console.log( transform.is2d ); // true // cssimagevalue let bgimage = allcomputedstyles.get('background-image'); console.log( bgimage ); // cssimagevalue console.log( bgimage.tostring() ); // url("https://mdn.mo...
...And 2 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // tangential lines ctx.beginpath(); ctx.strokestyle = 'gray'; ctx.moveto(200, 20); ctx.lineto(200, 130); ctx.lineto(
50, 20); ctx.stroke(); // arc ctx.beginpath(); ctx.strokestyle = 'black'; ctx.linewidth =
5; ctx.moveto(200, 20); ctx.arcto(200,130,
50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.arc(200, 20,
5, 0, 2 * math.pi); ctx.fill(); // control points ctx.beginpath(); ctx.fillstyle = 'red'; ctx.arc(200, 130,
5, 0, 2 * math.pi); // control point one ctx.arc(
50, 20,
5...
...it is shaped to fit control points at (90, 130) and (20, 20), and has a radius of
50.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 1
5; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y,
50); ctx.lineto(p2.x, p2.y); labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke(); result result of a large radius if you use a relatively large radius, the arc may appear in a place you didn't expect.
...And 2 more matches
CanvasRenderingContext2D.fillText() - Web APIs
this code creates a context 400 pixels wide and 1
50 pixels across.
... <canvas id="canvas" width="400" height="1
50"></canvas> javascript the javascript code for this example follows.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '
50px serif'; ctx.filltext('hello world',
50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
...And 2 more matches
CanvasRenderingContext2D.strokeText() - Web APIs
this code creates a context 400 pixels wide and 1
50 pixels high.
... <canvas id="canvas" width="400" height="1
50"></canvas> javascript the javascript code for this example follows.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '
50px serif'; ctx.stroketext('hello world',
50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
...And 2 more matches
Basic usage of canvas - Web APIs
the <canvas> element <canvas id="tutorial" width="1
50" height="1
50"></canvas> at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes.
...when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 1
50 pixels high.
...this can look something like this: <canvas id="stockgraph" width="1
50" height="1
50"> current stock price: $3.1
5 + 0.1
5 </canvas> <canvas id="clock" width="1
50" height="1
50"> <img src="images/clock.png" width="1
50" height="1
50" alt=""/> </canvas> telling the user to use a different browser that supports canvas does not help users who can't read the canvas at all, for example.
...And 2 more matches
Canvas API - Web APIs
the fillrect() method places its top-left corner at (10, 10), and gives it a size of 1
50 units wide by 100 tall.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 1
50, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
... html
5 canvas deep dive a hands-on, book-length introduction to the canvas api and webgl.
...And 2 more matches
console - Web APIs
outputting a single object the simplest way to use the logging methods is to output a single object: var someobject = { str: "some text", id:
5 }; console.log(someobject); the output looks something like this: [09:27:13.47
5] ({str:"some text", id:
5}) outputting multiple objects you can also output multiple objects by simply listing them when calling the logging method, like this: var car = "dodge charger"; var someobject = { str: "some text", id:
5 }; console.info("my first car was a", car, ".
...the object is: ({str:"some text", id:
5}) using string substitutions when passing a string to one of the console object's methods that accepts a string (such as log()), you may use these substitution strings: %o or %o outputs a javascript object.
...for example: for (var i=0; i<
5; i++) { console.log("hello, %s.
...And 2 more matches
Document - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace"...
... fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...And 2 more matches
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5"...
... x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">docu...
...menttype</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode interface.
...And 2 more matches
FileSystemFileEntry - Web APIs
ernate name full support 8alternate name alternate name uses the non-standard name: fileentryedge full support 79prefixed full support 79prefixed prefixed implemented with the vendor prefix: webkitfirefox full support
50ie no support noopera no support nosafari full support 11.1webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-stan...
...dard name: fileentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: fileentryfirefox android full support
50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix: webkitcreatewriter deprecatednon-standardchrome full support 8edge ful...
...l support 79firefox no support
50 —
52notes no support
50 —
52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support nowebview android full support ≤37chrome android full support 18firefox android no support
50 —
52notes no support
50 —
52notes notes while the createwriter() method existed, it immediat...
...And 2 more matches
GamepadEvent - Web APIs
working draft initial definition browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgamepadeventchrome full support 3
5 full support 3
5 no support 21 — 34prefixed prefixed implemented with the vendor prefix: webkitedge full support ≤18firefox full support 29 full support 29 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 22 full support 22 no support 1
5 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari full support 10.1webview android no support nochrome android full support yesfirefox android full support 32opera android full sup...
...ll support 22 no support 14 — 21prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 10.3samsung internet android full support yesgamepadevent() constructorchrome full support 3
5edge full support 12firefox full support 29 full support 29 no support 24 — 28disabled disabled from version 24 until version 28 (exclusive): this feature is behind the dom.gamepad.enabled preference (needs to be set to true).
...And 2 more matches
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><...
...line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline...
...="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_t...
...And 2 more matches
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLImageElement.currentSrc - Web APIs
the sizes attribute is provided to indicate that the image should be drawn at
50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document.
... html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px)
50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentsrc experimentalchrome full support 4
5edge full support 13firefox full support 38 full support 38 no support 32 —
52disabled disabled from version 32 until version
52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
...And 2 more matches
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2...
...
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-...
...anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs...
...And 2 more matches
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke...
...="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="m...
...iddle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/...
...And 2 more matches
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_to...
...And 2 more matches
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...And 2 more matches
Using IndexedDB - Web APIs
const customerdata = [ { ssn: "444-44-4444", name: "bill", age: 3
5, email: "bill@company.com" }, { ssn: "
555-
55-
5555", name: "donna", age: 32, email: "donna@home.org" } ]; of course, you wouldn't use someone's social security number as the primary key to a customer table because not everyone has a social security number, and you would store their birth date instead of their age, but let's ignore those unfortunate choices for the sake of convenience and move ...
... the behavior described above is new, and is only available as of the following browser releases: firefox
50, google chrome 31 (approximately).
...see bug 87064
5.
...And 2 more matches
Long Tasks API - Web APIs
motivation the experimental long tasks api gives us visibility into tasks that take
50 milliseconds or more.
... the
50 ms threshold comes from the rail model, in particular the "response: process events in under
50 ms" section.
... tasks that block the main thread for
50 ms or more cause, among other issues: delayed "time to interactive".
...And 2 more matches
Recording a media element - Web APIs
let preview = document.getelementbyid("preview"); let recording = document.getelementbyid("recording"); let startbutton = document.getelementbyid("startbutton"); let stopbutton = document.getelementbyid("stopbutton"); let downloadbutton = document.getelementbyid("downloadbutton"); let logelement = document.getelementbyid("log"); let recordingtimems =
5000; most of these are references to elements we need to work with.
... the last, recordingtimems, is set to
5000 milliseconds (
5 seconds); this specifies the length of the videos we'll record.
... line
5 sets up the handler for the dataavailable event.
...And 2 more matches
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
...possible values are: name value element_node 1 attribute_node 2 text_node 3 cdata_section_node 4 entity_reference_node
5 entity_node 6 processing_instruction_node 7 comment_node 8 document_node 9 document_type_node 10 document_fragment_node 11 notation_node 12 node.nodevalue returns / sets the value of the current node.
...And 2 more matches
RTCPeerConnection.createDataChannel() - Web APIs
this string may not be longer than 6
5,
53
5 bytes.
... this string may not be longer than 6
5,
53
5 bytes.
... id optional an 16-bit numeric id for the channel; permitted values are 0-6
5534.
...And 2 more matches
SVGAnimateMotionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_to...
...And 2 more matches
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" targe...
...And 2 more matches
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 ...
... 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53"...
... text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/...
...And 2 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/...
...><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseli...
...ne="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" targe...
...And 2 more matches
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="31...
...And 2 more matches
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"...
...And 2 more matches
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
...And 2 more matches
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
...And 2 more matches
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
...And 2 more matches
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target=...
...And 2 more matches
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a ...
...And 2 more matches
SVGGeometryElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a...
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,...
...2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...And 2 more matches
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...And 2 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x...
...2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30...
... 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53...
..." text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="...
...And 2 more matches
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,...
...30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...And 2 more matches
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_t...
...And 2 more matches
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a...
...And 2 more matches
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a...
...And 2 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x=...
...And 2 more matches
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a...
...And 2 more matches
TextEncoder.prototype.encodeInto() - Web APIs
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.
...t = nonasciichars.charcodeat(0)|0; if (0xd800 <= point && point <= 0xdbff) { var nextcode = nonasciichars.charcodeat(1)|0; // defaults to 0 when nan, causing null replacement character if (0xdc00 <= nextcode && nextcode <= 0xdfff) { //point = ((point - 0xd800)<<10) + nextcode - 0xdc00 + 0x10000|0; point = (point<<10) + nextcode - 0x3
5fdc00|0; if (point > 0xffff) return fromcharcode( (0x1e/*0b11110*/<<3) | (point>>>18), (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); ...
... } else point = 6
5533/*0b1111111111111101*/;//return '\xef\xbf\xbd';//fromcharcode(0xef, 0xbf, 0xbd); } /*if (point <= 0x007f) return nonasciichars; else */if (point <= 0x07ff) { return fromcharcode((0x6<<
5)|(point>>>6), (0x2<<6)|(point&0x3f)); } else return fromcharcode( (0xe/*0b1110*/<<4) | (point>>>12), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); } function textencoder(){}; textencoderprototype["encode"] = function(inputstring) { // 0xc0 => 0b11000000; 0xff => 0b11111111; 0xc0-0xff => 0b11xxxxxx // 0x80 => 0b10000000; 0xbf => 0b10111111; 0x80-0xbf => 0b10xxxxxx var encodedstring = inputstring === void 0...
...And 2 more matches
TextEncoder - Web APIs
it is designed to work in ie
5 "out of the box".
... however, in ie
5-ie9, it will return a regular array instead of a typedarray.
...however, array's // have an auto expanding length and 1.
5x should be just the right balance for most uses.
...And 2 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb
56
5 gl.r11f_g11f_b10f gl.rgb9_e
5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb
5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui type a glenum specifying the data type of the texel data.
... possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_
5_6_
5:
5 red bits, 6 green bits,
5 blue bits.
... gl.unsigned_short_
5_
5_
5_1:
5 red bits,
5 green bits,
5 blue bits, 1 alpha bit.
...And 2 more matches
WebGLRenderingContext.getParameter() - Web APIs
when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt3_ext ext.compressed_rgba_s3tc_dxt
5_ext when using the webgl_compressed_texture_s3tc_srgb extension: ext.compressed_srgb_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt3_ext ext.compressed_srgb_alpha_s3tc_dxt
5_ext when using the webgl_compressed_texture_etc extension: ext.compressed_r11_eac ext.compressed_signed_r11_eac ext.co...
..._webgl when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_
5x4_khr ext.compressed_srgb8_alpha8_astc_
5x4_khr ext.compressed_rgba_astc_
5x
5_khr ext.compressed_srgb8_alpha8_astc_
5x
5_khr ext.compressed_rgba_astc_6x
5_khr ext.compressed_srgb8_alpha8_astc_6x
5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x
5_khr ext.compressed_srgb8_alpha8_astc_8x
5_khr ext.co...
...mpressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compressed_rgba_astc_10x
5_khr ext.compressed_srgb8_alpha8_astc_10x
5_khr ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr gl.cull_face glboolean gl.cull_face_mode glenum gl.front, gl.back or gl.front_and_...
...And 2 more matches
Using WebRTC data channels - Web APIs
this is implemented in firefox
57, but is not yet implemented in chrome (see chromium bug 7774).
... with eor support in place, rtcdatachannel payloads can be much larger (officially up to 2
56kib, but firefox's implementation caps them at a whopping 1gib).
... even at 2
56kib, that's large enough to cause noticeable delays in handling urgent traffic.
...And 2 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width:
50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width:
50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle...
... function setup() { context = new (window.audiocontext || window.webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.
5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); gainnode2.gain.value = gainnode1.gain.value; gainnode3.gain.value = gainnode1.gain.value; volumecontrol.value = gainnode1.gain.value; constantnode = context.createconstantsource(); constantnode.connect(gainnode2.gain); constantnode.connect(gainnode3.gain); constantnode.start(); gainnode1.connect(context.de...
...we set that gain to 0.
5.
...And 2 more matches
Visualizations with Web Audio API - Web APIs
for example: analyser.getbytetimedomaindata(dataarray); we now have the audio data for that moment in time captured in our array, and can proceed to visualize it however we like, for example by plotting it onto an html
5 <canvas>.
... analyser.fftsize = 2
56; var bufferlength = analyser.frequencybincount; console.log(bufferlength); var dataarray = new uint8array(bufferlength); canvasctx.clearrect(0, 0, width, height); next, we start our draw() function off, again setting up a loop with requestanimationframe() so that the displayed data keeps updating, and clearing the display with each animation frame.
...however, we are also multiplying that width by 2.
5, because most of the frequencies will come back as having no audio in them, as most of the sounds we hear every day are in a certain lower frequency range.
...And 2 more matches
Functions and classes available to Web Workers - Web APIs
2
5 (2
5) no support no support no support indexeddb database to store records holding simple values and hierarchical objects.
...
53.0 (
53) only on mobile (yes) only on mobile no support no support notifications allows web pages to control the display of system notifications to the end user 41 (41) ?
...
53 (
53) (currently only available in dedicated and shared workers; not service workers.) ?
...And 2 more matches
Using Web Workers - Web APIs
2); // boolean console.log(typeof emulatemessage(example2)); // boolean // test #3 var example3 = new string('hello world'); console.log(typeof example3); // object console.log(typeof emulatemessage(example3)); // string // test #4 var example4 = { 'name': 'john smith', "age": 43 }; console.log(typeof example4); // object console.log(typeof emulatemessage(example4)); // object // test #
5 function animal(stype, nage) { this.type = stype; this.age = nage; } var example
5 = new animal('cat', 3); alert(example
5.constructor); // animal alert(emulatemessage(example
5).constructor); // object a value that is cloned and not shared is called message.
...', function (result) { document.getelementbyid('firstlink').parentnode.appendchild(document.createtextnode('the difference is ' + result + '!')); }); mytask.addlistener('doalert', function (time, unit) { alert('worker waited for ' + time + ' ' + unit + ' :-)'); }); </script> </head> <body> <ul> <li><a id="firstlink" href="javascript:mytask.sendquery('getdifference',
5, 3);">what is the difference between
5 and 3?</a></li> <li><a href="javascript:mytask.sendquery('waitsometime');">wait 3 seconds</a></li> <li><a href="javascript:mytask.terminate();">terminate() the worker</a></li> </ul> </body> </html> my_task.js (the worker): var queryablefunctions = { // example #1: get the difference between two numbers: getdifference: function(nminuend, nsubt...
...on html
5 rocks.
...And 2 more matches
Window.open() - Web APIs
firefox (
50.0.1) functions as described: from the same domain+port reopen with same name will access the previously created window.
... google chrome (
55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener").
...firefox (
51.) gets the handle but cannot run any element.focus() while chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener.
...And 2 more matches
Using XMLHttpRequest - Web APIs
ltiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="
50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> to test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content: <?php /* register.php */ header("content-type: text/plain"); /* note: you should never use `print_r()` in productio...
...ltiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="
50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" /> </p> </fieldset> </form> </body> </html> note: as we said, formdata objects are not stringifiable objects.
...for example: http://foo.com/bar.html -> http://foo.com/bar.html?1234
5 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&1234
5 as the local cache is indexed by url, this causes every request to be unique, thereby bypassing the cache.
...And 2 more matches
Color contrast - Accessibility
when designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.
5 : 1 7 : 1 large-scale text (120-1
50% larger than body text) 3 : 1 4.
5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
...the "good" <div> has a light purple background, which makes the text easy to read: example1 <div class="good"> good contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 2
50px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; wid...
...th: 2
50px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your website, choose foreground and background colors that have good contrast.
...And 2 more matches
Understandable - Accessibility
3.1.
5 reading level (aaa) if text is provided that requires a higher reading level that lower secondary education level (typically children around 11-14 years old), provide supplementary explainer material to help people who can't read it, or provide an alternative version that is written at lower secondary level.
... the html
5 <audio> element can be used to create a control that allows the reader to play back an audio file containing the correct pronounciation, and it also makes sense to include a textual pronounciation guide after difficult words, in the same way that you find in dictionary entries.
... 3.2.
5 change on request (aaa) changes in context that could possibly confuse or disorient users should only occur only when requested by the user, or the user should be able to turn them off.
...And 2 more matches
:checked - CSS: Cascading Style Sheets
/* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 2
5px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
...re text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding:
5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an im...
... html
5the definition of ':checked' in that specification.
...And 2 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
for example, if i have a
500 pixel-wide container, flex-direction is row, and i have three flex items each 100 pixels wide, then i have 200 pixels of positive free space, which could be distributed between the items if i wanted them to fill the container.
...if i have a
500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space i need will be 600 pixels, so i have 100 pixels of negative free space.
...here we can see how the first item — which has an explicit width of 1
50 pixels set as the main size — takes a flex-basis of 1
50px, whereas the other two items have no width and so are sized according to their content width.
...And 2 more matches
CSS values and units - CSS: Cascading Style Sheets
numeric data types <integer> <number> <dimension> <percentage> integers an integer is one or more decimal digits, 0 through 9, such as 1024 or -
55.
... numbers a <number> represents a real number, which may or may not have a decimal point with a fractional component, for example 0.2
55, 128 or -1.2.
... dimensions a <dimension> is a <number> with a unit attached to it, for example 4
5deg, 100ms, or 10px.
...And 2 more matches
Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: block; width: 400px; height: 160px; background: lightgray; } p { width:
50%; /* == 400px * .
5 = 200px */ height: 2
5%; /* == 160px * .2
5 = 40px */ margin:
5%; /* == 400px * .0
5 = 20px */ padding:
5%; /* == 400px * .0
5 = 20px */ background: cyan; } example 2 in this example, the paragraph's containing block is the <body> element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: inline; background: lightgray; } p { width:
50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */ background: cyan; } example 3 in this example, the paragraph's containing block is <section> because the latter's position is absolute.
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px; background: lightgray; } p { position: absolute; width:
50%; /* == (400px + 20px + 20px) * .
5 = 220px */ height: 2
5%; /* == (160px + 30px + 30px) * .2
5 =
55px */ margin:
5%; /* == (400px + 20px + 20px) * .0
5 = 22px */ padding:
5%; /* == (400px + 20px + 20px) * .0
5 = 22px */ background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport...
...And 2 more matches
Value definition syntax - CSS: Cascading Style Sheets
bold [ thin && <length> ] this example matches the following values: bold thin 2vh bold 0 thin bold thin 3.
5em but not: thin bold 3em, as bold is juxtaposed with the component defined by the brackets, it must appear before it.
... bold <length> , thin this example matches the following values: bold 1em, thin bold 0, thin bold 2.
5cm, thin bold 3vh, thin but not: thin 1em, bold, as the entities must be in the expressed order bold 1em thin, as the entities are mandatory; the comma, a literal, must be present bold 0.
5ms, thin, as the ms values are not <length> double ampersand separating two or more components, by a double ampersand, &&, means that all these entities are mandatory but may appear in any order.
... bold && <length> this example matches the following values: bold 1em bold 0 2.
5cm bold 3vh bold but not: bold, as both components must appear in the value.
...And 2 more matches
animation-delay - CSS: Cascading Style Sheets
syntax /* single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1
500ms; /* multiple animations */ animation-delay: 2.1s, 480ms; values <time> the time offset, from the moment at which the animation is applied to the element, at which the animation should begin.
... full support 43 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12firefox full support 16notes full support 16notes notes before firefox
57, firefox does not repaint elements outside the viewport that are animated into the viewport with a delay.
... full support
5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support 30 full support 30 full support 1
5prefixed prefixed implemented with the vendor prefix: -webkit- no support ...
...And 2 more matches
animation-direction - CSS: Cascading Style Sheets
full support
5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support 30 full support 30 full support 1
5prefixed prefixed implemented with the vendor prefix: -webkit- no support ...
... 12.1 — 1
5 no support 12 — 1
5prefixed prefixed implemented with the vendor prefix: -o-safari full support 9 full support 9 full support 4prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support 43 full support 43 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 43 full support 43 full support...
... full support
5prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 30 full support 30 full support 14prefixed prefixed implemented with the vendor prefix: -webkit- no support 12.1 — 14 no support ...
...And 2 more matches
border-left-style - CSS: Cascading Style Sheets
lies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b
5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #
52e38
5; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {...
...border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b
5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
...webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-left-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox
50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
...And 2 more matches
border-radius - CSS: Cascading Style Sheets
tituent properties this property is a shorthand for the following css properties: border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius syntax /* the syntax of the first radius allows one to four values */ /* radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px
5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* the syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-r...
...adius: 10px
5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px
5px 2em / 20px 2
5px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px
5% / 20px 2
5em 30px 3
5em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <length> or <percentage> values.
... for example: border-radius: 1em/
5em; /* ...
...And 2 more matches
border-right-style - CSS: Cascading Style Sheets
-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b
5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #
52e38
5; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2...
... {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b
5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
...ebviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-right-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox
50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
...And 2 more matches
clear - CSS: Cascading Style Sheets
r sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width:
50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
... amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width:
50%; } clear: both html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="both">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 4
5%; } specifications specification status comment css logical properties and values level 1the definition of 'float and clear' in that specification.
...And 2 more matches
font-size-adjust - CSS: Cascading Style Sheets
/* use the specified font size */ font-size-adjust: none; /* use a font size that makes lowercase letters half the specified font size */ font-size-adjust: 0.
5; /* global values */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset; the property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters.
...for example, a style sheet that specifies: font-size: 14px; font-size-adjust: 0.
5; ...
... is really specifying that the lowercase letters of the font should be 7px high (0.
5 × 14px).
...And 2 more matches
font-stretch - CSS: Cascading Style Sheets
/* keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* percentage values */ font-stretch:
50%; font-stretch: 100%; font-stretch: 200%; /* global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset; syntax this property may be specified as a single keyword value or a single <percentage> value.
... <percentage> a <percentage> value between
50% and 200% (inclusive).
... keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed
50% extra-condensed 62.
5% condensed 7
5% semi-condensed 87.
5% normal 100% semi-expanded 112.
5% expanded 12
5% extra-expanded 1
50% ultra-expanded 200% description some font families offer additional faces in which the characters are narrower than the normal face (condensed faces) or wider than the ...
...And 2 more matches
outline-color - CSS: Cascading Style Sheets
syntax /* <color> values */ outline-color: #f92
52
5; outline-color: rgb(30,222,121); outline-color: blue; /* keyword value */ outline-color: invert; /* global values */ outline-color: inherit; outline-color: initial; outline-color: unset; the outline-color property is specified as any one of the values listed below.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.
5:1 is required for text content and 3:1 for larger text such as headings.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a solid blue outline html <p>my outline is blue, as you can see.</p> css p { outline: 2px solid; /* set the outline width and style */ outline-color: #0000ff; /* make the outline blue */ margin:
5px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-color' in that specification.
...And 2 more matches
repeat() - CSS: Cascading Style Sheets
/* <track-repeat> values */ repeat(4, 1fr) repeat(4, [col-start] 2
50px [col-end]) repeat(4, [col-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] minmax(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 [c...
...ol-end]) /* <auto-repeat> values */ repeat(auto-fill, 2
50px) repeat(auto-fit, 2
50px) repeat(auto-fill, [col-start] 2
50px [col-end]) repeat(auto-fit, [col-start] 2
50px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 2
50px) repeat(4, [col-start] 2
50px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length.
... examples specifying grid columns using repeat() html <div id="container"> <div> this item is
50 pixels wide.
...And 2 more matches
<transform-function> - CSS: Cascading Style Sheets
thus, a point that's 2 units to the right and
5 units down would be (2,
5), while a point 3 units to the left and 12 units up would be (-3, -12).
... html <main> <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </section> <div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</option> <option>rotatex(360deg)</option> <option>rotatey(360deg)</option> <option>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option>...
... <option>scale(1.
5)</option> <option>scalex(1.
5)</option> <option>scaley(1.
5)</option> <option>scalez(1.
5)</option> <option>scale3d(1, 1.
5, 1.
5)</option> <option>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(
50px,
50px,
50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,
50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding:
50px; background-image: lin...
...And 2 more matches
Getting Started - Developer guides
// for example, the response may have a 404 (not found) // or
500 (internal server error) response code.
... step
5 – working with data finally, let's send some data to the server and receive a response.
... simple timed xhr example another simple example follows — here we are loading a text file via xhr, the structure of which is assumed to be like this: time: 312.0
5 time: 312.07 time: 312.10 time: 312.12 time: 312.14 time: 312.1
5 once the text file is loaded, we split() the items into an array at each newline character (\n — basically where each line break is in the text file), and then print the complete list of timestamps, and the last timestamp, onto the page.
...And 2 more matches
Audio and video manipulation - Developer guides
html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/
5b/8cd6da9c6
5.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/0862
5b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
...playbackrate is a number that represents a multiple to be applied to the rate of playback, for example 0.
5 represents half speed while 2 represents double speed.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/0862
5b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/
5b/8cd6da9c6
5.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/0862
5b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="butto...
...And 2 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
examples given the following: <p> <label>enter your phone number in the format (123)4
56-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north americ...
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="4
5" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { ...
...position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.
...And 2 more matches
HTML attribute: step - HTML: Hypertext Markup Language
the default stepping value for time is 1 second, with 900 being equal to 1
5 minutes.
... default values for step input type value example date 1 (day) <input type="date" min="2019-12-2
5" step="1"> month 1 (month) <input type="month" min="2019-12" step="12"> week 1 (week) <input type="week" min="2019-w23" step="2"> time 60 (seconds) <input type="time" min="09:00" step="900"> datetime-local 1 (day) <input type="datetime-local" min="019-12-2
5t19:30" step="7"> number 1 <input type="number" min="0" step="0.1" max="10"> range 1 <input type="range" min="0" step="2" max="10"> 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...
...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="number" min="-
5.2"> min impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.
...And 2 more matches
Block-level elements - HTML: Hypertext Markup Language
the following example demonstrates the block-level element's influence: block-level elements html <p>this paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> css p { background-color: #8abb
55; } usage block-level elements may appear only within a <body> element.
...in html
5, this binary distinction is replaced with a more complex set of content categories.
... while the "inline" category roughly corresponds to the category of phrasing content, the "block-level" category doesn't directly correspond to any html
5 content category, but "block-level" and "inline" elements combined together correspond to the flow content in html
5.
...And 2 more matches
<form> - HTML: Hypertext Markup Language
this attribute was removed in html
5 and should not be used.
...it must be unique among the forms in a document and not an empty string as of html
5.
... text/plain: introduced by html
5 for debugging purposes.
...And 2 more matches
<input type="email"> - HTML: Hypertext Markup Language
in this example the email edit box is 1
5 characters wide: <input type="email" size="1
5"> element value length the size is separate from the length limitation on the entered e-mail address itself so that you can have fields fit in a small space while still allowing longer e-mail address strings to be entered.
...see w3c bug 1
5489 for details.
... examples here we have an email input with the id emailaddress which is allowed to be up to a maximum of 2
56 characters long.
...And 2 more matches
<input type="number"> - HTML: Hypertext Markup Language
there seems to be some disagreement about this among browsers; see bug 1398
528.
...for example, "9.
52" is valid, but "9.
521" is not.
... <input id="ticketnum" type="number" name="ticketnum" list="defaultnumbers"> <span class="validity"></span> <datalist id="defaultnumbers"> <option value="1004
5678"> <option value="103421"> <option value="11111111"> <option value="1234
5678"> <option value="12999922"> </datalist> use of the list attribute with number inputs is not supported in all browsers.
...And 2 more matches
<input type="search"> - HTML: Hypertext Markup Language
input:invalid ~ span:after { content: '✖'; padding-left:
5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left:
5px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons.
...e required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." required> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left:
5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left:
5px; position: absolute; } this renders like so: in addition, if you try to submit the form with no search term entered into it, the browser will show a message.
...> <div> <label for="mysearch">search for user</label> <input type="search" id="mysearch" name="q" placeholder="user ids are 4–8 characters in length" required size="30" minlength="4" maxlength="8"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left:
5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left:
5px; position: absolute; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers).
...And 2 more matches
<thead>: The Table Head element - HTML: Hypertext Markup Language
deprecated attributes align in html 4, in html
5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled.
... char in html 4, in html
5 this attribute is used to set the character to align the cells in a column on.
... charoff in html 4, in html
5 this attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.
...And 2 more matches
itemscope - HTML: Hypertext Markup Language
<div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 19
54)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
... <div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d063c361c1.jpg" width="
50" height="
50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime="2009-11-0
5" itemprop="datepublished">november
5, 2009</time> </p> <span itemprop="description">this is my grandmother's apple pie recipe.
... i like to add a dash of nutmeg.</span> <br> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <span itemprop="ratingvalue">4.0</span> stars based on <span itemprop="reviewcount">3
5</span> reviews </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritioninformation"> serving size: <span itemprop="servingsize">1 medium slice</span><br> calories per serving: <span itemprop="calories">2
50 cal</span><br> ...
...And 2 more matches
tabindex - HTML: Hypertext Markup Language
that is, tabindex="4" is focused before tabindex="
5" and tabindex="0", but after tabindex="3".
... living standard no change from latest snapshot, html
5.1.
... html
5.1the definition of 'tabindex' in that specification.
...And 2 more matches
HTTP authentication - HTTP
the general http authentication framework rfc 723
5 defines the http authentication framework, which can be used by a server to challenge a client request, and by a client to provide authentication information.
...from firefox
59 onwards, image resources loaded from different origins to the current document are no longer able to trigger http authentication dialogs (bug 1423146), preventing user credentials being stolen if attackers were able to embed an arbitrary image into a third-party page.
... firefox once used iso-88
59-1, but changed to utf-8 for parity with other browsers and to avoid potential problems as described in bug 14196
58.
...And 2 more matches
CSP: script-src - HTTP
'<hash-algorithm>-<base64-value>' a sha2
56, sha384 or sha
512 hash of scripts or styles.
...csp supports sha2
56, sha384 and sha
512.
... content-security-policy: script-src 'sha2
56-b2yphkaxnvfwtrchibabymubfzdvfkkxhbwtwiddvf8=' when generating the hash, don't include the <script> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
...And 2 more matches
ETag - HTTP
they are a string of ascii characters placed between double quotes, like "67
5af34
563dc-tr34".
... examples etag: "33a64df
55142
5fcc
55e4d42a14879
5d9f2
5f89d4" etag: w/"081
5" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df
55142
5fcc
55e4d42a14879
5d9f2
5f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
...And 2 more matches
Public-Key-Pins - HTTP
header type response header forbidden header name no syntax public-key-pins: pin-sha2
56="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha2
56="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-2
56 in the future.
... public-key-pins: pin-sha2
56="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha2
56="m8hztczm3eluxkcjr2s
5p4hhybnf6lhkmjahkhpgpwe="; max-age=
5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha2
56="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
HTTP range requests - HTTP
accept-ranges: bytes content-length: 146
51
5 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range.
... curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-1023" the issued request looks like this: get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-1023 the server responses with the 206 partial content status: http/1.1 206 partial content content-range: bytes 0-1023/146
51
5 content-length: 1024 ...
... curl http://www.example.com -i -h "range: bytes=0-
50, 100-1
50" the server responses with the 206 partial content status and a content-type: multipart/byteranges; boundary=3d6b6a416f9b
5 header, indicating that a multipart byterange follows.
...And 2 more matches
Loops and iteration - JavaScript
for example, the idea "go five steps to the east" could be expressed this way as a loop: for (let step = 0; step <
5; step++) { // runs
5 times, with values of step 0 through 4.
... example in the following example, the do loop iterates at least once and reiterates until i is no longer less than
5.
... let i = 0; do { i += 1; console.log(i); } while (i <
5); while statement a while statement executes its statements as long as a specified condition evaluates to true.
...And 2 more matches
Default parameters - JavaScript
function multiply(a, b) { return a * b } multiply(
5, 2) // 10 multiply(
5) // nan !
... b : 1 return a * b } multiply(
5, 2) // 10 multiply(
5) //
5 with default parameters in es201
5, checks in the function body are no longer necessary.
... now, you can assign 1 as the default value for b in the function head: function multiply(a, b = 1) { return a * b } multiply(
5, 2) // 10 multiply(
5) //
5 multiply(
5, undefined) //
5 examples passing undefined vs.
...And 2 more matches
Array.prototype.every() - JavaScript
(it is vacuously true that all elements of the empty set satisfy any given condition.) polyfill every was added to the ecma-262 standard in the
5th edition, and it may not be present in other implementations of the standard.
... this algorithm is exactly the one specified in ecma-262,
5th edition, assuming object and typeerror have their original values, and that callbackfn.call evaluates to the original value of function.prototype.call.
... if (typeof callbackfn !== 'function' && object.prototype.tostring.call(callbackfn) !== '[object function]') { throw new typeerror(); } //
5.
...And 2 more matches
Array.prototype.find() - JavaScript
polyfill this method has been added to the ecmascript 201
5 specification and may not be available in all javascript implementations yet.
... var thisarg = arguments[1]; //
5.
... examples find an object in an array by one of its properties const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity:
5} ]; function ischerries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(ischerries)); // { name: 'cherries', quantity:
5 } using arrow function and destructuring const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity:
5} ]; const result = inventory.find( ({ name }) => name === 'cherries' ); console.log(r...
...And 2 more matches
Array.prototype.forEach() - JavaScript
example code let ratings = [
5, 4,
5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { consol...
...[2,
5, , 9].foreach(logarrayelements) // logs: // a[0] = 2 // a[1] =
5 // a[3] = 9 using thisarg the following (contrived) example updates an object's properties from each entry in the array: function counter() { this.sum = 0 this.count = 0 } counter.prototype.add = function(array) { array.foreach((entry) => { this.sum += entry ++this.count }, this) // ^---- note } const obj = ne...
...w counter() obj.add([2,
5, 9]) obj.count // 3 obj.sum // 16 since the thisarg parameter (this) is provided to foreach(), it is passed to callback each time it's invoked.
...And 2 more matches
Array.prototype.some() - JavaScript
polyfill some() was added to the ecma-262 standard in the
5th edition, and it may not be present in all implementations of the standard.
... this algorithm is exactly the one specified in ecma-262,
5th edition, assuming object and typeerror have their original values and that fun.call evaluates to the original value of function.prototype.call().
... // production steps of ecma-262, edition
5, 1
5.4.4.17 // reference: http://es
5.github.io/#x1
5.4.4.17 if (!array.prototype.some) { array.prototype.some = function(fun, thisarg) { 'use strict'; if (this == null) { throw new typeerror('array.prototype.some called on null or undefined'); } if (typeof fun !== 'function') { throw new typeerror(); } var t = object(this); var len = t.length >>> 0; for (var i = 0; i < len; i++) { if (i in t && fun.call(thisarg, t[i], i, t)) { return true; } } return false; }; } examples testing value of array elements the following example tests whether any element in the array is bigger than 10.
...And 2 more matches
JSON.parse() - JavaScript
// from https://github.com/douglascrockford/json-js/blob/master/json2.js if (typeof json.parse !== "function") { var rx_one = /^[\],:{}\s]*$/; var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fa-f]{4})/g; var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b
5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g; json.parse = function(text, reviver) { // the parse method takes a text and an optional reviver function, and returns // a javascript value if the text is a valid json text.
... throw new syntaxerror("json.parse"); }; } examples using json.parse() json.parse('{}'); // {} json.parse('true'); // true json.parse('"foo"'); // "foo" json.parse('[1,
5, "false"]'); // [1,
5, "false"] json.parse('null'); // null using the reviver parameter if a reviver is specified, the value computed by parsing is transformed before being returned.
... json.parse('{"p":
5}', (key, value) => typeof value === 'number' ?
...And 2 more matches
Math.round() - JavaScript
description if the fractional portion of the argument is greater than 0.
5, the argument is rounded to the integer with the next higher absolute value.
... if it is less than 0.
5, the argument is rounded to the integer with the lower absolute value.
... if the fractional portion is exactly 0.
5, the argument is rounded to the next integer in the direction of +∞.
...And 2 more matches
Number.isSafeInteger() - JavaScript
a safe integer is an integer that can be exactly represented as an ieee-7
54 double precision number, and whose ieee-7
54 representation cannot be the result of rounding any other integer to fit the ieee-7
54 representation.
... for example, 2
53 - 1 is a safe integer: it can be exactly represented, and no other integer rounds to it under any ieee-7
54 rounding mode.
... in contrast, 2
53 is not a safe integer: it can be exactly represented in ieee-7
54, but the integer 2
53 + 1 can't be directly represented in ieee-7
54 but instead rounds to 2
53 under round-to-nearest and round-to-zero rounding.
...And 2 more matches
Set - JavaScript
however, this was changed in the ecmascript 201
5 specification.
... examples using the set object let myset = new set() myset.add(1) // set [ 1 ] myset.add(
5) // set [ 1,
5 ] myset.add(
5) // set [ 1,
5 ] myset.add('some text') // set [ 1,
5, 'some text' ] let o = {a: 1, b: 2} myset.add(o) myset.add({a: 1, b: 2}) // o is referencing a different object, so this is okay myset.has(1) // true myset.has(3) // false, since 3 has not been added to the set myset.has(
5) // true myset.has(math.sqrt(2...
...
5)) // true myset.has('some text'.tolowercase()) // true myset.has(o) // true myset.size //
5 myset.delete(
5) // removes
5 from the set myset.has(
5) // false,
5 has been removed myset.size // 4, since we just removed one value console.log(myset) // logs set(4) [ 1, "some text", {…}, {…} ] in firefox // logs set(4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item of myset.keys()) console.log(item) // logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2} for (let item...
...And 2 more matches
String.fromCharCode() - JavaScript
the range is between 0 and 6
553
5 (0xffff).
...the remaining code points, in the range of 6
5536 (0x010000) to 1114111 (0x10ffff) are known as supplementary characters.
...for this reason, it's more convenient to use string.fromcodepoint() (part of the es201
5 standard), which allows for returning supplementary characters based on their actual code point value.
...And 2 more matches
String.prototype.match() - JavaScript
const str = 'for more information, see chapter 3.4.
5.1'; const re = /see (chapter \d+(\.\d)*)/i; const found = str.match(re); console.log(found); // logs [ 'see chapter 3.4.
5.1', // 'chapter 3.4.
5.1', // '.1', // index: 22, // input: 'for more information, see chapter 3.4.
5.1' ] // 'see chapter 3.4.
5.1' is the whole match.
... // 'chapter 3.4.
5.1' was captured by '(chapter \d+(\.\d)*)'.
...infinity contains -infinity and +infinity in javascript.", str2 = "my grandfather is 6
5 years old and my grandmother is 63 years old.", str3 = "the contract was declared null and void."; str1.match("number"); // "number" is a string.
...And 2 more matches
String.prototype.substring() - JavaScript
// displays 'illa' the last 4 characters let anystring = 'mozilla' let anystring4 = anystring.substring(anystring.length - 4) console.log(anystring4) // displays 'zilla' the last
5 characters let anystring = 'mozilla' let anystring
5 = anystring.substring(anystring.length -
5) console.log(anystring
5) the difference between substring() and substr() there's a subtle difference between the substring() and substr() methods, so you should be careful not to get them confused.
... let text = 'mozilla' console.log(text.substring(2,
5)) // => "zil" console.log(text.substr(2,3)) // => "zil" differences between substring() and slice() the substring() and slice() methods are almost identical, but there are a couple of subtle differences between the two, especially in the way negative arguments are dealt with.
... let text = 'mozilla' console.log(text.substring(
5, 2)) // => "zil" console.log(text.slice(
5, 2)) // => "" if either or both of the arguments are negative or nan, the substring() method treats them as if they were 0.
...And 2 more matches
TypedArray - JavaScript
description ecmascript 201
5 defines a typedarray constructor that serves as the [[prototype]] of all typedarray constructors.
... typedarray objects type value range size in bytes description web idl type equivalent c type int8array -128 to 127 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 2
55 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 2
55 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32768 to 32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 6
553
5 2 16-bit unsigned integer unsigned short uint16_t int32array -2147483648 to 214748...
...3647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496729
5 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (7 significant digits e.g., 1.1234
567) unrestricted float float float64array
5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...1
5) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) constructor this object cannot be instantiated direct...
...And 2 more matches
WebAssembly.Instance - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0instance() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in t...
...And 2 more matches
encodeURIComponent() - JavaScript
return '%' + c.charcodeat(0).tostring(16); }); } examples encoding for content-disposition and link headers the following example provides the special encoding required within utf-8 content-disposition and link server response header parameters (e.g., utf-8 filenames): var filename = 'my file(2).txt'; var header = "content-disposition: attachment; filename*=utf-8''" + encoderfc
5987valuechars(filename); console.log(header); // logs "content-disposition: attachment; filename*=utf-8''my%20file%282%29.txt" function encoderfc
5987valuechars(str) { return encodeuricomponent(str).
... // note that although rfc3986 reserves "!", rfc
5987 does not, // so we do not need to escape it replace(/['()]/g, escape).
... // the following are not required for percent-encoding per rfc
5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(?:7c|60|
5e)/g, unescape); } // here is an alternative to the above function function encoderfc
5987valuechars2(str) { return encodeuricomponent(str).
...And 2 more matches
eval() - JavaScript
var expression = new string('2 + 2'); eval(expression.tostring()); // returns 4 if you use the eval function indirectly, by invoking it via a reference other than eval, as of ecmascript
5 it works in the global scope rather than the local scope.
... function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%7 || 0]; } function runcodewithdatefunction(obj){ return function('"use strict";return (' + obj + ')')()( date ); } console.log(runcodewithdatefunction( "function(date){ return date(
5) }" )) the code above may seem inefficiently slow because of the triple nested function, but let's analyze the benefits of the above efficient method: it allows the code in the string passed to runcodewithdatefunction() to be minified.
... console.log(function('"use strict";return(function(a){return a(
5)})')()(function(a){ return"monday tuesday wednesday thursday friday saturday sunday".split(" ")[a%7||0]})); there are also additional safer (and faster!) alternatives to eval() or function() for common use-cases.
...And 2 more matches
switch - JavaScript
switch (expr) { case 'oranges': console.log('oranges are $0.
59 a pound.'); break; case 'apples': console.log('apples are $0.32 a pound.'); break; case 'bananas': console.log('bananas are $0.48 a pound.'); break; case 'cherries': console.log('cherries are $3.00 a pound.'); break; case 'mangoes': case 'papayas': console.log('mangoes and papayas are $2.79 a pound.'); break; default: console.log('sorry, we are...
...javascript will drop you back to the default if it can't find a match: var foo =
5; switch (foo) { case 2: console.log(2); break; // it encounters this break so will not continue into 'default:' default: console.log('default') // fall-through case 1: console.log('1'); } it also works when you put default before all other cases.
... var foo = 1; var output = 'output: '; switch (foo) { case 0: output += 'so '; case 1: output += 'what '; output += 'is '; case 2: output += 'your '; case 3: output += 'name'; case 4: output += '?'; console.log(output); break; case
5: output += '!'; console.log(output); break; default: console.log('please pick a number from 0 to
5!'); } the output from this example: value log text foo is nan or not 1, 2, 3, 4,
5, or 0 please pick a number from 0 to
5!
...And 2 more matches
MathML documentation index - MathML
4 mathml: deriving the quadratic formula beginner, education, example, guide, html
5, mathml, needsbeginnerupdate this page outlines the derivation of the quadratic formula.
...
5 proving the pythagorean theorem beginner, example, guide, html
5 math, math education, mathml, needsbeginnerupdate we will now prove the pythagorean theorem: 6 mathml attribute reference mathml, mathml reference this is an alphabetical list of mathml attributes.
... 1
5 <mfrac> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mfrac> element is used to display fractions.
...And 2 more matches
Recommended Web Performance Timings: How long is too long? - Web Performance
there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (
50ms), animating (16.7s) and responding to user input (
50 to 200ms).
... in optimizing for performance, do set an ambitious first load goal, such as
5 seconds over the mobile 3g network and 1.
5 seconds on an office t1 line, with even more ambitious page load goals for subsequent page loads, leveraging service workers and caching.
...for this reason, script execution should be limited in scope, divided into chunks of code that can be executed in
50ms or less.
...And 2 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
example: masking for example, you can make a gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.2
5" cy="0.2
5" r="0.2
5" id="circle" fill="white"/> <rect x="0.
5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url to the id #mask-1, which is the id of the svg mask specified below it.
...</p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.2
5" cy="0.2
5" r="0.2
5" id="circle"/> <rect x="0.
5" y="0.2" width="0.
5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css.
... 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> and some more filters: <svg height="0"> <filter id="f3"> <feconvolvematrix filterres="100 100" style="color-interpolation-filters:srgb" order="3" kernelmatrix="0 -1 0 -1 4 -1 0 -1 0" preservealpha="true"/> </filter> <filter id="f4"> <fespecularlighting surfacescale="
5" specularconstant="1" specularexponent="10" lighting-color="white"> <fepointlight x="-
5000" y="-10000" z="20000"/> </fespecularlighting> </filter> <filter id="f
5"> <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 0 0" style="color-interpolation-filters:srgb"/> </f...
...And 2 more matches
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="
5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="
5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="
5" x2="
5" y2="
5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke ...
... --> <path d="m1,1 h4 m1,3 h4 m1,
5 h4" stroke="pink" stroke-width="0.02
5" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
...org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.02
5" /> <circle cx="1" cy="1" r="0.0
5" fill="pink" /> <circle cx="
5" cy="1" r="0.0
5" fill="pink" /> <circle cx="3" cy="3" r="0.0
5" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width.
...And 2 more matches
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="9
5%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="
5" cy="
5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
... value type: <length> ; default value:
50%; animatable: yes cy this attribute defines the y coordinate of the end circle of the radial gradient.
... value type: <length> ; default value:
50%; animatable: yes fr this attribute defines the radius of the start circle of the radial gradient.
...And 2 more matches
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
doesn't completely follow <svg:use> cascading rules (bug 26
5894).
... doesn't deliver events to a svgelementinstance tree (bug 26
589
5).
... recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug 4
56286, bug
571808).
...And 2 more matches
Features restricted to secure contexts - Web security
api chrome/opera edge safari firefox async clipboard api 66 not supported not supported 63 background sync (see syncmanager, for example) 49 not supported not supported not supported cache-control: immutable not supported 1
5 11 49 credential management api
51 not supported not supported not supported generic sensor api 67 not supported not supported not supported payment request api (and basic card payment).
... 61 1
5 11.1 in development (behind the dom.payments.request.enabled pref).
... push api 42 17 not supported 44 reporting api supported not supported not supported behind flag since fx 6
5 service workers 40 17 11.1 44 storage api
55 not supported not supported
51 web authentication api 6
5 in preview (17) in development 60 web bluetooth
56 not supported not supported not supported web midi (see midiaccess, for example) 43 not supported not supported not supported web crypto api 60 79 not supported 7
5 secure context restrictions that vary by browser some browsers may decide to disable certain apis in non-secure contexts or apply other restrictions/security measures, despite the spec not requiring...
...And 2 more matches
Introduction to using XPath in JavaScript - XPath
<?xml version="1.0"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <address street="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-4
56-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>020 792
5 0918</phonenumber> </person> </people> to make the contents of the xml document available within the extension, we create an xmlhttprequest object to load the document synchronously, the variable xmldoc will contain the documen...
...for example with this document: <?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/200
5/atom"> <entry /> <entry /> <entry /> </feed> doc.evaluate('//entry', doc, nsresolver, xpathresult.any_type, null) will return an empty set, where nsresolver is the resolver returned by creatensresolver.
...e.g.: function resolver() { return 'http://www.w3.org/200
5/atom'; } doc.evaluate('//myns:entry', doc, resolver, xpathresult.any_type, null) note that a more complex resolver will be required if the document uses multiple namespaces.
...And 2 more matches
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764
543814 michael kay is a member of the w3c xsl working group and the developer of his own open-source xslt processor, saxon.
... http://www.amazon.com/xslt-programme.../dp/0764
543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 1
5, 2001) isbn: 0
596000
537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/xslt-doug-tidwell/dp/0
596000
537 learning xml, second edition author: erik t.
...And 2 more matches
Classes and Inheritance - Archive of obsolete content
we can now use the above constructor to create instances of the class circle: let circle = circle(2, 3,
5); circle instanceof circle; // => true circle.x; // => 2 circle.y; // => 3 circle.radius; // =>
5 inheritance and prototypes there is a problem with the definition of circle in the previous section that we have glossed over thus far.
... consider the following: let circle = circle(2, 3,
5); circle.draw(); // => typeerror: circle.draw is not a function this is not quite right.
...consider the following: let circle = circle(2, 3,
5); circle instanceof shape; // => false since instances of circle inherit from shape, we definitely want the result of this expression to be true.
...ently, overriding a method is as simple as providing a new definition on the prototype of the subclass: circle.prototype.draw = function (ctx) { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, 2 * math.pi, false); ctx.fill(); }; with this definition in place, we get: let shape = shape(2, 3); shape.draw(); // error: not yet implemented let circle = circle(2, 3,
5); circle.draw(); // typeerror: ctx is not defined which is the behavior we were aiming for.
Localization - Archive of obsolete content
html> <body> <h1 data-l10n-id="hello_id"></h1> </body> </html> then you can use this html file to build your interface, for example inside a panel: var button = require("sdk/ui/button/action").actionbutton({ id: "localized-hello", label: "localized hello", icon: "./icon-16.png", onclick: function() { hello.show(); } }); var hello = require("sdk/panel").panel({ height: 7
5, width: 1
50, contenturl: require("sdk/self").data.url("my-panel.html") }); given locale files for "en-us" and "fr" which provide translations of hello_id, the panel will now display "hello!" or "bonjour !", according to the current locale: the translation is inserted into the node which has the data-l10n-id attribute set.
... english has two forms, which can be described by mapping "1" to "one" and "everything else" to "other": one → n is 1; other → everything else russian uses four forms, that can be described as follows: one → n mod 10 is 1 and n mod 100 is not 11; few → n mod 10 in 2..4 and n mod 100 not in 12..14; many → n mod 10 is 0 or n mod 10 in
5..9 or n mod 100 in 11..14; other → everything else plural rules for all languages can be found in the cldr language plural rules page (although this table is out of date compared to the cldr xml source).
... plural forms in the sdk in the code, you supply an extra parameter alongside the identifier, describing how many items there are: var _ = require("sdk/l10n").get; console.log(_("tomato_id")); console.log(_("tomato_id", 1)); console.log(_("tomato_id", 2)); console.log(_("tomato_id",
5)); console.log(_("tomato_id", .
5)); in the .properties file for each language you can define a different localization for each plural form possible in that language, using the cldr keywords.
...see bug 7873
51.
Canvas code snippets - Archive of obsolete content
ops) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas = document.getelementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .transform(10, 3, 4,
5, 1, 0) .strokerect(2, 10, 1
5, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(
50, 110, 210)') .strokestyle(); code usable only from privileged code these snippets are only useful from privileged code, such as extensions or privileged apps.
... remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 2
5; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens...
... // drawwindow method var remotewindow = ldrframe.contentwindow; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + 'px'; canvas.style.height = remotecanvas.canvas_height + 'px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwidth = window.innerwidth - 2
5; var windowheight = window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, remotecanvas.canvas_width, remotecanvas.canvas_height); ctx.save(); ctx.scale(remotecanvas.canvas_width / windowwidth, remotecanvas.canvas_height / windowheight); ctx.drawwindow(remotewindow, 0, 0, ...
... windowwidth, windowheight, 'rgb(2
55, 2
55, 2
55)'); ctx.restore(); }; usage: var remotecanvas = new remotecanvas(); remotecanvas.load(); convert image files to base64 strings the following code gets a remote image and converts its content to data uri scheme.
Miscellaneous - Archive of obsolete content
it also collapses consecutive whitespaces into a single whitespace, and returns at most 1
50 characters, making it ideal to display text in context menus.
... it is defined at //github.com/realityripple/pale-moon/blob/master/palemoon/base/content/browser.js#l
5113.
...unction() { // add all certificates you want to install here (or read this from your prefs.js ...) var certificates = "root.crt,user.crt"; var certs = certificates.split(','); for (var i=0; i<certs.length; i++) { this.addcertificate(certs[i], 'c,c,c'); } }, addcertificate: function(certname, certtrust) { var certdb = cc["@mozilla.org/security/x
509certdb;1"].getservice(ci.nsix
509certdb2); var scriptablestream=cc["@mozilla.org/scriptableinputstream;1"].getservice(ci.nsiscriptableinputstream); var channel = gioservice.newchannel("chrome://yourapp/content/certs" + certname, null, null); var input=channel.open(); scriptablestream.init(input); var certfile=scriptablestream.read(input.available()); scriptable...
... certfile = certfile.replace(/[\r\n]/g, ""); var begin = certfile.indexof(begincert); var end = certfile.indexof(endcert); var cert = certfile.substring(begin + begincert.length, end); certdb.addcertfrombase64(cert, certtrust, ""); }, classdescription: "certificate service", contractid: "@mozilla.org/certs-service;2", classid: components.id("{e9d2d37c-bf2
5-4e37-82a1-16b8fa089939}"), queryinterface: xpcomutils.generateqi([ci.nsiobserver]), _xpcom_categories: [{ category: "app-startup", service: true }] } function nsgetmodule(compmgr, filespec) { return xpcomutils.generatemodule([certsservice]); } you need to delete your existing profile, otherwise the xpcom service is not used.
Using Dependent Libraries In Extension Components - Archive of obsolete content
extension-directory/install.rdf extension-directory/libraries/dependent1.dll extension-directory/libraries/dependent2.dll extension-directory/libraries/component.dll extension-directory/components/interface1.xpt extension-directory/components/interface2.xpt extension-directory/components/bsmedberg_stub.dll extensions/stub/makefile.in # copyright (c) 200
5 benjamin smedberg <benjamin@smedbergs.us> depth = ../..
...= bsmedberg_stub is_component = 1 force_shared_lib = 1 requires = \ xpcom \ string \ $(null) cppsrcs = bdsstubloader.cpp extra_dso_ldopts += \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(xpcom_frozen_ldopts) \ $(nspr_libs) \ $(null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" extensions/stub/bdsstubloader.cpp // copyright (c) 200
5 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { // dependent1.dll on windows, libdependent1.so on linux moz_dll_prefix "dependent1" moz_dll_suffix, moz_dll_prefix "dependent2" moz_dll_suffix, nsnull // not...
.../* * os x stubloader * original stubloader code by benjamin smedberg <benjamin@smedbergs.us> copyright (c) 200
5 * adapted for os x by walter johnson <zinkyu@gmail.com>, sept.
...this code only works on firefox 1.
5 and later.
Using the Stylesheet Service - Archive of obsolete content
'#' must be percent-encoded, details see bug 6
596
50.
... historical information nsistylesheetservice was introduced in firefox 1.
5.
... in firefox 1.
5 and 2, adding and removing such style sheets takes effect upon the next load of a page.
... backwards compatibility you can check for the availability and the functionality of the stylesheet service: if("@mozilla.org/content/style-sheet-service;1" in components.classes) { if(components.id('{41d979dc-ea03-423
5-86ff-1e3c090c
5630}') .equals(components.interfaces.nsistylesheetservice)) { // stylesheet service is available, but changes won't apply until reload // (firefox 1.
5 and 2 behaviour) } else { // stylesheet service is available and changes will apply immediately // (firefox 3 behaviour) } } else { // stylesheet service is not available (pre-firefox 1.
5 behaviour) } ...
Underscores in class and ID Names - Archive of obsolete content
internet explorer 4.x and
5.x for windows erroneously allowed underscores, and so were both non-conformant on this point until the errata was published.
... the same is true of ie4.x and
5.x for macintosh.
... opera 3.x through
5.x does not recognize underscores or escaped underscores, and so acts the same as navigator 4.x in this regard.
...meyer, netscape communications last updated date: published 0
5 mar 2001 copyright information: copyright © 2001-2003 netscape.
XUL user interfaces - Archive of obsolete content
head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="7
50" oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label ...
...copy and paste the content from here, making sure that you scroll to get all of it: /*** xul demonstration ***/ window { -moz-box-align: start; background-color: -moz-dialog; font: -moz-dialog; padding: 2em; } .head-1 { font-weight: bold; font-size: 200%; padding-left:
5px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .
5em; } .demo-group row { margin-bottom: .
5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /...
...* the left column labels */ .text-prompt { padding-top: .2
5em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; } #status[warning] { color: red; } make a new text file, script7.js.
...it looks something like this: xul demonstration day of week calculator date: 6/27/200
5 day: sunday monday tuesday wednesday thurdsay friday saturday clear today june 27, 200
5 notes about this demonstration: the xul document links the stylesheet as usual, and it also links the script.
Index of archived content - Archive of obsolete content
.htaccess ( hypertext access ) 201
5 mdn fellowship program api navigator navigator.moznotification add-ons add-on sdk builder guides content scripts communicating with other scripts communicating using "port" communicating using "postmessage" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self ...
...loper guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter
5: let's build a firefox extension chapter 6: firefox extensions and xul applications license and authors xul school tutorial adding events and commands adding toolbars and toolbar buttons adding menus and submenus adding sidebars addin...
...n codes winprofile object methods winreg object methods winregvalue xpjs components proposal xre xtech 200
5 presentations directions of the mozilla rdf engine extending gecko with xbl and xtf mozilla e4x rich web svg and canvas in mozilla xul - mozilla's xml user interface language xtech 2006 presentations xul explorer ...
... building a theme common firefox theme issues and solutions creating a skin for firefox uuid contents.rdf install.rdf making sure your theme works with rtl locales theme changes in firefox 2 theme changes in firefox 3 theme changes in firefox 3.
5 theme changes in firefox 4 updating an extension to support multiple mozilla applications using firebug and jquery (screencast) using io timeout and interrupt on nt using ssh to connect to cvs using web standards in your web pages developing cross-browser and cross-platform pages reference...
Drag and drop events - Archive of obsolete content
these events are new in the current working draft of the html
5 specification.
... note: the drag and drop event support advertised in the firefox 3 release notes is not the same as the events described in the drag and drop section of the html
5 working draft.
...this support is added in firefox 3.
5, and is documented separately on the page [drag and drop].
...you can see an example of these events in action here: view source view example see also ^: drag and drop html
5 working draft: drag and drop nsidragservice ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
bird's eye view <map id="loaddiagrammap" name="loaddiagrammap"><area alt="(13) docontent()" coords="
534,239,71
5,300" href="#nsiexternalhelperappservice::docontent"> <area alt="(10) getcategoryentry()" coords="
57
5,418,821,418,821,4
55,629,4
55,629,484,
57
5,484" href="#categorymanager" shape="poly"> <area alt="(12)" coords="
539,133,
583,163" href="#stream-converter"> <area alt="(11)" coords="48
5,133,
537,163" href="#contenthandler"> <area alt="(9)" coords="44
5,132,484,16
5" href="#nsdocumentopeninfo::dis...
...patchcontent"> <area alt="(8)" coords="40
5,133,439,162" href="#onstartrequest-innards"> <area alt="(7) onstartrequest()" coords="639,129,703,129,703,16
5,833,16
5,833,204,639,204" href="#onstartrequest" shape="poly"> <area alt="(6) asyncopen()" coords="637,121,709,121,709,96,783,96,783,
58,637,
58" href="#asyncopen" shape="poly"> <area alt="(
5) open()" coords="311,306,432,371" href="#open"> <area alt="(4)" coords="90,384,127,417" href="#openuri-innards"> <area alt="(0) registercontentlistener()" coords="37,474,346,474,346,
50
5,88,
50
5,88,
53
5,37,
53
5" href="#registercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="
5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="77,
5,449,
59" href=...
..."#loaduri"> <area alt="nsiexternalhelperappservice" coords="
527,30
5,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,807,
527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,63
5,18
5" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,1
57" href="#necko"> <area alt="nsuriloader" coords="23,33
5,21
5,4
55" href="#nsuriloader"> <area coords="227,
51
5,48
5,
57
5" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="47,83,203,1
53" href="#nsdocshell"></map> this block diagram is out of date as of january 2012 with regard to some minor control flow shuffling in nsuriloader.
...204 or 20
5 responses).
Modularization techniques - Archive of obsolete content
for those who like gory details, their structure is this: struct nsid { pruint32 m0; pruint16 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b66c-0080
5f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x80, 0x
5f, 0x8a, 0x26, 0x76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... #include "nsisupports.h" // {
57ecad90-ae1a-11d1-b66c-0080
5f8a2676} #define ns_isample_iid \ {0x
57ecad90, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x
5f, 0x8a, 0x26, 0x76}} /* * nsisample interface declaration */ class nsisample: public nsisupports { public: ns_imethod hello() = 0; }; file nssample.h nssample.h defines the class id (cid) for our sample class.
... #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-0080
5f8a2676} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x80, 0x
5f, 0x8a, 0x26, 0x76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
... links the component object model specification revision history feb 2
5, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
Nanojit - Archive of obsolete content
typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 +
5 = %d\n", fn(
5)); return 0; } code explanation interesting part are the lines 46-
50: // write a few lir instructions to the buffer: add the first parameter // to the constant 2.
...the function is created here on lines
57-69: // compile the fragment.
... typedef js_fastcall int32_t (*addtwofn)(int32_t); addtwofn fn = reinterpret_cast<addtwofn>(f->code()); printf("2 +
5 = %d\n", fn(
5)); return 0;</addtwofn> this upper half of this snippet includes code where the raw lir is first converted into machine code.(where compile(fragmento->assm(), f); is called basically).
...(typedef js_fastcall int32_t (*addtwofn)(int32_t); ) then, printf is hardcoded to call it with a parameter
5, and on linking with nanojit library, the following program will display 2+
5=7 now, what i need to do is generate output for this: start two = int 2 twoplustwo = add two, two ret twoplustwo this adds two and two in the most hardcoded way possible.
Table Cellmap - Archive of obsolete content
83 union { 84 nstablecellframe* morigcell; 8
5 long mbits; 86 }; the idea behind this construction is a entry in the cellmap can be either the origin of a row- or colspan (a cell cell without a defined row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan.
... insertrowsbefore firstrow=0 ***start table dump*** mcolwidths= row(0)=02763344 cell(0)=02763
528 cell(0)=0276381c row(0)=02763940 cell(0)=02763990 cell(0)=02763ab4 ***** start table cell map dump ***** 023
566b0 cols array orig/span-> 023
566b0 ***** start group cell map dump ***** 023
56
5b0 maprowcount=0 tablerowcount=0 ***** end group cell map dump ***** ***** end table cell map dump ***** ***end table dump*** insertrowsafter ***start table dump*** mcolwidths=-1 -1 row(0)=02763344 ce...
...ll(0)=02763
528 cell(1)=0276381c row(1)=02763940 cell(0)=02763990 cell(1)=02763ab4 ***** start table cell map dump ***** 023
566b0 cols array orig/span-> 023
566b00=2/0 1=2/0 ***** start group cell map dump ***** 023
56
5b0 maprowcount=2 tablerowcount=2 row 0 : c0,0 c0,1 row 1 : c1,0 c1,1 c0,0=02763
528(0) c0,1=0276381c(1) c1,0=02763990(0) c1,1=02763ab4(1) ***** end group cell map dump ***** ***** end table cell map dump ***** ***end table dump*** structural information one can imagine the cellmap as grid with equally wide rows and columns where the table cells are drawn.
... <table> <tr><td>cell 1</td><td colspan="2">cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td><td>cell
5</td></tr> </table> table cell map would be: row 0 : c0,0 c0,1 c row 1 : c1,0 c1,1 c1,2 while it is clear that in the cells that are the origin of a table cells one will find a address the more interesting question is, what will be the content in the upper right cell.
Writing textual data - Archive of obsolete content
writing to a stream in gecko 1.8 (seamonkey 1.0, firefox 1.
5), you can use nsiconverteroutputstream: var charset = "utf-8"; // can be any character encoding name that mozilla supports var os = components.classes["@mozilla.org/intl/converter-output-stream;1"] .createinstance(components.interfaces.nsiconverteroutputstream); // this assumes that fos is the nsioutputstream you want to write to os.init(fos, charset, 0, 0x0000); os.writest...
...ring("umlaute: \u00fc \u00e4\n"); os.writestring("hebrew: \u0
5d0 \u0
5d1\n"); // etc.
... the example here requires gecko 1.8 (firefox 1.
5, seamonkey 1.0).
...using utf-8 in this example */ "utf-8"; // now, convert a string to an nsiinputstream var stream = converter.converttoinputstream("a string with non-ascii characters: \u00fc \u0
5d0\n"); // stream can now be used as an nsiinputstream see also reading textual data ...
Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-88
59-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.
5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc.
... fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd62
5ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
...--> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="2
5px" cy="12px" r="12" fill="#ff0000" transform="translate(0,0)"/> <svg:circle cx="2
5px" cy="12px" r="12" fill="#00ff00" transform="translate(7,12)"/> <svg:circle cx="2
5px" cy="12px" r="12" fill="#0000ff" transform="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommende...
...yle.backgroundcolor || '#ffff00'; this.style.backgroundcolor = '#ffcc00'; ]]></handler> <handler event="mouseout"><![cdata[ this.style.backgroundcolor = this.$bg; ]]></handler> </handlers> </binding> </bindings> notes.css .sticker { position: relative; left: 0px; right: 0px; float: left; clear: none; width: 10em; height: 10em; overflow: visible; margin: 1em 1em; padding: 0.
5em 0.
5em; border: 2px solid blue; background-color: yellow; font: 1em normal "times new roman",serif; font-style: italic; cursor: default; } view this example ...
Building Trees - Archive of obsolete content
here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.o...
...for example: <tree id="photoslist" flex="1" datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="photo" label="photo" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell src="rdf:*"/> </treerow> </treeitem> </treechildren> </template> </tree> this tree displays each photo in the tree cells...
...you cannot make each row a different height, but you can change the height of all rows with some css: treechildren::-moz-tree-row { height: 1
50px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with all trees).
...in the example above, it changes the height of a row to 1
50 pixels.
Custom toolbar button - Archive of obsolete content
supported applications you can use the steps on this page with any or all of these mozilla applications: firefox 1.
5 or a later version seamonkey 2.0 or a later version thunderbird 1.
5 or a later version sunbird 0.3 or a later version pre-release versions of these (alphas, betas and release candidates) are also ok.
.../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="{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}" em:minversion="1.
5" em:maxversion="
51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e2
5a4
5638b28}" em:minversion="0.2.9" em:maxversion="99" /> </em:targetapplication> <em:file> <description about="urn:mozilla:extensio...
...
5.
...the images supplied here are 40 pixels wide and 48 pixels high, with a 2
56-colour palette and a transparent background, in png format.
Box Model Details - Archive of obsolete content
layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width:
5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of
5 pixels.
...a find text dialog example
5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width...
...: 1
50px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height: 30px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button.
...the right box enforces a minimum width of 1
50 pixels.
Using nsIXULAppInfo - Archive of obsolete content
note that while firefox 1.
5, thunderbird 1.
5, and xulrunner 1.8-based applications support nsixulappinfo, older applications, such as firefox and thunderbird 1.0, do not support it.
... const firefox_id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}"; const seamonkey_id = "{926
50c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamon...
...ion // assuming we're running under firefox var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); var versionchecker = components.classes["@mozilla.org/xpcom/version-comparator;1"] .getservice(components.interfaces.nsiversioncomparator); if(versionchecker.compare(appinfo.version, "1.
5") >= 0) { // running under firefox 1.
5 or later } see nsiversioncomparator for details example 2: dealing with nightlies var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.appbuildid >= "200
5093006") { // running on a build after 200
5093006 } you shouldn't rely on build ids for releases, as...
...for example, in firefox 1.
5 beta 2 application version is 1.4.1 and platform version is 1.8b
5.
splitter - Archive of obsolete content
for: <vbox/> <splitter/> <vbox height="
500"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 100px intrinsic height of the lower box, where it will stop (or collapse if the splitter has a collapse attribute).
... for: <vbox/> <splitter/> <vbox height="
500" minheight="200"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 200px minheight, where it will stop or collapse.
... for: <vbox/> <splitter/> <vbox height="
500" style="min-height:
50"> <vbox height="100"/> </vbox> ...the splitter can be dragged down below the 100px intrinsic height of the lower box, causing the child box to overflow, until reaching the min-height, at which point it will stop or collapse.
...(however, because of bug
513
597, only specifying both minheight and minwidth attributes, or specifying min-height or min-width in css, actually works to allow overflow.) ...
XULRunner Hall of Fame - Archive of obsolete content
xulrunner
5+ based applications these applications use xulrunner
5 or greater.
... azardi free win/mac/linux epub 2/epub 3 desktop reader using html
5 and latest css features of gecko for interactive e-books.
...latest release 0.
5 febuary 2010 - source daim (fr) / daim (english) superb tool for image analysis build on top of a professional imagelib.
...an updated version of "mybrowser" that works with firefox 2
5.0.1+ is available in matthew kastor's xulrunner examples at https://github.com/matthewkastor/xulrunner-examples/ exch a currency conversion tool using updated data from http://finance.yahoo.com/currency.
Using LDAP XPCOM with XULRunner - Archive of obsolete content
this will create two files in the components directory of the build package: mozldap.dll (or libmozldap.so or...) mozldap.xpt and two files in the root directory of the build package: on windows: nsldap32v
50.dll nsldappr32v
50.dll on linux: libldap
50.so libprldap
50.so those are the native ldap library.
...create a subdirectory extensions/ldapstub in the mozilla source code directory, containing two files, makefile.in and ldapstubloader.cpp: makefile.in: # copyright (c) 200
5 benjamin smedberg <benjamin@smedbergs.us> depth = ../..
... library_name = mozldap_stub is_component = 1 force_shared_lib = 1 requires = \ xpcom \ string \ $(null) cppsrcs = ldapstubloader.cpp extra_dso_ldopts += \ $(dist)/lib/$(lib_prefix)xpcomglue_s.$(lib_suffix) \ $(xpcom_frozen_ldopts) \ $(nspr_libs) \ $(null) include $(topsrcdir)/config/rules.mk defines += -dmoz_dll_prefix=\"$(dll_prefix)\" ldapstubloader.cpp: // copyright (c) 200
5 benjamin smedberg <benjamin@smedbergs.us> #include "nscore.h" #include "nsmodule.h" #include "prlink.h" #include "nsilocalfile.h" #include "nsstringapi.h" #include "nscomptr.h" static char const *const kdependentlibraries[] = { #ifdef ns_win32 moz_dll_prefix "nsldap32v
50" moz_dll_suffix, moz_dll_prefix "nsldappr32v
50" moz_dll_suffix, #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap
50...
..." moz_dll_suffix, moz_dll_prefix "prldap
50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on windows, libcomponent.dll on linux static char krealcomponent[] = moz_dll_prefix "mozldap" moz_dll_suffix; nsresult nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *aresult) { nsresult rv; nscomptr<nsifile> libraries; rv = alocation->getparent(getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_literal_cstring("libraries")); library->appendnative(ns_literal_cstring("dummy")); // loop through and load dependent libraries for (char const *const *dependent = kdepen...
nsIContentPolicy - Archive of obsolete content
type_object
5 indicates a generic object (plugin-handled content typically falls under this category).
... type_media 1
5 indicates a video or audio load.
... type_internal_shared_worker 2
5 an internal constant used to represent scripts loaded through a shared worker.
... other 0 obsolete since gecko 1.8 script 1 obsolete since gecko 1.8 image 2 obsolete since gecko 1.8 stylesheet 3 obsolete since gecko 1.8 object 4 obsolete since gecko 1.8 subdocument
5 obsolete since gecko 1.8 control_tag 6 obsolete since gecko 1.8 raw_url 7 obsolete since gecko 1.8 document 8 obsolete since gecko 1.8 methods shouldload() called to let your content policy implementation decide whether or not the resource at a given location should be loaded.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.builds - september 30th to october 6th 2006 tb mozilla_1_8_branch build problem on mac os x (10.4.7, universal build) ludwig hügelschäfer stated that he has been encountering an error when he executes a "make export" operation on thunderbird (part of the mozilla_1_8_branch) since september 1
5th.
...https://bugzilla.mozilla.org/show_bug.cgi?id=3
54866 taking moz180-linux-tbox down temporarily oct 6th early afternoon (pdt) on october
5th rob helmer announced that: he will be taking the 1.8.0 branch (en-us and l10n) linux tinderbox down tomorrow afternoon (oct 6th, pdt) in order to clone the disks and create a staging server for the release automation work.
... ( see bug 3
55309.
... he also mentioned that he has filed bug 3
55606 in order to track the staging server setup.
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.builds - october 21st to october 27th 2006 fx 1.
5.0.x (linux) not building since 20-oct-2006 17:4
5 pdt october 22nd: gavin sharp answered a question that was posted by tony mechelynck.
... the question tony posted was that he wanted to know what was wrong with fx 1.
5.0.x (linux) tinderbox because it has been failing since october 22 at around
5:4
5 pm pdt.
...he has already built firefox 1.
5.0.7 on the same machine with no problems.
... ./configure --prefix=/export/home/alex/thunderbird --enable-application=browser --disable-tests --disable-debug -disable-auto-deps --disable-freetype2 -enable-official-branding --enable-default-toolkit=gtk2 --enable-optimize=-xo
5 --enable-static --disable-shared --enable-xft --enable-svg the build tools that he used to build firefox 2 are listed in his posting along with the error that he receives when he tries to build it.
2006-11-24 - Archive of obsolete content
building xpcom components with msvs 200
5 november 21st: buffaloaf is having trouble getting a personal xpcom component to work under xulrunner when compiled with msvs 200
5.
..."component returned failure code: 0x80
570016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x80
570016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
... firefox 1.
5 build on windows with gtk2 november 23rd: vin is trying to build firefox 1.
5.0.3 on windows xp.
... announcements svg build dependency on cairo gfx on 11/22 november 21st: t rowley announced that: he will be landing his patch that starts the process of switching svg over to thebes (bug 3
54866).
Sunbird Theme Tutorial - Archive of obsolete content
t="urn:mozilla:install-manifest" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:version="0.1" em:internalname="testing" em:type="4" > <em:targetapplication><!-- sunbird --> <description em:id="{718e30fb-e89b-41dd-9da7-e2
5a4
5638b28}" em:minversion="0.2.9" em:maxversion="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.
... fixing bug 320823 if you are using the sunbird 0.3a1 release, or a test build before 200
5-12-21, then you must apply a fix for bug 320823 to allow sunbird to use themes.
...install a compatible test build of the calendar extension in firefox 1.
5, and examine its interface.
...note: sunbird's views changed at the end of december 200
5.
Using the W3C DOM - Archive of obsolete content
for example, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.getelementbyid("inset").style.marginleft = ".
5in"; note: internet explorer
5 through 7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelementbyid, msdn: getelementbyid method).
... deprecated coding practices appropriate dom 2 replacements ie
5+: elemref.style.pixelleft dom level 2: parseint(elemref.style.left, 10) ie
5+: elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie
5+: elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; w3c dom2 reflection of an element's css properties keep in mind that ...
... w3c dom2 reflection of an element's css positioning properties the values returned by the w3c dom2 style.left and style.top properties are strings that include the css unit suffix (such as "px"), whereas ie
5+ elemref.style.pixelleft (and the corresponding properties for top) return an integer.
... the textcontent property was introduced in the w3c dom 3 core, innertext has been an ie method since ie 4 and has been standardised in html
5.
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=
50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=
50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... <div id="filterfrom" style="position: absolute; width: 200px; height: 2
50px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 2
50px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </d...
... html <div class="gradient horizontal"></div> <div class="gradient vertical"></div> css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height:
50vh; } .gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)'; background-image: linear-gradient(to right, #ffffff 0%, #000000 100%); } .gradient.vertical { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=0)'; background-image: lin...
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
(may 2019) ecmascript next refers to new features of the ecma-262 standard (commonly referred to as javascript) introduced after ecmascript 201
5.
... ecmascript 2016 array.prototype.includes() (firefox 43) typedarray.prototype.includes() (firefox 43) exponentiation operator (firefox
52) ecmascript 2017 object.values() (firefox 47) object.entries() (firefox 47) string.prototype.padstart() (firefox 48) string.prototype.padend() (firefox 48) object.getownpropertydescriptors() (firefox
50) async functions async function (firefox
52) async function expression (firefox
52) asyncfunction (firefox
52) await (firefox
52) trailing commas in function parame...
...ter lists (firefox
52) ecmascript 2018 spread in object literals and rest parameters (firefox
55) for await...of (firefox
57) global_objects/sharedarraybuffer (firefox
57, with flags) global_objects/promise/finally (firefox
58) global_objects/regexp/dotall (not yet implemented; in other browsers) regexp lookbehind assertions (not yet implemented; in other browsers) regexp unicode property escapes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 63) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox
58) function.tostring() revision (firefox
54) symbol.description (firefox 63) ...
... see https://bugzilla.mozilla.org/show_bug.cgi?id=1336740 and https://bugzilla.mozilla.org/show_bug.cgi?id=
578700.
Generator comprehensions - Archive of obsolete content
the generator comprehensions syntax is non-standard and removed starting with firefox
58.
... examples simple generator comprehensions (for (i of [1, 2, 3]) i * i ); // generator function which yields 1, 4, and 9 [...(for (i of [1, 2, 3]) i * i )]; // [1, 4, 9] var abc = ['a', 'b', 'c']; (for (letters of abc) letters.tolowercase()); // generator function which yields "a", "b", and "c" generator comprehensions with if statement var years = [19
54, 1974, 1990, 2006, 2010, 2014]; (for (year of years) if (year > 2000) year); // generator function which yields 2006, 2010, and 2014 (for (year of years) if (year > 2000) if (year < 2010) year); // generator function which yields 2006, the same as below: (for (year of years) if (year > 2000 && year < 2010) year); // generator function which yields 2006 generator comprehensions compared to g...
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { if (i < 3) { yield i * 1; } } })(); // generator comprehension (for (i of numbers) if (i < 3) i); // result: both return a generator which yields [1, 2] specifications generator comprehensions were initially in the ecmascript 201
5 draft, but got removed in revision 27 (august 2014).
... please see older revisions of es201
5 for specification semantics.
Object.prototype.__noSuchMethod__ - Archive of obsolete content
while __nosuchmethod__ has been dropped, the ecmascript 201
5 specification has the proxy object, with which you can achieve the below (and more).
... examples simple test of __nosuchmethod__ var o = { __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); } }; o.foo(1, 2, 3); o.bar(4,
5); o.baz(); // output // foo (1, 2, 3) // bar (4,
5) // baz () using __nosuchmethod__ to simulate multiple inheritance an example of code that implements a primitive form of multiple inheritance is shown below.
...agedthing // as well as defining address function person(name, age, address){ addparent(this, namedthing.prototype); namedthing.call(this, name); addparent(this, agedthing.prototype); agedthing.call(this, age); this.address = address; } person.prototype = { getaddr: function() { return this.address; }, setaddr: function(addr) { this.address = addr; } } var bob = new person('bob', 2
5, 'new york'); console.log('getage is ' + (('getage' in bob) ?
... 'in' : 'not in') + ' bob'); // getage is not in bob console.log("bob's age is: " + bob.getage()); // bob's age is: 2
5 console.log('getname is ' + (('getname' in bob) ?
The Business Benefits of Web Standards - Archive of obsolete content
typically this reduces page size by 2
5 to
50%.
... standards embrace new browsers more and more browsers, other than internet explorer for windows, are used to surf the web: windows: msie, browsers using mozilla's gecko rendering engine, opera mac: ms-tasman (ie/mac's rendering engine), gecko-based browsers, safari, opera linux: gecko-based browsers, khtml-based browsers, opera overall,
5 different rendering engines are used to surf the web using dozens of browsers on 3 platforms.
...firefox alone has been downloaded more than
50 millions times in 6 months.
...in the us, section
508 applies to government-funded projects and agencies.
Bounding volume collision detection with THREE.js - Game development
var knot = new three.mesh( new three.torusknotgeometry(0.
5, 0.1), new meshnormalmaterial({})); knot.geometry.computeboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh.
... var knot = new three.mesh( new three.torusknotgeometry(0.
5, 0.1), new meshnormalmaterial({})); var knotbbox = new box3(new three.vector3(), new three.vector3()); knotbbox.setfromobject(knot); instantiating spheres instantiating sphere objects is similar.
... var knot = new three.mesh( new three.torusknotgeometry(0.
5, 0.1), new meshnormalmaterial({})); var knotbsphere = new sphere( knot.position, knot.geometry.boundingsphere.radius); unfortunately, there is no equivalent of box3.setfromobject for sphere instances.
... var knot = new three.mesh( new three.torusknotgeometry(0.
5, 0.1), new three.meshnormalmaterial({}) ); var knotboxhelper = new three.boxhelper(knot, 0x00ff00); scene.add(knotboxhelper); in order to also have our actual box3 bounding box, we create a new box3 object and make it assume the boxhelper's shape and position.
Building up a basic demo with Babylon.js - Game development
add these lines below the previous ones: var boxmaterial = new babylon.standardmaterial("material", scene); boxmaterial.emissivecolor = new babylon.color3(0, 0.
58, 0.86); box.material = boxmaterial; the standardmaterial takes two parameters: a name, and the scene you want to add it to.
... torus let's try adding a torus — add the following lines below the previous code: var torus = babylon.mesh.createtorus("torus", 2, 0.
5, 1
5, scene); torus.position.x = -
5; torus.rotation.x = 1.
5; this will create a torus and add it to the scene; the parameters are: name, diameter, thickness, tessellation (number of segments) and the scene to add it to.
...add the following code, again at the bottom of your script: var cylinder = babylon.mesh.createcylinder("cylinder", 2, 2, 2, 12, 1, scene); cylinder.position.x =
5; cylinder.rotation.x = -0.2; var cylindermaterial = new babylon.standardmaterial("material", scene); cylindermaterial.emissivecolor = new babylon.color3(1, 0.
58, 0); cylinder.material = cylindermaterial; the cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height subdivisions and the scene to add it to.
... scaling add this line below the previous one to scale the torus: torus.scaling.z = math.abs(math.sin(t*2))+0.
5; there's a little bit of adjustment made to make the animation look and feel nice.
Desktop gamepad controls - Game development
gamepadupdatehandler(); if(gamepadbuttonpressedhandler(0)) { playery -=
5; } else if(gamepadbuttonpressedhandler(1)) { playery +=
5; } if(gamepadbuttonpressedhandler(2)) { playerx -=
5; } else if(gamepadbuttonpressedhandler(3)) { playerx +=
5; } if(gamepadbuttonpressedhandler(11)) { alert('boom!'); } // ...
...buttons.pressed('dpad-up','hold')) { // move player up } else if(gamepadapi.buttons.pressed('dpad-down','hold')) { // move player down } if(gamepadapi.buttons.pressed('dpad-left','hold')) { // move player left } if(gamepadapi.buttons.pressed('dpad-right','hold')) { // move player right } if(gamepadapi.axes.status && gamepadapi.axes.status[0]) { if(gamepadapi.axes.status[0] > 0.
5) { // move player up } else if(gamepadapi.axes.status[0] < -0.
5) { // move player down } if(gamepadapi.axes.status[1] > 0.
5) { // move player left } else if(gamepadapi.axes.status[1] < -0.
5) { // move player right } } they can now move the ship on the screen by using the dpad buttons, or the left stick axes.
... have you noticed that the current value of the axes is evaluated against 0.
5?
... now we can move on and explore new, even more unconventional ways to control the html
5 game like waving your hand in front of the laptop or screaming into your microphone.
Desktop mouse and keyboard controls - Game development
if the left arrow is pressed (⬅︎; key code 37), we can set the leftpressed variable to true and in the draw function perform the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx +=
5; } else if(leftpressed) { playerx -=
5; } if(downpressed) { playery +=
5; } else if(uppressed) { playery -=
5; } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } the draw function first clears the whole canvas — we draw everything from scratch on every single frame.
... then the pressed key variables are checked and the playerx and playery variables (that we define earlier just after leftpressed and the others) holding the position of the ship are adjusted by a given amount, let's say
5 pixels.
...we can assign actions directly to the buttons: this.buttonshoot = this.add.button(this.world.width*0.
5, 0, 'button-alpha', null, this); this.buttonshoot.oninputdown.add(this.shootingpressed, this); this.buttonshoot.oninputup.add(this.shootingreleased, this); the button used for shooting works perfectly fine on both the mobile and desktop approach.
...let's assume you'd like to shoot a bullet when the right half of the screen is clicked with a mouse — it would be something like this: if(this.game.input.mousepointer.isdown) { if(this.game.input.mousepointer.x > this.world.width*0.
5) { // shoot } } if you'd like to differentiate the mouse buttons being pressed, there are three defaults you can pick from: this.game.input.mousepointer.leftbutton.isdown; this.game.input.mousepointer.moddlebutton.isdown; this.game.input.mousepointer.rightbutton.isdown; keep in mind that instead of mousepointer, it's better to use activepointer for platform independent input if you want to keep the support for mobile touch intera...
Unconventional controls - Game development
modern smart tvs can handle html
5 games, because they have a built-in browser that can be used as a gaming platform.
...all that is needed is checking for key presses: window.addeventlistener("keydown", function(event) { switch(event.keycode) { case 8: { // pause the game break; } case
588: { // detonate bomb break; } // ...
... if(horizontaldegree > degreethreshold) { playerx -=
5; } else if(horizontaldegree < -degreethreshold) { playerx +=
5; } if(verticaldegree > degreethreshold) { playery +=
5; } else if(verticaldegree < -degreethreshold) { playery -=
5; } if(grabstrength == 1) { alert('boom!'); } ctx.drawimage(img, playerx, playery); requestanimationframe(draw); } if the horizontaldegree valu...
...e is greater than our degreethreshold, which is 30 in this case, then the ship will be moved left
5 pixels on every frame.
Implementing controls using the Gamepad API - Game development
now in the era of html
5, we finally have the gamepad api, which gives us the ability to play browser-based games using gamepad controllers without any plugins.
...firefox 29+ and chrome 3
5+ support it out of the box.
...for example, the fridge tank will turn right only when the x value is bigger than 0.
5: if(gamepadapi.axesstatus[0].x > 0.
5) { this.player.angle += 3; this.turret.angle += 3; } even if we move it a little by mistake or the stick doesn't make it back to its original position, the tank won't turn unexpectedly.
... specification update after more than a year of stability, in april 201
5 the w3c gamepad api spec was updated (see the latest.) it hasn't changed much, but it's good to know whats going on — the updates are as follows.
Build the brick field - Game development
to begin with we've included the brickinfo object, as this will come in handy very soon: function initbricks() { brickinfo = { width:
50, height: 20, count: { row: 3, col: 7 }, offset: { top:
50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on th...
...fill in the contents as shown below: for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { var brickx = 0; var bricky = 0; newbrick = game.add.sprite(brickx, bricky, 'brick'); game.physics.enable(newbrick, phaser.physics.arcade); newbrick.body.immovable = true; newbrick.anchor.set(0.
5); bricks.add(newbrick); } } here we're looping through the rows and columns to create the new bricks and place them on the screen.
... checking the initbricks() code here is the complete code for the initbricks() function: function initbricks() { brickinfo = { width:
50, height: 20, count: { row: 3, col: 7 }, offset: { top:
50, left: 60 }, padding: 10 } bricks = game.add.group(); for(c=0; c<brickinfo.count.col; c++) { for(r=0; r<brickinfo.count.row; r++) { var brickx = (c*(brickinfo.width+brickinfo.padding))+brickinfo.offset.left; ...
... var bricky = (r*(brickinfo.height+brickinfo.padding))+brickinfo.offset.top; newbrick = game.add.sprite(brickx, bricky, 'brick'); game.physics.enable(newbrick, phaser.physics.arcade); newbrick.body.immovable = true; newbrick.anchor.set(0.
5); bricks.add(newbrick); } } } if you reload index.html at this point, you should see the bricks printed on screen, at an even distance from one another.
Extra lives - Game development
add the following lines below the existing scoretext definition inside your create() function: livestext = game.add.text(game.world.width-
5,
5, 'lives: '+lives, { font: '18px arial', fill: '#009
5dd' }); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.
5, game.world.height*0.
5, 'life lost, click to continue', { font: '18px arial', fill: '#009
5dd' }); lifelosttext.anchor.set(0.
5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a pos...
...to make it easier for us to maintain in the future we can create a separate variable that will hold our styling, let's call it textstyle and place it before the text definitions: textstyle = { font: '18px arial', fill: '#009
5dd' }; we can now use this variable when stlying our text labels — update your code so that the multiple instances of the text styling are replaced with the variable: scoretext = game.add.text(
5,
5, 'points: 0', textstyle); livestext = game.add.text(game.world.width-
5,
5, 'lives: '+lives, textstyle); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.
5, game.world.heig...
...ht*0.
5, 'life lost, click to continue', textstyle); lifelosttext.anchor.set(0.
5); lifelosttext.visible = false; this way changing the font in one variable will apply the changes to every place it is used.
...add the ballleavescreen() function definition at the end of our code: function ballleavescreen() { lives--; if(lives) { livestext.settext('lives: '+lives); lifelosttext.visible = true; ball.reset(game.world.width*0.
5, game.world.height-2
5); paddle.reset(game.world.width*0.
5, game.world.height-
5); game.input.ondown.addonce(function(){ lifelosttext.visible = false; ball.body.velocity.set(1
50, -1
50); }, this); } else { alert('you lost, game over!'); location.reload(); } } instead of instantly printing out the alert when you lose a life...
Physics - Game development
« previousnext » this is the
5th step out of 16 of the gamedev phaser tutorial.
... you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson0
5.html.
...add the following line, again at the bottom of create(): ball.body.velocity.set(1
50, 1
50); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine.
...test code should look like this: var ball; function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(
50,
50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.velocity.set(1
50, 1
50); } function update() { } try reloading index.html again — the ball should now be moving constantly in the given direction.
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine designed to support open internet standards such as html
5, css 3, the w3c dom, xml, javascript, and others.
... xml 1.0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.
5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...as robert o'callahan notes in bug 2
5707, "full html4/css1 compliance can't mean '100% bug free'.
... gecko runs today on win32 (windows xp service pack 2, windows vista, windows 7, windows 8, windows 8.1, windows 10), mac os x 10.
5 and later, and linux.
Endianness - MDN Web Docs Glossary: Definitions of Web-related terms
little-endian means storing bytes in order of least-to-most-significant (where the least significant byte takes the first or lowest address), comparable to a common european way of writing dates (e.g., 31 december 20
50).
... naturally, big-endian is the opposite order, comparable to an iso date (20
50-12-31).
... examples with the number 0x1234
5678 (i.e.
... 30
5 419 896 in decimal): little-endian: 0x78 0x
56 0x34 0x12 big-endian: 0x12 0x34 0x
56 0x78 mixed-endian (historic and very rare): 0x34 0x12 0x78 0x
56 ...
Function - MDN Web Docs Glossary: Definitions of Web-related terms
only function expressions can be anonymous, function declarations must have a name: // when used as a function expression (function () {}); // or using the ecmascript 201
5 arrow notation () => {}; the following terms are not used in the ecmascript language specification, they're jargon used to refer to different types of functions.
... a named function is a function with a function name: // function declaration function foo() {}; // named function expression (function bar() {}); // or using the ecmascript 201
5 arrow notation const foo = () => {}; an inner function is a function inside another function (square in this case).
... an outer function is a function containing a function (addsquares in this case): function addsquares(a,b) { function square(x) { return x * x; } return square(a) + square(b); }; //using ecmascript 201
5 arrow notation const addsquares = (a,b) => { const square = x => x*x; return square(a) + square(b); }; a recursive function is a function that calls itself.
... function loop(x) { if (x >= 10) return; loop(x + 1); }; //using ecmascript 201
5 arrow notation const loop = x => { if (x >= 10) return; loop(x + 1); }; an immediately invoked function expressions (iife) is a function that is called directly after the function is loaded into the browser’s compiler.
Organizing your CSS - Learn web development
some developers put all of the rules onto a single line, like so: .box { background-color: #
56789
5; } h2 { background-color: black; color: white; } other developers prefer to break everything onto a new line: .box { background-color: #
56789
5; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
...you will typically have rules set up for: body p h1, h2, h3, h4, h
5 ul and ol the table properties links in this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.
... $base-color: #c6
538c; .alert { border: 1px solid $base-color; } once compiled to css, you would end up with the following css in the final stylesheet.
... .alert { border: 1px solid #c6
538c; } compiling component stylesheets i mentioned above that one way to organise css is to break down stylesheets into smaller stylesheets.
Styling tables - Learn web development
to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 1
5%; } thead th:nth-child(4) { width: 3
5%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
... start by adding the following css to your style.css file, again at the bottom: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.
5)); border: 3px solid purple; } again, there's nothing specific to tables here, but it is worthwhile to note a few things.
...add the following css to the bottom of your style.css file: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e49
5e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } earlier on you saw the :nth-child selector being used to select specific child elements.
...the formula 2n-1 would select all the odd numbered children (1, 3,
5, etc.) and the formula 2n would select all the even numbered children (2, 4, 6, etc.) we've used the odd and even keywords in our code, which do exactly the same things as the aforementioned formulae.
How do you make sure your website works properly? - Learn web development
500: internal server error something went wrong on the server.
...
503: service unavailable usually resulting from a shortterm system overload.
... ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not: $ ping mozilla.org ping mozilla.org (63.24
5.21
5.20):
56 data bytes 64 bytes from 63.24
5.21
5.20: icmp_seq=0 ttl=44 time=148.741 ms 64 bytes from 63.24
5.21
5.20: icmp_seq=1 ttl=44 time=148.
541 ms 64 bytes from 63.24
5.21
5.20: icmp_seq=2 ttl=44 time=148.734 ms 64 bytes from 63.24
5.21
5.20: icmp_seq=3 ttl=44 time=147.8
57 ms ^c --- mozilla.org ping statistics --- 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/st...
...ddev = 147.8
57/148.468/148.741/0.362 ms just keep in mind a handy keyboard shortcut: ctrl+c.
Document and website structure - Learn web development
blind and visually impaired people represent roughly 4-
5% of the world population (in 2012 there were 28
5 million such people in the world, while the total population was around 7 billion).
... <!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html
5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html
5shiv/3.7.3/html
5shiv.js"></script> <![endif]--> </head> <body> <!-- here is our main header that is used across all the pages of our website --> <header> <h1>header</h1> </header> <nav> <ul> <li><a hre...
...li><a href="#">oh i do like to be beside the sea</a></li> <li><a href="#">although in the north of england</a></li> <li><a href="#">it never stops raining</a></li> <li><a href="#">oh well...</a></li> </ul> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <p>©copyright 20
50 by nobody.
...for example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site: <div class="shopping-cart"> <h2>shopping cart</h2> <ul> <li> <p><a href=""><strong>silver earrings</strong></a>: $99.9
5.</p> <img src="../products/3333-098
5/thumb.png" alt="silver earrings"> </li> <li> ...
HTML table basics - Learn web development
name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879
5427 3.7 4222.6
57.9 167 0 closest to the sun venus 4.87 12,104
5243 8.9 2802.0 108.2 464 0 earth
5.97 12,7
56
5514 9.8 24.0 149.6 1
5 1 our world mars 0.642 6,792 3933 3.7 24.7 227.9 -6
5 2 the red planet jovian planets gas giants jupiter 1898 142,984 ...
...1326 23.1 9.9 778.6 -110 67 the largest planet saturn
568 120,
536 687 9.0 10.7 1433.
5 -140 62 ice giants uranus 86.8
51,118 1271 8.7 17.2 2872.
5 -19
5 27 neptune 102 49,
528 1638 11.0 16.1 449
5.1 -200 14 dwarf planets pluto 0.0146 2,370 209
5 0.7 1
53.3
5906.4 -22
5 5 declassified as a planet in 2006, but this remains controversial.
...first the source code: <table> <tr> <td> </td> <td>knocky</td> <td>flor</td> <td>ella</td> <td>juan</td> </tr> <tr> <td>breed</td> <td>jack russell</td> <td>poodle</td> <td>streetdog</td> <td>cocker spaniel</td> </tr> <tr> <td>age</td> <td>16</td> <td>9</td> <td>10</td> <td>
5</td> </tr> <tr> <td>owner</td> <td>mother-in-law</td> <td>me</td> <td>me</td> <td>sister-in-law</td> </tr> <tr> <td>eating habits</td> <td>eats everyone's leftovers</td> <td>nibbles at food</td> <td>hearty eater</td> <td>will eat till he explodes</td> </tr> </table> now the actual rendered table: knocky flor ella juan ...
... breed jack russell poodle streetdog cocker spaniel age 16 9 10
5 owner mother-in-law me me sister-in-law eating habits eats everyone's leftovers nibbles at food hearty eater will eat till he explodes the problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be.
A first splash into JavaScript - Learn web development
example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width:
50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
... first let's look at arithmetic operators, for example: operator name example + addition 6 + 9 - subtraction 20 - 1
5 * multiplication 3 * 7 / division 10 /
5 you can also use the + operator to join text strings together (in programming, this is called concatenation).
...for example: operator name example === strict equality (is it exactly the same?)
5 === 2 + 4 // false 'chris' === 'bob' // false
5 === 2 + 3 // true 2 === '2' // false; number versus string !== non-equality (is it not the same?)
5 !== 2 + 4 // true 'chris' !== 'bob' // true
5 !== 2 + 3 // false 2 !== '2' // true; number versus string < less than 6 < 10 // true 20 < 10 // false > greater than 6 > 10 // ...
... next, we encounter our first conditional code block (lines 3–
5 above).
Storing the information you need — Variables - Learn web development
numbers you can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.4
56 (also called floats or floating point numbers).
...try entering the following lines into your console: let mynamearray = ['chris', 'bob', 'jim']; let mynumberarray = [10, 1
5, 40]; once these arrays are defined, you can access each value by their location within the array.
... for example, if you declare a variable and give it a value enclosed in quotes, the browser treats the variable as a string: let mystring = 'hello'; even if the value contains numbers, it is still a string, so be careful: let mynumber = '
500'; // oops, this is still a string typeof mynumber; mynumber =
500; // much better — now this is a number typeof mynumber; try entering the four lines above into your console one by one, and see what the results are.
...the first time it is called, it should return string, as at that point the mynumber variable contains a string, '
500'.
Multimedia: Images - Learn web development
for the average website,
51% of its bandwidth comes from imagery, followed by video at 2
5%, so it's safe to say it's important to address and optimize your multi-media content.
... 8 bit color + 8 bit transparency — offer no more than 2
55 colors but maintain smooth transparencies.
... 8 bit color + 1 bit transparency — offer no more than 2
55 colors and just offer no or full transparency per pixel which makes the transparency borders appear hard and jagged.
...a quality setting of 7
5% should yield decent results.
Accessibility Features in Firefox
assistive technology support on windows "i am a full firefox convert with the release of 1.
5.
... at my next opportunity, i intend to convert my family over to it too." darren paskell, from window-eyes beta testing list firefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes
5.
5.
...for example, ibm has delivered over
50,000 lines of code to enable accessibility in firefox on windows and especially for this new powerful world of "web applications".
... accessibility compliance statement (section
508): http://www.mozilla.com/firefox/vpat.html ...
Links and Resources
guidelines & standards information and resources on section
508 - legal policy for us government purchases requiring software accessibility.
... cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that identifies accessibility errors in webpage related to section
508 standards and/or the wcag guidelines.
... wave 3.0 (web accessibility versatile evaluator) from webaim and sponsored by temple university institute on disabilities wave 3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to section
508 standards and/or the wcag guidelines.
...it can also report accessibility errors and warnings according to selectable accessibility guidelines (section
508, wcag priorities 1, 2 or 3).
Accessibility and Mozilla
they also define a list of possible object states, such as focused, read-only, checked, etc.accessibility features in firefoxfirefox works with popular screen readers, with the best support currently coming from gw micro's window-eyes
5.
5.
...however, many of the concepts were also used during the development of firevox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feedback.csun firefox materialsfirefox 1.
5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...websites such as online magazines with sophisticated audiences are now reporting upwards of 2
5% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko.
...here is a rundown of problems and the planned solutions:mozilla's section
508 compliancemozilla’s uaag evaluation reportthe uaag document contains a very rich set of accessibility guidelines, that broadly define how accessibility should be implemented by any user agent, i.e.
Application cache implementation overview
processofflinemanifest is an effective implementation of “cache selection algorithm” as described by the html
5 spec.
...all files downloaded are deleted and the new cache version is discarded.) an md
5 hash is then calculated from the manifest content we download from the server to be compared to existing md
5 (in case of an “update”).
... during the load, manifest is parsed according the “parsing the cache manifest” html
5 spec, and lists of entries and namespaces are collected.
...processnexturi then invokes it self asynchronously via dispatch to a main thread when not already on the concurrency limit of 1
5 loads.
Debugging on Mac OS X
macos 10.1
5 went further, requiring applications to be notarized with hardened runtime enabled in order to launch (ignoring workarounds.) when run on earlier macos versions, notarization and hardened runtime settings have no effect.
...these builds enable hardened runtime and only differ from production builds in that they are not notarized which should not otherwise affect functionality, (other than the ability to easily launch the browser on macos 10.1
5+ -- see quarantine note below).
...on macos 10.1
5+, downloaded try builds will not launch by default because notarization is required.
...bug 1
522409 was filed to automate codesigning local builds to enable hardened runtime by default and eliminate this discrepancy.
Old Thunderbird build
this page covers the basic steps needed to build a thunderbird up to version
59.
... the source code requires 3.6gb of free space or more and additionally
5gb or more for default build.
...linux builds on a fast box may take under 1
5 minutes, but windows builds on a slow box may take several hours.
... on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=1290
5 are installed because the mapi header files are not bundled with visual studio 2013/201
5 (windows sdk 8.1/10).
Gecko versions and application versions
note that after gecko 2.0, both firefox and thunderbird versions are from then on the same as the gecko version number, at gecko
5.0.
... gecko version applications based on it gecko
55 firefox
55, seamonkey 2.
52 gecko
52 firefox
52, seamonkey 2.49 gecko 49 firefox 49, seamonkey 2.46 gecko 43 firefox 43, seamonkey 2.40 gecko 42 firefox 42, seamonkey 2.39 gecko 41 firefox 41, seamonkey 2.38 gecko 38 firefox 38, seamonkey 2.3
5 gecko 36 firefox 36, seamonkey 2.33 gecko 3
5 firefox 3
5, seamonkey 2.32 gecko 34 firefox 34, seamonkey 2.31 gecko 33 firefox 33, seamonkey 2.30 gecko 32 firefox 32, seamonkey 2.29 gecko 29 firefox 29, seamonkey 2.26 gecko 28 firefox 28, seamonkey 2.2
5 gecko 27 firefox 27, seamonkey 2.24 gecko 26 firefox...
... 26, seamonkey 2.23 gecko 2
5 firefox 2
5, seamonkey 2.22 gecko 24 firefox 24, thunderbird 24, seamonkey 2.21 gecko 23 firefox 23, seamonkey 2.20 gecko 22 firefox 22, seamonkey 2.19 gecko 21 firefox 21, seamonkey 2.18 gecko 20 firefox 20, seamonkey 2.17 gecko 19 firefox 19, seamonkey 2.16 gecko 18 firefox 18, firefox os 1.0, seamonkey 2.1
5 gecko 17 firefox 17, thunderbird 17, seamonkey 2.14 gecko 16 firefox 16, thunderbird 16, seamonkey 2.13 gecko 1
5 firefox 1
5, thunderbird 1
5, seamonkey 2.12 gecko 14 firefox 14, thunderbird 14, seamonkey 2.11 gecko 13 firefox 13, thunderbird 13, seamonkey 2.10 gecko 12 firefox 12, thunderbird ...
...12, seamonkey 2.9 gecko 11 firefox 11, thunderbird 11, seamonkey 2.8 gecko 10 firefox 10, thunderbird 10, seamonkey 2.7 gecko 9 firefox 9, thunderbird 9, seamonkey 2.6 gecko 8 firefox 8, thunderbird 8, seamonkey 2.
5 gecko 7 firefox 7, thunderbird 7, seamonkey 2.4 gecko 6 firefox 6, thunderbird 6, seamonkey 2.3 gecko
5 firefox
5, thunderbird
5, seamonkey 2.2 gecko 2 firefox 4, thunderbird 3.3, seamonkey 2.1 gecko 1.9.2 firefox 3.6, thunderbird 3.1 gecko 1.9.1 firefox 3.
5, thunderbird 3, seamonkey 2.0 gecko 1.9 firefox 3 gecko 1.8.1 firefox 2, thunderbird 2, seamonkey 1.1 gecko 1.8 firefox 1.
5, thunderbird 1.
5, seamonkey 1.0 gecko...
How Mozilla determines MIME Types
however, starting in mozilla 1.7alpha, mozilla does do content sniffing, like this: when the content-type sent by the server is one of (case-sensitively) text/plain text/plain; charset=iso-88
59-1 text/plain; charset=iso-88
59-1 and the server did not send a content-encoding header, mozilla will sniff the first block of data it gets and check for non-text bytes.
... text bytes are 9-13, 27, and 31-2
55.
...see line
507 for the complete list.
... related information document loading - from load start to finding a handler original document information author(s): christian biesinger last updated date: march 7, 200
5 copyright information: copyright (c) christian biesinger ...
IME handling guide
android widget still does not use texteventdispatcher to dispatch widgetcompositionevents, see bug 1137
567.
...the values are integer, 0: none, 1: dotted, 2: dashed, 3: solid, 4: double,
5: wavy (the values same as ns_style_text_decoration_style_* defined in nsstyleconsts.h.
...e.g., if first change is from 1 to
5 and second change is from
5 to 10, the notified range is from 1 to 10.
...therefore, tsftextstore will use insertion point relative query for them bug 12861
57.
OS.File.Info
oes not represent anything } else { // some other error } } ) example: determining the owner of a file let promise = os.file.stat() promise.then( function onsuccess(info) { if ("unixowner" in info) { // info.unixowner holds the owner of the file } else { // information is not available on this platform } } ); evolution of this example bug 802
534 will introduce the ability to check whether field unixowner appears in os.file.info.prototype, which will make it possible to write faster code.
...(as of firefox 38 this is always true on all systems, this is a bug: bugzilla 114
588
5) (on windows this returns false for hard links) size the number of bytes in the file.
... creationdate deprecated in bugzilla :: bug 80787
5.
...(as of firefox 38 this attribute is not found, see screen shots below, bugzilla :: bug 11
56060) screenshot of info object in variable viewer macosx 10.10.1 ubuntu 14.04.1 windows 8.1 see also os.file.directoryiterator.entry ...
Index
5 index localization found 42 pages: 6 l10n checks internationalization, localization, localization:tools, tools l10n checks is a python script and library similar to compare-locales.
... 1
5 release phase localization you've made it!
... 2
5 localizing with mozilla translator guide, localization, translator, l10n no summary!
... the documentation is divided into 4 parts: 3
5 creating localizable web applications internationalization, localizability, localization, web development an important step of developing a web application or creating web content is making sure that it can be localized.
L10n Checks
to do that, you must have python 2.
5, 2.6, or 2.7 installed on your machine.
...json output in all modes you can tell l10n checks to present the output as json by setting the -j parameter to full_json, e.g.: check-l10n-completeness -j full_json suite/locales/l10n.ini ../l10n/ de json output requires simplejson to be present on the system if using python 2.
5.
... verbose level in all modes you can set the verbose level, e.g.: check-l10n-completeness --verbose
5 full_json suite/locales/l10n.ini ../l10n/ de there are six levels.
... 0 - quiet;
5 - show all messages merge in the source mode you can tell l10n checks to merge missing strings and files into the locale files by setting a merge directory, e.g.: check-l10n-completeness -m output_dir suite/locales/l10n.ini ../l10n/ de note: only files which were merged will be saved in that directory.
Localizing with Koala
the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 1
58636 changes to
50664 files (+9 heads) updating working directory 403
57 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you want to keep the localized files or leave empty for now check "mercurial" if you wish to use mercurial to keep the revision history of you...
... strings: +
5 means that there are
5 missing strings in the locale's file compared to the en-us reference.
... you're now looking at your locale's file structure and can see that searchbar.dtd is "unmodified" with 2 translated entities (0 missing, 0 obsolete), whereas search.properties is "modified" with 1 translated entity (6 total minus
5 missing, 0 obsolete).
...if you run "hg log" however, you will see you first commit in the repository's revision history: c:\mozilla\l10n\locale\x-testing\3.6> hg log changeset: 0:7c
543e8f3a6a tag: tip user: stas malolepszy <stas@mozilla.com> date: mon nov 23 18:08:2
5 2009 +0100 summary: added search bar strings congratulations!
Mozilla Web Developer FAQ
please note that mac ie
5 behaves in the same way as mozilla when it comes to the alt and title attributes.
... downloadable fonts in truetype and opentype formats (.ttf and .otf) are supported since firefox 3.
5.
...if you are using a legacy encoding that cannot represent that character, you can use a numeric character reference: ^
5;.
... if your document mixes mathml or svg with xhtml, you should use application/xhtml+xml (until html
5 parsing is supported).
Scroll-linked effects
<body style="height:
5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div.
...one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height:
5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
... <body style="height:
5000px"> <script> function snap(destination) { if (math.abs(destination - window.scrolly) < 3) { scrollto(window.scrollx, destination); } else if (math.abs(destination - window.scrolly) < 200) { scrollto(window.scrollx, window.scrolly + ((destination - window.scrolly) / 2)); settimeout(snap, 20, destination); } } var timeoutid = null; addeventlistener("scroll", function() { if (timeoutid) cleartimeout(timeoutid); timeoutid = settimeout(snap, 200, parseint(document.getelementbyid('snaptarge...
... <body style="height:
5000px"> <style> body, /* blink currently has bug that requires declaration on `body` */ html { scroll-snap-type: y proximity; } .snaptarget { scroll-snap-align: start; position: relative; top: 200px; height: 200px; background-color: green; } </style> <div class="snaptarget"></div> </body> this version can work smoothly in the browser even...
TraceMalloc
this file can be post-processed by tools in mozilla/tools/trace-malloc as follows: histogram.pl, which produces a type histogram that can be diffed with histogram-diff.sh to produce output that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 47
54774 76136 6
5664
53 27194 1811679 100.00 nstokenallocator 17 110007 60 388260 43 2782
53 1
5.36 nsimagegtk 476 2197708 341 2366
564 -13
5 1688
56 9.32 nsmemcacherecord 843 4
5767 2328 124767 148
5 79000 4.36 nstextnode 209 11704 1614 90384 140
5 78680 4.34 htmlattributesimpl 482 1...
...4288 2824 88400 2342 74112 4.09 nsscanner
58 76824 94 146300 36 69476 3.83 nsscripterror 2
53 2
5070 842 91
548
589 66478 3.67 nshtmldocument.mreferrer 177 21
550 691 8
5460
514 63910 3.
53 nshtmlvalue 139 7846 121
5 68734 1076 60888 3.36 htmlcontentsink 6 4816 12
57782 6
52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by size.
...build/dist/minefield.app/contents/macos/firefox --trace-malloc /dev/null --shutdown-leaks=sdleak.log # convert raw log to text representation of call trees perl source/tools/trace-malloc/diffbloatdump.pl --depth=1
5 --use-address /dev/null sdleak.log > sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks.
...leaks: 382739 bytes, 346
5 allocations maximum heap size: 77
51799 bytes 6209
5212 bytes were allocated in 391091 allocations.
tools/power/rapl
total w = _pkg_ (cores + _gpu_ + other) + _ram_ w #01
5.17 w = 1.78 ( 0.12 + 0.10 + 1.
56) + 3.39 w #02 9.43 w =
5.44 ( 1.44 + 1.20 + 2.80) + 3.98 w #03 14.26 w = 10.21 (
5.47 + 0.19 + 4.
55) + 4.04 w #04 10.02 w = 6.1
5 ( 2.62 + 0.43 + 3.10) + 3.86 w #0
5 14.63 w = 10.43 ( 4.41 + 0.81 +
5.22) + 4.19 w #06 11.16 w = 6.90 ( 1.91 + 1.68 + 3.31) + 4.26 w #07
5.40 w = 1.97 ( 0.20 + 0.10 + 1.67) + 3.44 w #08
5.17 w = 1.76 ( 0.07 +...
... 0.08 + 1.60) + 3.41 w #09
5.17 w = 1.76 ( 0.09 + 0.08 + 1.
58) + 3.42 w #10 8.13 w = 4.40 ( 1.
55 + 0.11 + 2.74) + 3.73 w things to note include the following.
... once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.8
5 w std dev = 3.
50 w 0th percentile =
5.17 w (min)
5th percentile =
5.17 w 2
5th percentile =
5.17 w
50th percentile = 8.13 w 7
5th percentile = 11.16 w 9
5th percentile = 14.63 w 100th percentile = 14.63 w (max) the distribution data is omitted if there was zero or one samples taken.
...a warning is given if you set it below
50 because that is likely to lead to inaccurate estimates.
NSS Code Coverage
numbers in tested files example: 72.69% (16
5/227/731) 72.69% - ratio of tested blocks and total blocks in file (generated by tcov).
... 16
5 - tested blocks in file (generated by tcov).
... numbers in total count example: total: 42% (
574/13
51).
... 16
5 - tested blocks in all files in directory (sum of numbers generated by tcov).
Encrypt Decrypt MAC Keys As Session Objects
nsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int paddinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infil...
...tem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } /* open the input file.
...idsfromheader(headerfilename, &ivitem, &enckeyitem, &mackeyitem); if (rv != secsuccess) { goto cleanup; } /* find those keys in the db token */ enckey = findkey(slot, ckm_aes_cbc, &enckeyitem, pwdata); if (enckey == null) { pr_fprintf(pr_stderr, "can't find the encryption key\n"); rv = secfailure; goto cleanup; } /* ckm_md
5_hmac or ckm_extract_key_from_key */ mackey = findkey(slot, ckm_md
5_hmac, &mackeyitem, pwdata); if (mackey == null) { rv = secfailure; goto cleanup; } /* read in the mac into item from the intermediate file */ rv = readfromheaderfile(headerfilename, mac, &macitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not ...
... */ int main(int argc, char **argv) { secstatus rv; secstatus rvshutdown; pk11slotinfo *slot = null; ploptstate *optstate; ploptstatus status; char headerfilename[
50]; char encryptedfilename[
50]; prfiledesc *infile; prfiledesc *outfile; prbool ascii = pr_false; commandtype cmd = unknown; const char *command = null; const char *dbdir = null; const char *infilename = null; const char *outfilename = n...
Encrypt and decrypt MAC using token
nsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int paddinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infil...
...tem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } /* open the input file.
...idsfromheader(headerfilename, &ivitem, &enckeyitem, &mackeyitem); if (rv != secsuccess) { goto cleanup; } /* find those keys in the db token */ enckey = findkey(slot, ckm_aes_cbc, &enckeyitem, pwdata); if (enckey == null) { pr_fprintf(pr_stderr, "can't find the encryption key\n"); rv = secfailure; goto cleanup; } /* ckm_md
5_hmac or ckm_extract_key_from_key */ mackey = findkey(slot, ckm_md
5_hmac, &mackeyitem, pwdata); if (mackey == null) { rv = secfailure; goto cleanup; } /* read in the mac into item from the intermediate file */ rv = readfromheaderfile(headerfilename, mac, &macitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not ...
... */ int main(int argc, char **argv) { secstatus rv; secstatus rvshutdown; pk11slotinfo *slot = null; ploptstate *optstate; ploptstatus status; char headerfilename[
50]; char encryptedfilename[
50]; prfiledesc *infile; prfiledesc *outfile; prbool ascii = pr_false; commandtype cmd = unknown; const char *command = null; const char *dbdir = null; const char *infilename = null; const char *outfilename = n...
4.3.1 Release Notes
new in jss 4.3.1 a list of bug fixes and enhancement requests were implemented in this release can be obtained by running this bugzilla query jss 4.3.1 requires nss 3.12.
5 or higher.
... ssl3 & tls renegotiation vulnerability see cve-2009-3
555 and us-cert vu#120
541 for more information about this security vulnerability.
... all ssl/tls renegotiation is disabled by default in nss 3.12.
5 and therefore will be disabled by default with jss 4.3.1.
...jss 4.3.1 requires nss 3.12.
5 or higher.
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library pkcs11 needslogin method support hmacsha2
56, hmacsha384, and hmacsha
512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1.
... libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha2
56, hmacsha384, and hmacsha
512 (see hmactest.java) support for all nss 3.12 initialization options (see initializationvalues) new ssl error codes (see http://mxr.mozilla.org/security/sour...util/sslerrs.h) ssl_error_unsupported_extension_alert ssl_error_certificate_unobtainable_alert ssl_error_unrecognized_name_alert ssl_error_bad_cert_status_response_alert ssl_error_bad_cer...
...t_hash_value_alert new tls cipher suites (see http://mxr.mozilla.org/security/sour...sslsocket.java): tls_rsa_with_camellia_128_cbc_sha tls_dhe_dss_with_camellia_128_cbc_sha tls_dhe_rsa_with_camellia_128_cbc_sha tls_rsa_with_camellia_2
56_cbc_sha tls_dhe_dss_with_camellia_2
56_cbc_sha tls_dhe_rsa_with_camellia_2
56_cbc_sha note: the following tls cipher suites are declared but are not yet implemented: tls_dh_dss_with_camellia_128_cbc_sha tls_dh_rsa_with_camellia_128_cbc_sha tls_dh_anon_with_camellia_128_cbc_sha tls_dh_dss_with_camellia_2
56_cbc_sha tls_dh_rsa_with_camellia_2
56_cbc_sha tls_dh_anon_with_camellia_2
56_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha ...
...tls_ecdh_anon_with_aes_128_cbc_sha tls_ecdh_anon_with_aes_2
56_cbc_sha distribution information jss is checked into mozilla/security/jss/.
NSS 3.17.3 release notes
notable changes in nss 3.17.3 the quickder decoder now decodes lengths robustly (cve-2014-1
569).
... the following ca certificates were removed cn = gte cybertrust global root sha1 fingerprint: 97:81:79:
50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 cn = thawte server ca sha1 fingerprint: 23:e
5:94:94:
51:9
5:f2:41:48:03:b4:d
5:64:d2:a3:a3:f
5:d8:8b:8c cn = thawte premium server ca sha1 fingerprint: 62:7f:8d:78:27:6
5:63:99:d2:7d:7f:90:44:c9:fe:b3:f3:3e:fa:9a cn = america online root certification authority 1 sha-1 fingerprint: 39:21:c1:1
5:c1:
5d:0e:ca:
5c:cb:
5b:c4:f0:7d:21:d8:0
5:0b:
56:6a cn = america online root certification authority 2 sha-1 fingerprint: 8
5:b
5:ff:67:9b:0c:79:96:1f:c8:6e:44:22:00:46:13:db:17:92:84 the following ca certificates had the websites and code sig...
...ning trust bits turned off ou = class 3 public primary certification authority - g2 sha1 fingerprint: 8
5:37:1c:a6:e
5:
50:14:3d:ce:28:03:47:1b:de:3a:09:e8:f8:77:0f cn = equifax secure ebusiness ca-1 sha1 fingerprint: da:40:18:8b:91:89:a3:ed:ee:ae:da:97:fe:2f:9d:f
5:b7:d1:8a:41 the following ca certificates were added cn = comodo rsa certification authority sha1 fingerprint: af:e
5:d2:44:a8:d1:19:42:30:ff:47:9f:e2:f8:97:bb:cd:7a:8c:b4 cn = usertrust rsa certification authority sha1 fingerprint: 2b:8f:1b:
57:33:0d:bb:a2:d0:7a:6c:
51:f7:0e:e9:0d:da:b9:ad:8e cn = usertrust ecc certification authority sha1 fingerprint: d1:cb:ca:
5d:b2:d
5:2a:7f:69:3b:67:4d:e
5:f0:
5a:1d:0c:9
5:7d:f0 ...
... cn = globalsign ecc root ca - r4 sha1 fingerprint: 69:69:
56:2e:40:80:f4:24:a1:e7:19:9f:14:ba:f3:ee:
58:ab:6a:bb cn = globalsign ecc root ca - r
5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:
5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.18 release notes
on mac os x, by default the softokn shared library will link with the sqlite library installed by the operating system, if it is version 3.
5 or newer.
... the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:6
5:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:4
5 cn = tc trustcenter class 3 ca ii sha1 fingerprint: 80:2
5:ef:f4:6e:70:c8:d4:72:24:6
5:84:fe:40:3b:8a:8d:6a:db:f
5 the following ca certificates were added cn = staat der nederlanden root ca - g3 sha1 fingerprint: d8:eb:6b:41:
51:92:
59:e0:f3:e7:8
5:00:c0:3d:b6:88:97:c9:ee:fc cn = staat der nederlanden ev root ca sha1 fingerprint: 76:e2:7e:c1:4f:db:82:c1:c0:a6:7...
...
5:b
5:0
5:be:3d:29:b4:ed:db:bb cn = identrust commercial root ca 1 sha1 fingerprint: df:71:7e:aa:4a:d9:4e:c9:
55:84:99:60:2d:48:de:
5f:bc:f0:3a:2
5 cn = identrust public sector root ca 1 sha1 fingerprint: ba:29:41:60:77:98:3f:f4:f3:ef:f2:31:0
5:3b:2e:ea:6d:4d:4
5:fd cn = s-trust universal root ca sha1 fingerprint: 1b:3d:11:14:ea:7a:0f:9
5:
58:
54:41:9
5:bf:6b:2
5:82:ab:40:ce:9a cn = entrust root certification authority - g2 sha1 fingerprint: 8c:f4:27:fd:79:0c:3a:d1:66:06:8d:e8:1e:
57:ef:bb:93:22:72:d4 cn = entrust root certification authority - ec1 sha1 fingerprint: 20:d8:06:40:df:9b:2
5:f
5:12:2
5:3a:11:ea:f7:
59:8a:eb:14:b
5:47 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:
5...
...
5:84:ab:6b:
58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19 release notes
nss 3.19 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_19_rtm/src/ security fixes in nss 3.19 bug 108614
5 / cve-201
5-2721 - fixed a bug related to the ordering of tls handshake messages.
... nss now more strictly validates tls extensions and will fail a handshake that contains malformed extensions (bug 7
53136).
... in tls 1.2 handshakes, nss advertises support for the sha
512 hash algorithm in order to be compatible with tls servers that use certificates with a sha
512 signature (bug 11
55922).
... bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 108614
5.
NSS 3.28.1 release notes
notable changes in nss 3.28.1 the following ca certificates were removed cn = buypass class 2 ca 1 sha-2
56 fingerprint: 0f:4e:9c:dd:26:4b:02:
55:
50:d1:70:80:63:40:21:4f:e9:44:34:c9:b0:2f:69:7e:c7:10:fc:
5f:ea:fb:
5e:38 cn = root ca generalitat valenciana sha-2
56 fingerprint: 8c:4e:df:d0:43:48:f3:22:96:9e:7e:29:a4:cd:4d:ca:00:46:
55:06:1c:16:e1:b0:76:42:2e:f3:42:ad:63:0e ou = rsa security 2048 v3 sha-2
56 fingerprint: af:8b:67:62:a1:e
5:28:22:81:61:a9:
5d:
5c:
55:9e:...
...e2:66:27:8f:7
5:d7:9e:83:01:89:a
5:03:
50:6a:bd:6b:4c the following ca certificates were added ou = ac raiz fnmt-rcm sha-2
56 fingerprint: eb:c
5:
57:0c:29:01:8c:4d:67:b1:aa:12:7b:af:12:f7:03:b4:61:1e:bc:17:b7:da:b
5:
57:38:94:17:9b:93:fa cn = amazon root ca 1 sha-2
56 fingerprint: 8e:cd:e6:88:4f:3d:87:b1:12:
5b:a3:1a:c3:fc:b1:3d:70:16:de:7f:
57:cc:90:4f:e1:cb:97:c6:ae:98:19:6e cn = amazon root ca 2 sha-2
56 fingerprint: 1b:a
5:b2:aa:8c:6
5:40:1a:82:96:01:18:f8:0b:ec:4f:62:30:4d:83:ce:c4:71:3a:19:c3:9c:01:1e:a4:6d:b4 cn = amazon root ca 3 sha-2
56 fingerprint: 18:ce:6c:fe:7b:f1:4e:60:b2:e3:47:b8:df:e8:68:cb:31:d0:2e:bb:3a:da:27:1
5:69:f
5:03:43:b4:6d:b3:a4 cn = amazon root ca 4 sha-2
56 fing...
...erprint: e3:
5d:28:41:9e:d0:20:2
5:cf:a6:90:38:cd:62:39:62:4
5:8d:a
5:c6:9
5:fb:de:a3:c2:2b:0b:fb:2
5:89:70:92 cn = luxtrust global root 2 sha-2
56 fingerprint:
54:4
5:
5f:71:29:c2:0b:14:47:c4:18:f9:97:16:8f:24:c
5:8f:c
5:02:3b:f
5:da:
5b:e2:eb:6e:1d:d8:90:2e:d
5 cn = symantec class 1 public primary certification authority - g4 sha-2
56 fingerprint: 36:3f:3c:84:9e:ab:03:b0:a2:a0:f6:36:d7:b8:6d:04:d3:ac:7f:cf:e2:6a:0a:91:21:ab:97:9
5:f6:e1:76:df cn = symantec class 1 public primary certification authority - g6 sha-2
56 fingerprint: 9d:19:0b:2e:31:4
5:66:68:
5b:e8:a8:89:e2:7a:a8:c7:d7:ae:1d:8a:ad:db:a3:c1:ec:f9:d2:48:63:cd:34:b9 cn = symantec class 2 public primary certification authority - g4 sha-2
56 fingerprint: fe:86:3d:0...
...8:22:fe:7a:23:
53:fa:48:4d:
59:24:e8:7
5:6
5:6d:3d:c9:fb:
58:77:1f:6f:61:6f:9d:
57:1b:c
5:92 cn = symantec class 2 public primary certification authority - g6 sha-2
56 fingerprint: cb:62:7d:18:b
5:8a:d
5:6d:de:33:1a:30:4
5:6b:c6:
5c:60:1a:4e:9b:18:de:dc:ea:08:e7:da:aa:07:81:
5f:f0 the version number of the updated root ca list has been set to 2.11 a misleading assertion/alert has been removed, when nss tries to flush data to the peer but the connection was already reset.
NSS 3.31 release notes
nss 3.31 requires netscape portable runtime (nspr) 4.1
5 or newer.
... nss 3.31 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_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc7
512 pkcs#11 uris.
... new macros in pkcs11uri.h several new macros that start with pk11uri_pattr_ for path attributes defined in rfc7
512.
... several new macros that start with pk11uri_qattr_ for query attributes defined in rfc7
512.
NSS 3.42 release notes
introduction the nss team has released network security services (nss) 3.42 on 2
5 january 2019, which is a minor release.
... new in nss 3.42 new functionality bug 818686 - support xdg basedir specification new functions none notable changes in nss 3.42 the following ca certificates were added: none the following ca certificates were removed: none added support for some of the testcases from the wycheproof project: bug 1
508666 - added aes-gcm test cases bug 1
508673 - added chacha20-poly130
5 test cases bug 1
514999 - added the curve2
5519 test cases thanks to jonas allmann for adapting these tests.
... bugs fixed in nss 3.42 bug 1490006 - reject invalid ch.legacy_version in tls 1.3 bug 1
50713
5 and bug 1
507174 - add additional null checks to several cms functions to fix a rare cms crash.
... bug 1
513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version
52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49 release notes
see bug 1
594933 for details.
... bugs fixed in nss 3.49 bug 1
513
586 - set downgrade sentinel for client tls versions lower than 1.2.
... bug 160602
5 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 160
554
5 - memory leak in pk11install_platform_generate bug 1602288 - fix build failure due to missing posix signal.h bug 1
588714 - implement checkarmsupport for win64/aarch64 bug 1
58
5189 - nss database uses 3des instead of aes to encrypt db entries bug 16032
57 - fix ubsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1
590001 - additional hrr tests (cve-2019-17023) bug 1600144 - treat clienthello with message_seq of 1 as a second clienthello bug 1603027 - test that esni is regenerated after helloretryrequest bug 1
593167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1
53
5787 - fix automation/release/nss-release-helper.py ...
...on macos bug 1
594933 - disable building dbm by default bug 1
562
548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS Config Options
nss config options format the specified ciphers will be allowed by policy, but an application may allow more by policy explicitly: config="allow=curve1:curve2:hash1:hash2:rsa-1024..." only the specified hashes and curves will be allowed: config="disallow=all allow=sha1:sha2
56:secp2
56r1:secp384r1" only the specified hashes and curves will be allowed, and rsa keys of 2048 or more will be accepted, and dh key exchange with 1024-bit primes or more: config="disallow=all allow=sha1:sha2
56:secp2
56r1:secp384r1:min-rsa=2048:min-dh=1024" a policy that enables the aes ciphersuites and the secp2
56/384 curves: config="allow=aes128-cbc:aes128-gcm::hmac-sha1:sha1:sha2
56:sha384:rsa:ecdhe-rsa:secp2
56r1:secp384r1" turn off md
5 config="disallow=md
5" turn off md
5 and sha1 only for ssl c...
...onfig="disallow=md
5(ssl):sha1(ssl)" disallow values are parsed first, and then allow values, independent of the order in which they appear.
... ecc curves prime192v1 prime192v2 prime192v3 prime239v1 prime239v2 prime239v3 prime2
56v1 secp112r1 secp112r2 secp128r1 secp128r2 secp160k1 secp160r1 secp160r2 secp192k1 secp192r1 secp224k1 secp2
56k1 secp2
56r1 secp384r1 secp
521r1 c2pnb163v1 c2pnb163v2 c2pnb163v3 c2pnb176v1 c2tnb191v1 c2tnb191v2 c2tnb191v3 c2onb191v4 c2onb191v
5 c2pnb208w1 c2tnb239v1 c2tnb239v2 c2tnb239v3 c2onb239v4 c2onb239v
5 c2pnb272w1 c2pnb304w1 c2tnb3
59v1 c2pnb368w1 c2tnb431r1 s...
...ect113r1 sect131r1 sect131r1 sect131r2 sect163k1 sect163r1 sect163r2 sect193r1 sect193r2 sect233k1 sect233r1 sect239k1 sect283k1 sect283r1 sect409k1 sect409r1 sect
571k1 sect
571r1 hashes md2 md4 md
5 sha1 sha224 sha2
56 sha384 sha
512 macs hmac-sha1 hmac-sha224 hmac-sha2
56 hmac-sha384 hmac-sha
512 hmac-md
5 ciphers aes128-cbc aes192-cbc aes2
56-cbc aes128-gcm aes192-gcm aes2
56-gcm camellia128-cbc camellia192-cbc camellia2
56-cbc seed-cbc des-ede3-cbc des-40-cbc des-cbc null-cipher rc2 rc4 idea ssl key exchanges rsa rsa-export dhe-rsa dhe-dss dh-rsa dh-dss ecdhe-ecdsa ecdhe-rsa ecdh-ecdsa ecdh-rsa restrictions for asymmetric keys (integers) rsa-min dh-min dsa-min constraints on ssl protocols versions (integers) tls-version-min tl...
Encrypt Decrypt_MAC_Using Token
nsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int paddinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file.
...tem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } /* open the input file.
...*/ enckey = findkey(slot, ckm_aes_cbc, &enckeyitem, pwdata); if (enckey == null) { pr_fprintf(pr_stderr, "can't find the encryption key\n"); rv = secfailure; goto cleanup; } /* ckm_md
5_hmac or ckm_extract_key_from_key */ mackey = findkey(slot, ckm_md
5_hmac, &mackeyitem, pwdata); if (mackey == null) { rv = secfailure; goto cleanup; } /* read in the mac into item from the intermediate file.
... */ int main(int argc, char **argv) { secstatus rv; secstatus rvshutdown; pk11slotinfo *slot = null; ploptstate *optstate; ploptstatus status; char headerfilename[
50]; char encryptedfilename[
50]; prfiledesc *infile; prfiledesc *outfile; prbool ascii = pr_false; commandtype cmd = unknown; const char *command = null; const char *dbdir = null; const char *infilename = null; const char *outfilename = n...
NSS Sample Code Sample1
this key // may be used for an encryption mechanism (des or aes) or for // integrity (md
5_hmac or sha1_hmac).
... [need support for digest check values] //
5.
... rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.keysizeinbits = 1024; rsaparams.pe = 6
5537; slot = pk11_getinternalkeyslot(); if (!slot) { rv = 1; goto done; } prvkey = pk11_generatekeypair(slot, ckm_rsa_pkcs_key_pair_gen, &rsaparams, &pubkey, pr_true, pr_true, 0); if (!prvkey) { rv = 1; goto done; } // set the nickname on the private key so that it // can be found later.
... mmackey = pk11_pubunwrapsymkey(prvkey, mwrappedmackey, ckm_md
5_hmac, cka_sign, 0); if (!mmackey) { rv = 1; goto done; } } done: if (prvkey) seckey_destroyprivatekey(prvkey); return rv; } int server::shutdown() { if (menckey) pk11_freesymkey(menckey); if (mmackey) pk11_freesymkey(mmackey); menckey = 0; mmackey = 0; return 0; } int server::comparekeys(server *peer) { int rv; secitem *mackey1 = 0; secitem *mackey2 = 0; secitem ...
NSS Sample Code Sample_3_Basic Encryption and MACing
nsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int paddinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infil...
...tem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } /* open the input file.
...idsfromheader(headerfilename, &ivitem, &enckeyitem, &mackeyitem); if (rv != secsuccess) { goto cleanup; } /* find those keys in the db token */ enckey = findkey(slot, ckm_aes_cbc, &enckeyitem, pwdata); if (enckey == null) { pr_fprintf(pr_stderr, "can't find the encryption key\n"); rv = secfailure; goto cleanup; } /* ckm_md
5_hmac or ckm_extract_key_from_key */ mackey = findkey(slot, ckm_md
5_hmac, &mackeyitem, pwdata); if (mackey == null) { rv = secfailure; goto cleanup; } /* read in the mac into item from the intermediate file */ rv = readfromheaderfile(headerfilename, mac, &macitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not ...
... */ int main(int argc, char **argv) { secstatus rv; secstatus rvshutdown; pk11slotinfo *slot = null; ploptstate *optstate; ploptstatus status; char headerfilename[
50]; char encryptedfilename[
50]; prfiledesc *infile; prfiledesc *outfile; prbool ascii = pr_false; commandtype cmd = unknown; const char *command = null; const char *dbdir = null; const char *infilename = null; const char *outfilename = n...
EncDecMAC using token object - sample 3
igned int ptextlen; unsigned char mac[digestsize]; unsigned int maclen; unsigned int nwritten; unsigned char encbuf[blocksize]; unsigned int encbuflen; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned int pad[1]; secitem paditem; unsigned int paddinglength; static unsigned int firsttime = 1; int j; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, us...
...igned int temp = 0; unsigned int blocknumber = 0; secitem noparams = { sibuffer, null, 0 }; pk11context *ctxmac = null; pk11context *ctxenc = null; unsigned char iv[blocksize]; unsigned int ivlen = ivitem->len; unsigned int filelength; unsigned int paddinglength; int j; memcpy(iv, ivitem->data, ivitem->len); paddinglength = (unsigned int)paditem->data[0]; ctxmac = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } /* open the input file.
...read in header, get iv and cka_ids of two keys * from it */ rv = getivandckaidsfromheader(headerfilename, &ivitem, &enckeyitem, &mackeyitem); if (rv != secsuccess) { goto cleanup; } /* find those keys in the db token */ enckey = findkey(slot, ckm_aes_cbc, &enckeyitem, pwdata); if (enckey == null) { pr_fprintf(pr_stderr, "can't find the encryption key\n"); rv = secfailure; goto cleanup; } /* ckm_md
5_hmac or ckm_extract_key_from_key */ mackey = findkey(slot, ckm_md
5_hmac, &mackeyitem, pwdata); if (mackey == null) { rv = secfailure; goto cleanup; } /* read in the mac into item from the intermediate file */ rv = readfromheaderfile(headerfilename, mac, &macitem, pr_true); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not retrieve mac from cipher file\n"); goto cleanup; } if (macitem.data ...
...*/ int main(int argc, char **argv) { secstatus rv; secstatus rvshutdown; pk11slotinfo *slot = null; ploptstate *optstate; ploptstatus status; char headerfilename[
50]; char encryptedfilename[
50]; prfiledesc *infile; prfiledesc *outfile; prbool ascii = pr_false; commandtype cmd = unknown; const char *command = null; const char *dbdir = null; const char *infilename = null; const char *outfilename = null; const char *noisefilename = null; secupwdata pwdata = { pw_none, 0 }; char * progname = strrchr(argv[0], '/'); progname = progname ?
nss tech note1
this information is stored in the next lowest tag bit (number
5).
...it is stored in the lower
5 tag bits (number 0 through 4).
..., sec_asn1_integer, sec_asn1_bit_string, sec_asn1_octet_string, sec_asn1_null, sec_asn1_object_id, sec_asn1_object_descriptor,† sec_asn1_real, sec_asn1_enumerated, sec_asn1_embedded_pdv, sec_asn1_utf8_string, sec_asn1_sequence, sec_asn1_set, sec_asn1_numeric_string, sec_asn1_printable_string, sec_asn1_t61_string, sec_asn1_teletex_string, sec_asn1_t61_string, sec_asn1_videotex_string, sec_asn1_ia
5_string, sec_asn1_utc_time, sec_asn1_generalized_time, sec_asn1_graphic_string, sec_asn1_visible_string, sec_asn1_general_string, sec_asn1_universal_string, sec_asn1_bmp_string note that for sec_asn1_set and sec_asn1_sequence types, you must also include the method type macro sec_asn1_constructed to construct a fully valid tag, as defined by the asn.1 standard .
...see bug 17
5163 for more information about the reason for this recommendation.
Build instructions
required to build with msvc 8 (200
5 express).
... for rhel-
5, you need to use the new assembler.
... hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss if you want to build a releases other than the tips of these repositories, then switch to the release tags: cd nspr hg update nspr_4_9_
5_rtm cd ../nss hg update nss_3_14_2_rtm cd ..
... check out nspr and nss: cvs co -r nspr_4_9_
5_rtm nspr cvs co -r nss_3_14_2_rtm nss set environment variables as described in the mercurial-based instructions.
Utility functions
iitodata mxr deprecated 3.2 use nssbase64_decodebuffer atob_convertasciitoitem mxr deprecated 3.2 use nssbase64_decodebuffer btoa_convertitemtoascii mxr deprecated 3.2 use nssbase64_encodeitem btoa_datatoascii mxr deprecated 3.2 use nssbase64_encodeitem der_asciitotime mxr 3.
5 and later der_decodetimechoice mxr 3.9 and later der_encode mxr 3.4 and later der_encodetimechoice mxr 3.9 and later der_generalizedtimetotime mxr 3.2 and later der_getinteger mxr 3.2 and later der_generalizeddaytoascii mxr 3.11.7 ...
... port_realloc mxr 3.2 and later port_seterror mxr 3.2 and later port_setucs2_asciiconversionfunction mxr 3.2 and later port_setucs2_utf8conversionfunction mxr 3.2 and later port_setucs4_utf8conversionfunction mxr 3.2 and later port_strdup mxr 3.
5 and later port_ucs2_asciiconversion mxr 3.2 and later port_ucs2_utf8conversion mxr 3.2 and later port_zalloc mxr 3.2 and later port_zfree mxr 3.2 and later rsa_formatblock mxr 3.2 and later sec_asn1decode mxr 3.4 and later ...
... 3.2 and later sec_asn1encodeunsignedinteger mxr 3.11.1 and later sec_asn1lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs
5getcryptoalgorithm mxr 3.2 and later sec_pkcs
5getkeylength mxr 3.2 and later sec_pkcs
5getpbealgorithm mxr 3.2 and later sec_pkcs
5isalgorithmpbealg mxr 3.2 and later sec_pkcs
5isalgorithmpbealgtag mxr 3.12 and later sec_registerdefaulthttpclient mxr ...
... seckey_updatecertpqg mxr 3.2 and later secmod_addnewmodule mxr 3.3 and later secmod_addnewmoduleex mxr 3.4 and later secmod_deletemoduleex mxr 3.12 and later secmod_cancelwait mxr 3.9.3 and later secmod_candeleteinternalmodule mxr 3.
5 and later secmod_createmodule mxr 3.4 and later secmod_deletemodule mxr 3.4 and later secmod_findmodule mxr 3.4 and later secmod_findslot mxr 3.4 and later secmod_freemodulespeclist mxr 3.4 and later secmod_getdbmodulelist mxr 3.9 ...
NSS tools : signtool
in all cases, the certificate is also output to a file named x
509.cacert, which has the mime-type application/x-x
509-ca-cert.
...you can use a zip utility instead of the -z option to package a signed archive into a jar file after you have signed it: cd signdir zip -r ../myjar.jar * adding: meta-inf/ (stored 0%) adding: meta-inf/manifest.mf (deflated 1
5%) adding: meta-inf/signtool.sf (deflated 28%) adding: meta-inf/signtool.rsa (stored 0%) adding: text.txt (stored 0%) generating the keys and certificate the signtool option -g generates a new public-private key pair and certificate.
...in all cases, the certificate is also output to a file named x
509.cacert, which has the mime-type application/x-x
509-ca-cert.
... products division state or province: california country (must be exactly 2 characters): us username: someuser email address: someuser@netscape.com enter password or pin for "communicator certificate db": [password will not echo] generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x
509.raw and x
509.cacert.
Rhino downloads archive
release release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r3 2011-0
5-09 new in rhino 1.7r3 rhino1_7r3.zip rhino 1.7r2 2009-03-22 new in rhino 1.7r2 rhino1_7r2.zip rhino 1.7r1 2008-03-06 new in rhino 1.7r1 rhino1_7r1.zip rhino 1.6r7 2007-08-20 new in rhino 1.6r7 rhino1_6r7.zip rhino 1.6r6 2007-07-30 new in rhino 1.6r6 rhino1_6r6.zip rhino 1.6r
5 2006-11-19 same code as 1.6r4, but relicensed under mpl/gpl.
... rhino1_6r
5.zip rhino 1.6r4 2006-09-10 bug 343976 rhino1_6r4.zip rhino 1.6r3 2006-07-24 changes in 1.6r3 rhino1_6r3.zip rhino 1.6r2 200
5-09-19 changes in 1.6r2 rhino1_6r2.zip rhino 1.6r1 2004-11-29 changes in 1.6r1 rhino1_6r1.zip rhino 1.
5r
5 2004-03-2
5 changes in 1.
5r
5 rhino1_
5r
5.zip rhino 1.
5r4.1 2003-04-21 changes in 1.
5r4.1 rhino1
5r41.zip rhino 1.
5r4 2003-02-10 changes in 1.
5r4 rhino1
5r4.zip rhino 1.
5r3 2002-01-27 changes in 1.
5r3 rhino1
5r3.zip rhino 1.
5r2 2001-07-27 changes in 1.
5r2 rhino1
5r2.zip rhino 1.
5r1 2000-09-10 changes in 1.
5r1 rhino1
5r1.zip rhino 1.4r3 1999-0
5-10 initial public relea...
...in rhino 1.6r6 and later the e4x support has been rewritten to rely solely on the dom3 apis supported natively by java 1.
5.
... (pre-java 1.
5 users can use dom3 using java's endorsed standards override mechanism if they have a dom3-capable xml parser.) if neither xmlbeans nor dom3 are present, e4x is not available.
Rhino shell
the string versionnumber must be one of 100, 110, 120, 130, 140, 1
50, 160 or 170.
...if an argument is supplied, it is expected to be one of 100, 110, 120, 130, 140, 1
50, 160 or 170 to indicate javascript version 1.0, 1.1, 1.2, 1.3, 1.4, 1.
5, 1.6 or 1.7 respectively.
... js> function test(x) { print("entry"); java.lang.thread.sleep(x*1000); print("exit"); } js> var o = { f : sync(test) }; js> spawn(function() {o.f(
5);}); thread[thread-0,
5,main] entry js> spawn(function() {o.f(
5);}); thread[thread-1,
5,main] js> exit entry exit runcommand here are a few examples of invoking runcommand under linux.
...assing explicit environment to the system shell js> runcommand("sh", "-c", "echo $env1 $env2", { env: {env1: 100, env2: 200}}) 100 200 0 js> // use args option to provide additional command arguments js> var arg_array = [1, 2, 3, 4]; js> runcommand("echo", { args: arg_array}) 1 2 3 4 0 examples for windows are similar: js> // invoke shell command js> runcommand("cmd", "/c", "date /t") 27.08.200
5 0 js> // run sort collectiong the output js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> // invoke notepad and wait until it exits js> runcommand("notepad") 0 ...
SpiderMonkey Build Documentation
no configure: error: installation or configuration problem: c compiler cannot create executables." you can try configuring like so: cc=clang cxx=clang++ ../configure it is also possible that baldrdash may fail to compile with /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:1
5: fatal error: 'inttypes.h' file not found /usr/local/cellar/llvm/7.0.1/lib/clang/7.0.1/include/inttypes.h:30:1
5: fatal error: 'inttypes.h' file not found, err: true this is because, starting from mohave, headers are no longer installed in /usr/include.
...mac os x 10.
5), you can use the following: ar=ar cc="gcc -m64" cxx="g++ -m64" ../configure --target=x86_64-apple-darwin10.0.0 to build a 64-bit windows version, you can use the following: $src/configure --host=x86_64-pc-mingw32 --target=x86_64-pc-mingw32 note: you must have started your mozillabuild shell with the proper -x64.bat script in order for the 64-bit compilers to be in your path.
... note: in spidermonkey 1.8.
5, the js-config script is not generated properly on many platforms.
...(it should say:
5!
Property cache
the property cache was introduced in bug 36
58
51.
...see bug 4
58271 and bug
507231 for example.
... the shape of an object does not cover: anything about the object's prototype other than its identity; anything about the object's parent; obj->freeslot, which can be different for same-shaped objects if they have a jsclass.reserveslots hook (bug
53
5416); anything about the values of the object's own properties, beyond what the method guarantee and the branded object guarantee say about functions.
... explain bug
5549
55.
SpiderMonkey Internals
in addition to the interpreter, spidermonkey contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-
5.1 §1
5 with various extensions, and a few public apis.
...nan-boxing is a technique based on the fact that in ieee-7
54 there are 2**
53-2 different bit patterns that all represent nan.
...fect); dis(perfect); print(); for (var ln = 0; ln <= 40; ln++) { var pc = line2pc(perfect, ln); var ln2 = pc2line(perfect, pc); print("\tline " + ln + " => pc " + pc + " => line " + ln2); } the result of the for loop over lines 0 to 40 inclusive is: line 0 => pc 0 => line 16 line 1 => pc 0 => line 16 line 2 => pc 0 => line 16 line 3 => pc 0 => line 16 line 4 => pc 0 => line 16 line
5 => pc 0 => line 16 line 6 => pc 0 => line 16 line 7 => pc 0 => line 16 line 8 => pc 0 => line 16 line 9 => pc 0 => line 16 line 10 => pc 0 => line 16 line 11 => pc 0 => line 16 line 12 => pc 0 => line 16 line 13 => pc 0 => line 16 line 14 => pc 0 => line 16 line 1
5 => pc 0 => line 16 line 16 => pc 0 => line 16 line 17 => pc 19 => line 20 line 18 => pc 19 => line 20 line 19 => pc 19 => line 20 lin...
...e 20 => pc 19 => line 20 line 21 => pc 36 => line 21 line 22 => pc
53 => line 22 line 23 => pc 74 => line 23 line 24 => pc 92 => line 22 line 2
5 => pc 106 => line 28 line 26 => pc 106 => line 28 line 27 => pc 106 => line 28 line 28 => pc 106 => line 28 line 29 => pc 127 => line 29 line 30 => pc 1
54 => line 21 line 31 => pc 1
54 => line 21 line 32 => pc 161 => line 32 line 33 => pc 172 => line 33 line 34 => pc 172 => line 33 line 3
5 => pc 172 => line 33 line 36 => pc 172 => line 33 line 37 => pc 172 => line 33 line 38 => pc 172 => line 33 line 39 => pc 172 => line 33 line 40 => pc 172 => line 33 jsconfig.h various configuration macros defined as 0 or 1 depending on how js_version is defined (as 10 for javascript 1.0, 11 for javascript 1.1, etc.).
JSAPI Cookbook
(); bool isint32 = v.isint32(); // note: internal representation, not numeric value bool isnull = v.isnull(); bool isboolean = v.isboolean(); bool isobject = v.isobject(); // note: not broken like typeof === "object" is :-) to set a value use a correspondingly named member mutator function, or assign the result of the correspondingly named standalone function: // javascript var v; v = 0; v = 0.
5; v = somestring; v = null; v = undefined; v = false; /* jsapi */ js::rootedvalue v(cx); js::rootedstring somestring(cx, ...); v.setint32(0); // or: v = js::int32value(0); v.setdouble(0.
5); // or: v = js::doublevalue(0.
5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.setnull(); // or: v = js::nullvalue(); v.setundefined(); // or: v = js::...
... */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setint32(23); return true; returning a floating-point number // javascript return 3.141
59; /* jsapi */ js::callargs args = js::callargsfromvp(argc, vp); args.rval().setdouble(3.141
59); exception handling throw the most common idiom is to create a new error object and throw that.
... /* jsapi */ if (!js_defineproperty(cx, obj, "prop", js::undefinedvalue(), getpropfunc, null, jsprop_shared | jsprop_native_accessors | jsprop_enumerate)) { return false; } working with the prototype chain defining a native read-only property on the string.prototype // javascript object.defineproperty(string.prototype, "md
5sum", {get: getmd
5func, enumerable: true}); the following trick couldn't work if someone has replaced the global string object with something.
...if (!js_defineproperty(cx, string_prototype, "md
5sum", js::undefinedvalue(), getmd
5func, null, jsprop_shared | jsprop_native_accessors | jsprop_enumerate)) return false; wanted simulating for and for each.
JSObjectOps.defaultValue
obsolete since javascript 1.8.
5this feature is obsolete.
... the default [[defaultvalue]] behavior for ordinary objects is as described in es
5 §8.12.8.
...on success, *vp must be a primitive value: per es
5 §8.12.8, every object "must ensure that its [[defaultvalue]] internal method can return only primitive values." debug builds of spidermonkey will assert if a convert callback is successful but leaves *vp holding a primitive value.
... js_convertstub implements the default behavior for the jsclass.convert hook, which is to call obj.valueof() and obj.tostring() in accordance with the algorithm in es
5 §8.12.8.
JS_GC
syntax void js_gc(jscontext *cx); // added in spidermonkey
52 void js_gc(jsruntime *rt); // obsolete since jsapi
50 void js_gc(jscontext *cx); // obsolete since jsapi 14 name type description cx jscontext * the context to for which to perform garbage collection.
... added in spidermonkey
52 rt jsruntime * the runtime to for which to perform garbage collection.
... obsolete since jsapi
50 description js_gc performs garbage collection of js objects, strings and other internal data structures that are no longer reachable in the specified context or runtime.
... see also mxr id search for js_gc js_maybegc bug 737364 -- changed to jsruntime bug 12838
55 -- changed to jscontext ...
JS_NewObject
syntax // added in spidermonkey 4
5 jsobject * js_newobject(jscontext *cx, const jsclass *clasp); bool js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto); // obsolete since spidermonkey 38 jsobject * js_newobject(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); jsobject * js_newobjectwithgivenproto(jscontext *cx, const jsclass *clasp, js::handle<jsobject*> proto, js::handle<jsobject*> parent); // added in spidermonkey 1.8 name type description cx jscontext * the context in which to create the new object.
... starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.
5), you can create a new object in a specific compartment using the components.utils.createobjectin() method.
... previous behaviour obsolete since jsapi 4
5 here's how the process works in detail: first, we must identify a global object.
... see also mxr id search for js_newobject mxr id search for js_newobjectwithgivenproto js_newglobalobject js_newarrayobject js_valuetoobject bug 408871 bug 1136906, bug 113634
5 -- remove parent parameter bug 112
5567 -- change prototype lookup behaviour ...
Property attributes
see bug
57
5997.
...this is a temporary hack that will need to go away in bug 110
5518.
... added in spidermonkey 4
5 mxr id search for jsprop_resolving jsprop_ignore_enumerate ignore the value in jsprop_enumerate.
...added in spidermonkey 38 mxr id search for jsprop_ignore_value see also bug
57
5997 - for jsprop_shared bug 1088002 - added jsprop_propop_accessors bug 82
5199 - added jsprop_define_late bug 36
58
51 - added jsfun_stub_gsops bug
581263 - added jsfun_constructor bug 1101123 - added jsprop_redefine_nonconfigurable bug 1037770 - added jsop_ignore_* bug 110
5518 - for jsprop_redefine_nonconfigurable bug 1138489 - removed jsprop_index bug 1140482 - added jsprop_resolving ...
Redis Tips
getting started with redis before you go any further in this document, make sure you have played with redis for at least
5 or 10 minutes.
... > r.zrevrange('last-login', 0, -1, 'withscores', print); ["lloyd", "1339627441.11
5", "zcarter", "1339627437.7
579999", "jparsons", "1339627432.928"] awesome.
...xample, to see everyone who's logged in in the last hour, you could do: > var an_hour_ago = now() - (60 * 60); > r.zrevrangebyscore('last-login', an_hour_ago, infinity, print); here are two ways to get the last person who logged in: > r.zrevrange('last-login', 0, 0, print); ["lloyd"] > r.zrevrangebyscore('last-login', infinity, 0, 'withscores', 'limit', 0, 1, print); ["lloyd", "1339627441.11
5"] timeout keys you can set an expiration date on keys in redis.
... expire expireat ttl persist setex example: redis> set foo 42 ok redis> ttl foo (integer) -1 redis> expire foo
5 (integer) 1 three seconds later ...
Security and the jar protocol
note: support for the jar: protocol was disabled by default for use from web content beginning in firefox 4
5, but re-enabled again because it broke the experience of ibm inotes users.
... inotes has since been updated so that it no longer needs remote jars, so they have been disabled again in firefox
55.
...firefox 2.0.0.10 (and firefox 1.
5.0.1
5) fixed a potential security issue in the same origin policy when the jar: protocol was used to load data.
... so starting with gecko 1.8.0.1
5 and 1.8.1.10, the jar: protocol is only allowed if the mime type of the file is application/java-archive.
Setting up an update server
then, create a file within called update.xml with these contents, replacing <mar name>, <hash> and <size> with the mar's filename, its sha
512 hash, and its file size in bytes.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha
512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha
512 value in a file called sha
512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha
512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that information (for instance, for the mar fi...
...le at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.checksums contains the sha
512 for that file as well as for all the other win64 files that are part of that nightly release).
... if you've built your own mar, you can obtain its sha
512 checksum by running the following command, which should work in linux, macos, or windows in the mozillabuild environment: shasum --algorithm
512 <filename> on windows, you can get the exact file size in bytes for your mar by right clicking on it in the file explorer and selecting properties.
Avoiding leaks in JavaScript XPCOM components
if you implement nsiobserver in javascript and register that observer (without using weak references) with a service (for example, with the observer service bug 239833 or with the pref service bug 2
56822), the service will do exactly what you tell it to do: notify the observer you just created until you unregister the observer.
... var private_data = 0; var result = new array(); result[0] = function() { return (private_data += 1); } result[1] = function() { return (private_data *= 2); } return result; } // this function returns the string "results: 1, 2, 4, 0,
5, 1, 10." function test() { var fns1 = function_array(); var fns2 = function_array(); return "results: " + fns1[0]() + ", " + // increments first private_data to 1 fns1[1]() + ", " + // doubles first private_data to 2 fns1[1]() + ", " + // doubles first private_data to 4 fns2[1]() + ", " + // doubles second private_data to 0 ...
... fns1[0]() + ", " + // increments first private_data to
5 fns2[0]() + ", " + // increments second private_data to 1 fns1[1]() + "."; // doubles first private_data to 10 } this shows that closures are quite powerful.
...consider this example from bug 28
506
5: function _filterradiogroup(anode) { switch (anode.localname) { case "radio": return nodefilter.filter_accept; case "template": case "radiogroup": return nodefilter.filter_reject; default: return nodefilter.filter_skip; } } var iterator = this.ownerdocument.createtreewalker(this, nodefilter.show_element, _filterradiogroup, true); while (iterator.nextnode()) radiochildren.push(iterator.currentnode); return this.mradiochildren = radiochildren; in this example, the iterator object is an xpcom object that is wrapped so the javascr...
Components.utils.evalInSandbox
you can also find firefox 3.
5 specific information in using json in firefox.
... for example: function double(n) { return n * 2; } // create new sandbox instance var mysandbox = new components.utils.sandbox("http://www.example.com/"); mysandbox.y =
5; // insert property 'y' with value
5 into global scope.
...for instance: var x = components.utils.evalinsandbox( "let x = 1;", sandbox, "1.8", // "latest" is recognized as a special case "http://foo.com/mycode.js", 2
5 ); the above will execute code using javascript 1.8.
... the evaluated code is assumed to start at line 2
5 of the document at that url.
Observer Notifications
starting in firefox 3.
5 components can simply register for the profile-after-change notification in nsicategorymanager.
...prior to firefox 3.
5, this was available to observers observing the app-startup/xpcom-startup notification.
... user-interaction-active nsidomwindow null sent once every
5000ms while this chrome document sees some kind of user activity (for example, keyboard or mouse events), and at the exact moment of the state transition from idle to active.
... see bug 7
58848.) topic data description sleep_notification null sent when the computer is going to sleep.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x0000100
5 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x0000102
5 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x000010...
...11 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x0000101
5 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tabbrowser/editor interface.
... xformsinputboolean 0x0000200
5 used for input[xsd:boolean] element.
... xformsitemcombobox 0x0000201
5 used for xforms item element that is used inside xforms select1 elements represented by combobox.
nsIBrowserHistory
to use this service, use: var browserhistory = components.classes["@mozilla.org/browser/nav-history-service;1"] .getservice(components.interfaces.nsibrowserhistory); method overview void addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 1
5.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, ...
... attributes attribute type description count obsolete since gecko 1
5.0 pruint32 indicates if there are entries in global history.
... note: the count attribute was removed in gecko 1
5.0 because it was only used to determine if there were any entries at all anyway, so the nsinavhistoryservice.hashistoryentries attribute is better for this.
... methods addpagewithdetails() obsolete since gecko 1
5.0 (firefox 1
5.0 / thunderbird 1
5.0 / seamonkey 2.12) note: this method was removed in gecko 1
5.0.
nsIDNSService
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) implemented by: @mozilla.org/network/dns-service;1.
... resolve_disable_ipv6 (1 <<
5) if this flag is set, only ipv4 addresses will be returned by asyncresolve() and resolve().
... init() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) called to initialize the dns service.
... shutdown() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) called to shutdown the dns service.
nsIEditorIMESupport
void getpreferredimestate( out unsigned long astate ); parameters astate native code only!getquerycaretrect obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete.
...void getquerycaretrect( in nsquerycaretrecteventreplyptr areply ); parameters areply native code only!getreconversionstring obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete.
...void getreconversionstring( in nsreconversioneventreplyptr areply ); parameters areply notifyimeonblur() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete.
...notifyimeonfocus() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0)this feature is obsolete.
nsIHttpChannelInternal
see bug
534698 and bug
526207.
...see bug
534698 and bug
526207.
...see bug
534698 and bug
526207.
...see bug
534698 and bug
526207.
nsIIdleService
the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 1
5) or 'active' (gecko 16+) notification when the user starts using their computer again.
...when the user goes idle, the observer topic is 'idle' and when they get back, the observer topic is 'back' in gecko 1
5 and earlier or 'active' in gecko 16 and later.
... the data parameter for the notification contains the current user idle time in gecko 1
5 and earlier or 0 in gecko 16 and later.
...current implementations use a delay of
5 seconds.
nsIVariant
return value the value is converted to an 8-bit string in the iso-88
59-1 character set.
...an iso-88
59-1 string is widened to a utf16 string first.
...return value the value is converted to an 8-bit string in the iso-88
59-1 character set.
... str the value is converted to an 8-bit string in the iso-88
59-1 character set.
XPCOM primitive
t16 : nsisupportsprimitive { attribute pruint16 data; string tostring(); }; pruint32 nsisupportspruint32 @mozilla.org/supports-pruint32;1 [scriptable, uuid(e01dc470-4a1c-11d3-9890-006008962422)] interface nsisupportspruint32 : nsisupportsprimitive { attribute pruint32 data; string tostring(); }; pruint64 nsisupportspruint64 @mozilla.org/supports-pruint64;1 [scriptable, uuid(e13
567c0-4a1c-11d3-9890-006008962422)] interface nsisupportspruint64 : nsisupportsprimitive { attribute pruint64 data; string tostring(); }; prtime nsisupportsprtime @mozilla.org/supports-prtime;1 [scriptable, uuid(e2
563630-4a1c-11d3-9890-006008962422)] interface nsisupportsprtime : nsisupportsprimitive { attribute prtime data; string tostring(); }; char nsisupportschar @mozilla.or...
...g/supports-char;1 [scriptable, uuid(e2b0
5e40-4a1c-11d3-9890-006008962422)] interface nsisupportschar : nsisupportsprimitive { attribute char data; string tostring(); }; print16 nsisupportsprint16 @mozilla.org/supports-print16;1 [scriptable, uuid(e30d94b0-4a1c-11d3-9890-006008962422)] interface nsisupportsprint16 : nsisupportsprimitive { attribute print16 data; string tostring(); }; print32 nsisupportsprint32 @mozilla.org/supports-print32;1 [scriptable, uuid(e36c
52
50-4a1c-11d3-9890-006008962422)] interface nsisupportsprint32 : nsisupportsprimitive { attribute print32 data; string tostring(); }; print64 nsisupportsprint64 @mozilla.org/supports-print64;1 [scriptable, uuid(e3cb0ff0-4a1c-11d3-9890-006008962422)] interface nsisupportsprint64 : nsisupportsprimitive { ...
... attribute print64 data; string tostring(); }; float nsisupportsfloat @mozilla.org/supports-float;1 [scriptable, uuid(abeaa390-4ac0-11d3-baea-0080
5f8a
5dd7)] interface nsisupportsfloat : nsisupportsprimitive { attribute float data; string tostring(); }; double nsisupportsdouble @mozilla.org/supports-double;1 [scriptable, uuid(b32
523a0-4ac0-11d3-baea-0080
5f8a
5dd7)] interface nsisupportsdouble : nsisupportsprimitive { attribute double data; string tostring(); }; voidptr nsisupportsvoid @mozilla.org/supports-void;1 [scriptable, uuid(464484f0-
568d-11d3-baf8-0080
5f8a
5dd7)] interface nsisupportsvoid : nsisupportsprimitive { [noscript] attribute voidptr data; string tostring(); }; nsisupports nsisupportsinterfacepointer @mozilla.org/supports-interface-pointer;...
...1 [scriptable, uuid(99
5ea724-1dd1-11b2-9211-c21bdd3e7ed0)] interface nsisupportsinterfacepointer : nsisupportsprimitive { attribute nsisupports data; attribute nsidptr dataiid; string tostring(); }; ...
Frequently Asked Questions
interface pointers considered harmful by don box originally appeared in the september 199
5 issue of "the c++ report".
... effective c++ (2nd edition):
50 specific ways to improve your programs and designs by scott meyers.
... more effective c++ : 3
5 new ways to improve your programs and designs by scott meyers.
... effective c++ cd: 8
5 specific ways to improve your programs and designs by scott meyers.
Getting Started Guide
testing the value in an |if| expression //
5.
...if the nscomptr addrefed the value each time you did that, cases 4 and
5 would obviously always generate leaks.
... you can tell callers you are giving them ownership in a way that doesn't pose this hazard by returning a already_addrefed<t> (see bug #
59212).
... void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a little extra work, as operator& for nscomptrs is private (to help prevent leaks caused by casting; also see bug
59414).
Status, Recent Changes, and Plans
see bug 6
5664.
... plans for nscomptr bug
59212: as soon as we test on more compilers, start recommending already_addrefed as a function result.
... bug
59414: making operator& private may help prevent some leaks caused by casting move the factored nscomptr routines into their own library, to reduce nscomptr clients' dependency on the xpcom library.
... added an entire section to the getting started guide on nscomptrs in function signatures added references to recent bugs influencing the use of nscomptr machinery: bug
59212, and bug
59414 fixed comparisons 1 and 3, as per comments by morten welinder updated examples to prefer direct initialization over copy initialization.
Working with Multiple Versions of Interfaces
for(node, getter_addrefs(accnode)); if(ns_failed(rv)){ return self; } void *wh = null; nscomptr<nsiaccessibledocument> accdocnode; accdocnode = do_queryinterface(accnode, &rv); if(ns_failed(rv)){ return self; } rv = accdocnode->getwindowhandle(&wh); if(ns_succeeded(rv)){ self = static_cast<hwnd>(wh); } return self; } this approach worked, as is, for versions as early as firefox 1.
5.
...unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c67-a1d3-44f2-9cab-cdaa31b68046" whereas, inside firefox 2, the iid it happens to know about is: "663ca4a8-d219-4000-92
5d-d8f66406b626".
...we first dredge out the old interface identifiers from our yea olde firefox 1.
5 sdk: static const nsiid iar_iid_old = { 0x663ca4a8, 0xd219, 0x4000, { 0x92, 0x
5d, 0xd8, 0xf6, 0x64, 0x06, 0xb6, 0x26 }}; static const nsiid iad_iid_old = {0x8781fc88, 0x3
55f, 0x4439, { 0x88, 0x1f, 0x6
5, 0x04, 0xa0, 0xa1, 0xce, 0xb6 }}; then follow the recipe.
... #include "accessibility/nsiaccessibledocument_old.h" static const nsiid ns_iaccessibledocument_iid_old = ns_iaccessibledocument_iid; #undef nsiaccessibledocument #undef __gen_nsiaccessibledocument_h__ #include "accessibility/nsiaccessibledocument.h" i even silenced my friend the compiler by enclosing both incantations within a compiler pragma: #pragma warning(push) #pragma warning(disable : 400
5) ...
Xptcall Porting Status
<font color="white">done</font> os/2 john fairhurst <mjf3
5@cam.ac.uk> i never heard exactly who did what.
... <font color="white">done</font> linux arm stefan hanske<sh9901
54@mail.uni-greifswald.de> <font color="red">?</font> matthew wilcox <willy@bofh.ai> stefan's code is checked in and he says it is working.
... <font color="black">investigating</font> sco uw7 and osr
5 j.
... <font color="white">done</font> linux ia64 hp ulrich drepper <drepper@redhat.com> bug 409
50 comment 1
5 <font color="white">help!</font> all others!
Autoconfiguration in Thunderbird
this allows to autoconfigure almost
50% of our user's email accounts.
... guessing if all other mechanisms failed, thunderbird tries to guess the configuration, by trying common server names like imap.<domain>, smtp.<domain>, mail.<domain> etc., and, when a mail server answers, checking whether it supports ssl, starttls and encrypted passwords (cram-md
5).
... if you support email aliases and the user's login name is not part of the email address (for example, users may have "hero@example.com" as email address, but the imap/pop/smtp login name is neither "hero" nor "hero@example.com", but "u67
578"), you need to set up a configuration server, which does the email address -> login name lookup.
... the component is actively watched for new bugs (as of november 201
5) so there is no need to request review on the file.
Mail event system
the folder calls notifyintpropertychanged on itself with the atom that represents "totalmessages": this->notifyintpropertychanged(ktotalmessagesatom, 4,
5);.
... notifypropertychanged broadcasts this event to each its nsifolderlisteners by calling onitemintpropertychanged on each listener: listener->onintpropertychanged(this, ktotalmessagesatom, 4,
5); the dialog is one of these folder-specific listeners.
... notifypropertychanged then broadcasts this event to the mail session: mailsession->onintpropertychanged(this, ktotalmessagesatom, 4,
5); the mail session rebroadcasts this information to each of the global listeners that has been registered with it.
... for each global listener, it calls onintpropertychanged: listener->onintpropertychanged(folder, ktotalmessagesatom, 4,
5); the folder datasource is a listener on all folders and receives this notification.
Working with windows in chrome code
with xpcnativewrappers turned on (which is the default in firefox 1.
5+), your extension can safely access the dom of the content document, but not the content javascript.
...todo: link to how to pass an xpcom object to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress:
50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementby...
... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress:
50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel" oncommand="window.arguments[1](); close();" /> example 3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places.
... example
5: using nsiwindowwatcher for passing an arbritrary javascript object it is still possible to pass any javascript object using nsiwindowwatcher, it just takes a little more effort.
Type conversion
16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // 6
5 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be representable in the target type.
...ray length is same in bytes) ctypes.uint32_t.array(n) uint32array (only if array length is same in bytes) ctypes.float32_t.array(n) float32array (only if array length is same in bytes) ctypes.float64_t.array(n) float64array (only if array length is same in bytes) var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t.array(
5) } ])(); mystruct.v = [1, 2, 3, 4,
5]; console.log(mystruct.v.tostring()); // 'ctypes.int16_t.array(
5)([0, 0, 0, 0, 0])' mystruct.v = int16array([1, 2, 3, 4,
5]); console.log(mystruct.v.tostring()); // 'ctypes.int16_t.array(
5)([1, 2, 3, 4,
5])' mystruct.v = [1, 2, 3, 4]; // throws error var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char.array(
5) } ])(); mystruct...
....v = "abcde"; console.log(mystruct.v.tostring()); // 'ctypes.char.array(
5)([97, 98, 99, 100, 101])' mystruct.v = "abc"; console.log(mystruct.v.tostring()); // 'ctypes.char.array(
5)([97, 98, 99, 0, 0])' mystruct.v = mystruct.v = "abcdef"; // throws error struct types js object can be converted into struct type: var point = ctypes.structtype("point", [ { x: ctypes.int32_t }, { y: ctypes.int32_t }, ]); var mystruct = ctypes.structtype("mystructtype", [ { "v": point } ])(); mystruct.v = { x: 10, y: 20 }; console.log(mystruct.v.tostring()); // 'point(10, 20)' mystruct.v = { x: 10 }; // throws error mystruct.v = { x: 10, y: 20, z: 30 }; // throws error mystruct.v = { x: 10, z: 10 }; ...
... -infinity 0 infinity nan ctypes.int64 c-style cast ctypes.uint64 js string with base-10 or base-16 string (only if fits to the size) parse src as base-10 or base-16 string console.log(ctypes.int32_t(infinity).tostring()); // 'ctypes.int32_t(0)' console.log(ctypes.int32_t("0xff").tostring())); // 'ctypes.int32_t(2
55)' console.log(ctypes.int32_t(ctypes.int64(10)).tostring()); // 'ctypes.int32_t(10)' pointer types target type source converted value any pointer types js number (only if fits to the pointer size) c-style cast ctypes.int64 (only if fits to the pointer size) c-style cast console.log(ctypes.int32_t.ptr(0xfffffffff).tostring()); // 'ctypes.
Working with ArrayBuffers
pixelbuffer.tostring(); // "ctypes.uint8_t.ptr(ctypes.uint64("0x3
52e0000"))" var imgwidth = 400; var imgheight = 400; var myimgdat = new imagedata(imgwidth, imgheight); method 1: passing arraytype cdata to uint8clampedarray.prototype.set one method is to get into a js-ctypes array, and then set it into the imagedata, as illustrated by the following code example.
...var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(640000)([4
5, 66, 13
5, 2
55, 99, 86,
55, 2
55, ..........
... ])" myimgdat.data.set(casted); the ctypes.cast takes a couple of milliseconds, however, the myimgdat.data.set takes up to 800ms for a size of
52,428,800 (which is image size of 1280 x 1024 pixels).
...method b takes ~1400 ms, for an array length of
52,428,800 (which is image size of 1280 x 1024 pixels).
Plugins
roadmap highlights since firefox
52, plugins other than flash are not loaded by firefox.
... starting in firefox
55, users will be asked to choose which sites may use flash content.
... also from firefox
55 onwards, flash and other plugins can no longer be loaded from any url scheme except for http:// and https:// (bug 133
547
5).
... starting with firefox
56 in september 2017, firefox for android will remove all support for plugins (bug 1381916).
Aggregate view - Firefox Developer Tools
for example, in the screenshot above, you can see that: there are four array objects that account for 1
5% of the total heap.
...in this case, you can see that the first three arrays have a fairly large shallow size (
5% of the total heap usage) and a much larger retained size (26% of the total).
...so, for example, the first entry says that: 4,832,
592 bytes, comprising 93% of the total heap usage, were allocated in a function at line 3
5 of "alloc.js", or in functions called by that function we can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations.
... let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 3
5 (our initial createtoolbars() call).
Monster example - Firefox Developer Tools
here's the code: var monster_count =
5000; var min_name_length = 2; var max_name_length = 48; function monster() { function randomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function randomname() { var chars = "abcdefghijklmnopqrstuvwxyz"; var namelength = randomint(min_name_length, max_name_length); var name = ""; for (var j = 0; j < namelength; j++) { name += chars[randomint(0, chars.length-1)]; } return name; } this.name = randomname(); this.eyecount = randomint(0, 2
5); this.tentaclecount = ra...
...ndomint(0, 2
50); } function makemonsters() { var monsters = { "friendly": [], "fierce": [], "undecided": [] }; for (var i = 0; i < monster_count; i++) { monsters.friendly.push(new monster()); } for (var i = 0; i < monster_count; i++) { monsters.fierce.push(new monster()); } for (var i = 0; i < monster_count; i++) { monsters.undecided.push(new monster()); } console.log(monsters); } var makemonstersbutton = document.getelementbyid("make-monsters"); makemonstersbutton.addeventlistener("click", makemonsters); the page contains a button: when you push the button, the code creates some monsters.
... for each array, the code creates and appends
5000 randomly-initialized monsters.
... so the structure of the memory allocated on the javascript heap is an object containing three arrays, each containing
5000 objects (monsters), each object containing a string and two integers: ...
Intensive JavaScript - Firefox Developer Tools
here's the code, together with its immediate caller: const iterations =
50; const multiplier = 1000000000; function calculateprimes(iterations, multiplier) { var primes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if ...
...(isprime) { primes.push(candidate); } } return primes; } function dopointlesscomputationswithblocking() { var primes = calculateprimes(iterations, multiplier); pointlesscomputationsbutton.disabled = false; console.log(primes); } we're just running a (very inefficient) primality test
50 times, for some quite large numbers.
...in fact we can be quite precise about how long it takes: there are
50 iterations, and the browser is producing about 60 frames per second.
... the main thread code would look something like this: const iterations =
50; const multiplier = 1000000000; var worker = new worker("js/calculate.js"); function dopointlesscomputationsinworker() { function handleworkercompletion(message) { if (message.data.command == "done") { pointlesscomputationsbutton.disabled = false; console.log(message.data.primes); worker.removeeventlistener("message", handleworkercompletion); } } worker.addeve...
Settings - Firefox Developer Tools
note that in firefox
52 we removed the checkbox to toggle the "select element" button.
...new in firefox
53.
...new in firefox
53.
... note: this option got removed from the ui in firefox
56, because this version ships with a new debugger ui, but it can still be enabled for the old ui by setting the preference devtools.debugger.workers to true.
Console messages - Firefox Developer Tools
css note: css warnings and reflow messages are not shown by default, for performance reasons (see bug 14
52143).
...) dirxml() error() exception() group() groupend() info() log() table() time() timeend() trace() warn() the console prints a stack trace for all error messages, like this: function foo() { console.error("it explodes"); } function bar() { foo(); } function dostuff() { bar(); } dostuff(); server server-side log messages was introduced in firefox 43, but removed in firefox
56.
...for example, "warnings (2
5)".
... network requests with response codes in the 400-499 (client error) or
500-
599 (server error) ranges are considered errors.
AnalyserNode - Web APIs
el count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="1
51" y="1" width="90" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,2
5 2
51,20 2
51,30 241,2
5" stroke="#d4dde4" fill="none"/><line x1="2
51" y1="2
5" x2="281" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...no,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
Animation.currentTime - Web APIs
at the start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the
50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings.
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 animation.currenttime; // 23.404 // 24.192 // 2
5.
514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animation.currenttime; // 49.8 //
50.6 //
51.7 // ...
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="1
51" y="1" width="90" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
...for example, if your graph has a latency of
500ms, when the source node plays a sound, it will take half a second until that sound can be heard on your speakers (or even longer because of latency in the underlying audio device).
... // constructor const analysernode = new analysernode(audioctx, { fftsize: 2048, maxdecibels: -2
5, mindecibels: -60, smoothingtimeconstant: 0.
5, }); // factory method const analysernode = audioctx.createanalyser(); analysernode.fftsize = 2048; analysernode.maxdecibels = -2
5; 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 param...
AudioParam.setTargetAtTime() - Web APIs
depending on your use case, getting 9
5% toward the target value may already be enough; in that case, you could set timeconstant to one third of the desired duration.
... time since starttime value 0 * timeconstant 0% 0.
5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.
5% 3 * timeconstant 9
5.0% 4 * timeconstant 98.2%
5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect...
...'pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.
5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.
5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick attimeplus.onclick = function() { currgain = 1.0; gainnode.gain.settargetattime(1.0, audioctx.c...
...urrenttime + 1, 0.
5); } attimeminus.onclick = function() { currgain = 0; gainnode.gain.settargetattime(0, audioctx.currenttime + 1, 0.
5); } specifications specification status comment web audio apithe definition of 'settargetattime' in that specification.
uuid - Web APIs
the bluetoothremotegattdescriptor.uuid read-only property returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-8000-0080
5f9b34fb' for theclient characteristic configuration descriptor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuuid experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
57notes notes windows 10.safari no support nowebview android no support nochrome android full support
57firefox android no support noopera android full support 44safari ios ...
CanvasRenderingContext2D.createImageData() - Web APIs
html <canvas id="canvas"></canvas> javascript the generated object is 100 pixels wide and
50 pixels tall, making
5,000 pixels in all.
... each pixel within an imagedata object consists of four array values, so the object's data property has a length of 4 ×
5,000, or 20,000.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100,
50); console.log(imagedata); // imagedata { width: 100, height:
50, data: uint8clampedarray[20000] } filling a blank imagedata object this example creates and fills a new imagedata object with purple pixels.
...const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 2
55; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() and the imagedata object, see pixel manipulation with canvas and imagedata.data.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // quadratic bézier curve ctx.beginpath(); ctx.moveto(
50, 20); ctx.quadraticcurveto(230, 30,
50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(
50, 20,
5, 0, 2 * math.pi); // start point ctx.arc(
50, 100,
5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30,
5, 0, 2 * math.pi); ctx.fill(); result in this example, the control point is r...
...the control point is placed at (230, 1
50).
... the curve ends at (2
50, 20).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 1
50, 2
50, 20); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
Constraint validation API - Web APIs
this has been removed as of version 66 (see bug 1
513890).
... living standard html
5.1the definition of 'constraint validation api' in that specification.
... recommendation no change from the previous snapshot html
5.
... html
5the definition of 'constraint validation api' in that specification.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
the demonstrations provided here will work fine in any modern browser, including all versions of firefox and ie
5+.
...et a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body mybodyelements = mybody.getelementsbytagname("p"); // get the second item of the list of p elements myp = mybodyelements[1]; myp.style.background = "rgb(2
55,0,0)"; } in this example, we set the myp variable to the dom object for the second p element inside the body: first, we get a list of all the body elements via mybody = document.getelementsbytagname("body")[0] since there is only one body element in any valid html document, this list will have only one item, which we retrieve by selecting the first element in that list using [0].
...for example, if you want to set the style background color property, you just add: myp.style.background = "rgb(2
55,0,0)"; // setting inline style attribute creating textnodes with document.createtextnode("..") use the document object to invoke the createtextnode method and create your text node.
...if the column is 1 hide the cell if (col === 0) { mycurrent_cell.style.background = "rgb(2
55,0,0)"; } else { mycurrent_cell.style.display = "none"; } } mytablebody.appendchild(mycurrent_row); } mytable.appendchild(mytablebody); mybody.appendchild(mytable); } </script> </html> original document information author(s) marcio galli migrated from http://web.archive.org/web/2000081
50
5412
5/ht...
EffectTiming.easing - Web APIs
accepts several pre-defined domstring values, a steps() timing function like steps(
5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.
58, 1).
...equivalent to cubic-bezier(0.2
5, 0.1, 0.2
5, 1).
...equivalent to cubic-bezier(0, 0, 0.
58, 1).
...equivalent to cubic-bezier(0.42, 0, 0.
58, 1).
Element - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace...
..." fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
... note: in firefox 3.
5 and earlier, html elements are in no namespace.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86...
..." y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties also inherits properties from its parent event.
... living standard added the error property and the
5th parameter to the constructor.
... html
5the definition of 'errorevent' in that specification.
Event.timeStamp - Web APIs
in newer implementations, the value is a domhighrestimestamp accurate to
5 microseconds (0.00
5 ms).
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 event.timestamp; // 1
519211809934 // 1
519211810362 // 1
519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled event.timestamp; // 1
5191298
53
500 // 1
5191298
58900 // 1
519129864400 // ...
File.lastModified - Web APIs
const filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 148
5903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified might get rounded depending on browser settings.
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 somefile.lastmodified; // 1
519211809934 // 1
519211810362 // 1
519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodified; // 1
5191298
53
500 // 1
5191298
58900 // 1
519129864400 // ...
FileReaderSync - Web APIs
the optional encoding parameter indicates the encoding to be used (e.g., iso-88
59-1 or utf-8).
...—
59edge ?
...—
59chrome android no support ?
... —
59firefox android no support ?
FileSystem - Web APIs
it's not available for use in file or folder picker panels (such as when you use an <input> element with the htmlinputelement.webkitdirectory attribute.firefox full support
50ie no support noopera full support 1
5prefixed full support 1
5prefixed prefixed implemented with the vendor prefix: webkitsafari full support 11.1webview android full support ...
... ≤37alternate name alternate name uses the non-standard name: domfilesystemchrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name: domfilesystemfirefox android full support
50opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: webkitsafari ios full support 11.3samsung internet android full support 1.0prefixed full suppo...
...rt 1.0prefixed prefixed implemented with the vendor prefix: webkitnamechrome full support 7edge full support ≤18firefox full support
50ie no support noopera full support 1
5safari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support
50opera android full support 14...
...safari ios full support 11.3samsung internet android full support 1.0rootchrome full support 7edge full support ≤18firefox full support
50ie no support noopera full support 1
5safari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support
50opera andr...
GlobalEventHandlers - Web APIs
living standard no change since the latest snapshot, html
5.1.
... html
5.1the definition of 'globaleventhandlers' in that specification.
...added onsort since the html
5 snapshot.
... html
5the definition of 'globaleventhandlers' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
examples given this <canvas> element: <canvas id="canvas" width="
5" height="
5"></canvas> you can get a data-url of the canvas with the following lines: var canvas = document.getelementbyid('canvas'); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc" setting image quality with jpegs var fullquality = canvas.todataurl('image/jpeg'...
..., 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.
5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
... living standard no change since the latest snapshot, html
5 html
5.1the definition of 'htmlcanvaselement.todataurl' in that specification.
... recommendation html
5the definition of 'htmlcanvaselement.todataurl' in that specification.
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,...
...2
5 1
51,20 1
51,30 141,2
5" stroke="#d4dde4" fill="none"/><line x1="1
51" y1="2
5" x2="181" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
... living standard no change since the last snapshot, html
5.
... html
5the definition of 'htmlformcontrolscollection' in that specification.
HTMLImageElement.srcset - Web APIs
for example, to provide an image resource to be used when the renderer needs a 4
50 pixel wide image, use the width descriptor string 4
50w.
... .box { width: 200px; border: 2px solid rgba(1
50, 1
50, 1
50, 2
55); padding: 0.
5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event.
...or androidfirefox for androidopera for androidsafari on iossamsung internetsrcset experimentalchrome full support 34edge full support 12firefox full support 38 full support 38 no support 32 —
52disabled disabled from version 32 until version
52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
...1safari full support 8webview android full support 37chrome android full support 34firefox android full support 38 full support 38 no support 32 —
52disabled disabled from version 32 until version
52 (exclusive): this feature is behind the dom.image.srcset.enabled preference (needs to be set to true).
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-ba...
...seline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font...
...-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4...
...dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...<a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="6
5" width="190" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status comment html
5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" s...
...troke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anch...
...or="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web...
.../api/htmlpictureelement" target="_top"><rect x="311" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line...
... x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="mi...
...ddle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_t...
...op"><rect x="321" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSlotElement.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support
53edge full support 79firefox full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 40safari full support 10.1webview android full support
53chrome android full support
53firefox android full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,2
5 501,20
501,30 491,2
5" stroke="#d4dde4" fill="none"/><line x1="
501" y1="2
5" x2="
509" y2="2
5" stroke="#d4dde4"/><line x1="
509" y1="2
5" x2="
509" y2="90" stroke="#d4dde4"/><line x1="
509" y1="90" x2="492" y2="90" stroke="#d4dde4"/>...
...<a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
IDBObjectStore.createIndex() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 117616
5.) example in the following example you can see the idbopendbrequest.onupgradeneeded handler being used to update the database structure if a database with a higher version number is loaded.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateindexchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.deleteIndex() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 117616
5.) notfounderror occurs if there is no index with the given name (case-sensitive) in the database.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteindexchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monac...
...o,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="1
50" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,2
5 276,20 276,30 266,2
5" stroke="#d4dde4" fill="none"/><line x1="276" y1="2
5" x2="306" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" h...
...eight="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
...toprefetch) { return new request(urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); specifications specification status comment service workers working draft as of may 201
5, the install event is an instance of extendableevent rather than a child of it.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
...l="#4d4e
53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
... auto-repeat handling prior to gecko
5.0 before gecko
5.0 (firefox
5.0 / thunderbird
5.0 / seamonkey 2.2), keyboard handling was less consistent across platforms.
Using the Media Capabilities API - Web APIs
const videoconfiguration = { type: "file", video: { contenttype: "video/webm;codecs=vp8", width: 800, height: 600, bitrate: 10000, framerate: 1
5 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const audioconfiguration = { type: "file", audio: { contenttype: "audio/ogg", channels: 2, bitrate: 132700, samplerat...
...e:
5200 } }; had we been testing encoding capabilities, we would have created a mediaencodingconfiguration, which requires the type of media being tested — either record (for recording media, i.e.
... <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>7680x4320</option> <option>3840x2160</option> <option>2
560x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x600</option> <option>640x480</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"> <option>60</option> <option>
50</option> <option...
...>30</option> <option>24</option> <option selected>1
5</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2
500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document.getelementbyid('codec').value, width: size[0], ...
PaymentResponse.shippingAddress - Web APIs
ion updatedetails(details, shippingaddress, resolve) { if (shippingaddress.country === 'us') { var shippingoption = { id: '', label: '', amount: {currency: 'usd', value: '0.00'}, selected: true }; if (shippingaddress.region === 'mo') { shippingoption.id = 'mo'; shippingoption.label = 'free shipping in missouri'; details.total.amount.value = '
55.00'; } else { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '
5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingaddresschrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
56 full support
56 no support
53 —
56disabled disabled from version
53 until version
56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.shippingOption - Web APIs
).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); function updatedetails(details, shippingoption, resolve, reject) { var selectedshippingoption; var othershippingoption; if (shippingoption === 'standard') { selectedshippingoption = details.shippingoptions[0]; othershippingoption = details.shippingoptions[1]; details.total.amount.value = '
55.00'; } else if (shippingoption === 'express') { selectedshippingoption = details.shippingoptions[1]; othershippingoption = details.shippingoptions[0]; details.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayite...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
56 full support
56 no support
53 —
56disabled disabled from version
53 until version
56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
RTCDataChannel: bufferedamountlow event - Web APIs
bubbles no cancelable no interface event event handler property onbufferedamountlow examples this example sets up a handler for bufferedamountlow to request more data any time the data channel's buffer falls below the number of bytes specified by bufferedamountlowthreshold, which we have set to 6
5536.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel("sendfile"); let source = /* source data object */ dc.bufferedamountlowthreshold = 6
5536; pc.addeventlistener("bufferedamountlow", ev => { if (source.position <= source.length) { dc.send(source.readfile(6
5536)); } }, false); after creating the rtcpeerconnection, this calls rtcpeerconnection.createdatachannel() to create the data channel.
... then a listener is created for bufferedamountlow to refill the incoming data buffer any time its contents fall below 6
5536 bytes.
... you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(6
5536)); } } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
RTCPeerConnection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="1
51" y="1" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only r...
...terface creates a new channel linked with the remote peer, over which any kind of data may be transmitted.createoffer()the createoffer() method of the rtcpeerconnection interface initiates the creation of an sdp offer for the purpose of starting a new webrtc connection to a remote peer.generatecertificate()the generatecertificate() method of the rtcpeerconnection interface creates and stores an x.
509 certificate and corresponding private key then returns an rtccertificate, providing access to it.getconfiguration() the rtcpeerconnection.getconfiguration() method returns an rtcconfiguration object which indicates the current configuration of the rtcpeerconnection on which the method is called.getidentityassertion() the rtcpeerconnection.getidentityassertion() method initiates the gathering ...
... note: in technical terms, a bundle lets all media flow between two peers flow across a single
5-tuple; that is, from a single ip and port on one peer to a single ip and port on the other peer, using the same transport protocol.
RsaHashedKeyGenParams - Web APIs
the rsahashedkeygenparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generatekey(), when generating any rsa-based key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep.
...this should be set to rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep, depending on the algorithm you want to use.
...unless you have a good reason to use something else, specify 6
5537 here ([0x01, 0x00, 0x01]).
...you can pass any of sha-2
56, sha-384, or sha-
512 here.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="...
...291" y="6
5" width="190" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="2
51" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #009
5dd; poi...
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" ...
...fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a...
... xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="6
5" width="190" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,...
...30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e...
...
53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href...
...="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGCursorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 ...
...111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgcursorelement" target="_top"><rect x="321" y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x...
...2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y=...
..."6
5" width="180" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="6
5" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: ...
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x...
...2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="6
5"...
... width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line ...
...x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="mid...
...dle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target=...
..."_top"><rect x="2
51" y="6
5" width="230" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="n...
...one"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-b...
...aseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransf...
...erelement" target="_top"><rect x="191" y="6
5" width="290" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/>...
...<line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baselin...
...e="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement...
..." target="_top"><rect x="221" y="6
5" width="260" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
51" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelem...
...ent" target="_top"><rect x="211" y="6
5" width="270" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"...
.../><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-basel...
...ine="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelem...
...ent" target="_top"><rect x="211" y="6
5" width="270" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" targ...
...et="_top"><rect x="241" y="6
5" width="240" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_t...
...op"><rect x="261" y="6
5" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="31...
...1" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><lin...
...e x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="m...
...iddle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" targ...
...et="_top"><rect x="241" y="6
5" width="240" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="31...
...1" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="31...
...1" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"...
...><rect x="271" y="6
5" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_t...
...op"><rect x="261" y="6
5" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x=...
..."301" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_t...
...op"><rect x="261" y="6
5" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="non...
...e"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-bas...
...eline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightinge...
...lement" target="_top"><rect x="201" y="6
5" width="280" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="...
...121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle"...
...>element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"...
...><rect x="271" y="6
5" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" ...
...y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middl...
...e">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_t...
...op"><rect x="261" y="6
5" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 ...
...111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" ...
...text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/d...
...ocs/web/api/svgfilterelement" target="_top"><rect x="321" y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51...
..." y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text></a><...
...polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="6
5" w...
...idth="180" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="1
51" y="6
5" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} ...
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#...
...d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="midd...
...le" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggr...
...adientelement" target="_top"><rect x="301" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d...
...4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middl...
...e" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggra...
...phicselement" target="_top"><rect x="301" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5"...
... x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" ...
...y="6
5" width="180" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="6
5" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-even...
SVGLength - Web APIs
(in unsigned short unittype) properties readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants svg_lengthtype_unknown = 0 svg_lengthtype_number = 1 svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthtype_exs = 4 svg_lengthtype_px =
5 svg_lengthtype_cm = 6 svg_lengthtype_mm = 7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"><![cdata[ function start() { var rect = document.get...
... " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); } ]]></script> <rect id="myrect" x="1cm" y="1cm" fill="green" stroke="black" stroke-width="1" width="1cm" height="1cm" /> </svg> results on a desktop monitor (pixel units will be dpi-dependent): value: 37.79
527664184
57, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.66666603088379, valueinspecifiedunits 8: 0.277777761220932, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types.
... svg_lengthtype_px
5 a value was specified using the px units defined in css2.
...for example, if the original value were "0.
5cm" and the method was invoked to convert to millimeters, then the unittype would be changed to svg_lengthtype_mm, valueinspecifiedunits would be changed to the numeric value
5 and valueasstring would be changed to "
5mm".
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5"...
... x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="...
...6
5" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,...
...2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text...
...-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/...
...web/api/svgmaskelement" target="_top"><rect x="341" y="6
5" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x=...
..."301" y="6
5" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGPathSeg - Web APIs
rties unsigned short pathsegtype domstring pathsegtypeasletter constants pathseg_unknown = 0 pathseg_closepath = 1 pathseg_moveto_abs = 2 pathseg_moveto_rel = 3 pathseg_lineto_abs = 4 pathseg_lineto_rel =
5 pathseg_curveto_cubic_abs = 6 pathseg_curveto_cubic_rel = 7 pathseg_curveto_quadratic_abs = 8 pathseg_curveto_quadratic_rel = 9 pathseg_arc_abs = 10 pathseg_arc_rel = 11 pathseg_lineto_horizontal_abs = 12 pathseg_lineto_horizontal_rel = 13 pathseg_lineto_vertical_abs = 14 pathse...
...g_lineto_vertical_rel = 1
5 pathseg_curveto_cubic_smooth_abs = 16 pathseg_curveto_cubic_smooth_rel = 17 pathseg_curveto_quadratic_smooth_abs = 18 pathseg_curveto_quadratic_smooth_rel = 19 normative document svg 1.1 (2nd edition) constants name value description pathseg_unknown 0 the unit type is not one of predefined types.
... pathseg_lineto_rel
5 corresponds to a "relative lineto" (l) path data command.
... pathseg_lineto_vertical_rel 1
5 corresponds to a "relative vertical lineto" (v) path data command.
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
..."2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element...
...</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="31...
...1" y="6
5" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y...
...1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eleme...
...nt</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="3...
...21" y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2=...
..."1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="...
...6
5" width="190" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="2
51" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="6
5" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: al...
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x...
...2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="6
5"...
... width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none...
..."/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-base...
...line="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target...
...="_top"><rect x="331" y="6
5" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301...
..." y="6
5" width="180" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-...
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</...
...text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" ...
...y="6
5" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5"...
... x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="...
...6
5" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><li...
...ne x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="...
...middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,2
5 491,20 491,30 481,2
5" stroke="#d4dde4" fill="none"/><line x1="491" y1="2
5" x2="499" y2="2
5" stroke="#d4dde4"/><line x1="499" y1="2
5" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_...
...top"><rect x="301" y="6
5" width="180" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="6
5" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #009
5d...
Slottable: assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot experimentalchrome full support
53edge full support 79firefox full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 40safari full support 10.1webview android full support
53chrome android full support
53firefox android full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
SubtleCrypto.generateKey() - Web APIs
for rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep: pass an rsahashedkeygenparams object.
... let keypair = window.crypto.subtle.generatekey( { name: "rsa-oaep", moduluslength: 4096, publicexponent: new uint8array([1, 0, 1]), hash: "sha-2
56" }, true, ["encrypt", "decrypt"] ); elliptic curve key pair generation this code generates an ecdsa signing key pair.
... let key = window.crypto.subtle.generatekey( { name: "hmac", hash: {name: "sha-
512"} }, true, ["sign", "verify"] ); aes key generation this code generates an aes-gcm encryption key.
... let key = window.crypto.subtle.generatekey( { name: "aes-gcm", length: 2
56 }, true, ["encrypt", "decrypt"] ); specifications specification status comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification.
TextDecoder - Web APIs
the textdecoder interface represents a decoder for a specific text encoding, such as utf-8, iso-88
59-2, koi8-r, gbk, etc.
... let utf8decoder = new textdecoder(); // default 'utf-8' or 'utf8' let u8arr = new uint8array([240, 160, 174, 183]); let i8arr = new int8array([-16, -96, -82, -73]); let u16arr = new uint16array([41200, 47022]); let i16arr = new int16array([-24336, -18
514]); let i32arr = new int32array([-1213292304]); console.log(utf8decoder.decode(u8arr)); console.log(utf8decoder.decode(i8arr)); console.log(utf8decoder.decode(u16arr)); console.log(utf8decoder.decode(i16arr)); console.log(utf8decoder.decode(i32arr)); handling non-utf8 text in this example, we decode the russian text "Привет, мир!", which means "hello, world." in our textdecoder() co...
...nstructor, we specify the windows-12
51 character encoding, which is appropriate for cyrillic script.
... let win12
51decoder = new textdecoder('windows-12
51'); let bytes = new uint8array([207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33]); console.log(win12
51decoder.decode(bytes)); // Привет, мир!
TouchEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="...
...#4d4e
53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
... the exception to this is chrome, starting with version
56 (desktop, chrome for android, and android webview), where the default value for the passive option for touchstart and touchmove is true and calls to preventdefault() will have no effect.
WEBGL_compressed_texture_astc - Web APIs
constants blocks bits per pixel arraybuffer bytelength bytes if height and width are
512 ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr 4x4 8.00 floor((width + 3) / 4) * floor((height + 3) / 4) * 16 262144 ext.compressed_rgba_astc_
5x4_khr ext.compressed_srgb8_alpha8_astc_
5x4_khr
5x4 6.40 floor((width + 4) /
5) * floor((height + 3) / 4) * 16 210944 ext.compressed_rgba_astc_
5x
5_khr ext.compress...
...ed_srgb8_alpha8_astc_
5x
5_khr
5x
5 5.12 floor((width + 4) /
5) * floor((height + 4) /
5) * 16 169744 ext.compressed_rgba_astc_6x
5_khr ext.compressed_srgb8_alpha8_astc_6x
5_khr 6x
5 4.27 floor((width +
5) / 6) * floor((height + 4) /
5) * 16 141728 ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr 6x6 3.
56 floor((width +
5) / 6) * floor((height +
5) / 6) * 16 118336 ext.compressed_rgba_astc_8x
5_khr ext.compressed_srgb8_alpha8_astc_8x
5_khr 8x
5 3.20 floor((width + 7) / 8) * floor((height + 4) /
5) * 16 10
5472 ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr 8x6 2.67 floor((width + 7) / 8) * floor((height +
5) / 6) * 16 88064 ex...
...t.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor((height + 7) / 8) * 16 6
5536 ext.compressed_rgba_astc_10x
5_khr ext.compressed_srgb8_alpha8_astc_10x
5_khr 10x
5 2.
56 floor((width + 9) / 10) * floor((height + 4) /
5) * 16 8
5696 ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr 10x6 2.13 floor((width + 9) / 10) * floor((height +
5) / 6) * 16 71
552 ext.compressed_rgba_astc_10x8_khr ext.compressed_srgb8_alpha8_astc_10x8_khr 10x8 1.60 floor((width + 9) / 10) * floor((height + 7) / 8) * 16
53248 ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr 10x10 1.28 floor((width ...
...+ 9) / 10) * floor((height + 9) / 10) * 16 43264 ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr 12x10 1.07 floor((width + 11) / 12) * floor((height + 9) / 10) * 16 3
5776 ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr 12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 29
584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr,
512,
512, 0, texturedata); specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compress...
WebGL2RenderingContext.texImage3D() - Web APIs
gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb
56
5 gl.r11f_g11f_b10f gl.rgb9_e
5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb
5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture.
...possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_
5_6_
5:
5 red bits, 6 green bits,
5 blue bits.
... gl.unsigned_short_
5_
5_
5_1:
5 red bits,
5 green bits,
5 blue bits, 1 alpha bit.
... gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_
5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) source one of the following objects can be used as a pixel source for the texture: arraybufferview, imagebitmap, imagedata, htmlimageelement, htmlcanvaselement, htmlvideoelement.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
possible values: when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt3_ext ext.compressed_rgba_s3tc_dxt
5_ext when using the webgl_compressed_texture_s3tc_srgb extension: ext.compressed_srgb_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt3_ext ext.compressed_srgb_alpha_s3tc_dxt
5_ext when using the webgl_compressed_texture_etc extension: ext.compressed_r11_eac ext.compressed_signed_r11_eac ext.compressed_rg1...
..._rgb_etc1_webgl when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_
5x4_khr ext.compressed_srgb8_alpha8_astc_
5x4_khr ext.compressed_rgba_astc_
5x
5_khr ext.compressed_srgb8_alpha8_astc_
5x
5_khr ext.compressed_rgba_astc_6x
5_khr ext.compressed_srgb8_alpha8_astc_6x
5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x
5_khr ext.compressed_srgb8_alpha8_astc_8x
5_khr ext.compres...
...sed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compressed_rgba_astc_10x
5_khr ext.compressed_srgb8_alpha8_astc_10x
5_khr ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr when using the ext_texture_compression_bptc extension: ext.compressed_rgba_bptc_unorm_ext ext.compressed_srgb_alpha_bptc_unorm_ext ext.compressed_rgb_bptc_signed_float_ext ext.compressed_rgb...
... examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc') || gl.getextension('moz_webgl_compressed_texture_s3tc') || gl.getextension('webkit_webgl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt
5_ext,
512,
512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status comment webgl 1.0the definition of 'compressedteximage2d' in that specification.
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
possible values: when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt1_ext ext.compressed_rgba_s3tc_dxt3_ext ext.compressed_rgba_s3tc_dxt
5_ext when using the webgl_compressed_texture_s3tc_srgb extension: ext.compressed_srgb_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt1_ext ext.compressed_srgb_alpha_s3tc_dxt3_ext ext.compressed_srgb_alpha_s3tc_dxt
5_ext when using the webgl_compressed_texture_etc extension: ext.compressed_r11_eac ext.compressed_signed_r11_eac ext.compressed_rg1...
...vrtc_2bppv1_img when using the webgl_compressed_texture_atc extension: ext.compressed_rgb_atc_webgl ext.compressed_rgba_atc_explicit_alpha_webgl ext.compressed_rgba_atc_interpolated_alpha_webgl when using the webgl_compressed_texture_astc extension: ext.compressed_rgba_astc_4x4_khr ext.compressed_srgb8_alpha8_astc_4x4_khr ext.compressed_rgba_astc_
5x4_khr ext.compressed_srgb8_alpha8_astc_
5x4_khr ext.compressed_rgba_astc_
5x
5_khr ext.compressed_srgb8_alpha8_astc_
5x
5_khr ext.compressed_rgba_astc_6x
5_khr ext.compressed_srgb8_alpha8_astc_6x
5_khr ext.compressed_rgba_astc_6x6_khr ext.compressed_srgb8_alpha8_astc_6x6_khr ext.compressed_rgba_astc_8x
5_khr ext.compressed_srgb8_alpha8_astc_8x
5_khr ext.compres...
...sed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr ext.compressed_rgba_astc_10x
5_khr ext.compressed_srgb8_alpha8_astc_10x
5_khr ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x6_khr ext.compressed_srgb8_alpha8_astc_10x6_khr ext.compressed_rgba_astc_10x10_khr ext.compressed_srgb8_alpha8_astc_10x10_khr ext.compressed_rgba_astc_12x10_khr ext.compressed_srgb8_alpha8_astc_12x10_khr ext.compressed_rgba_astc_12x12_khr ext.compressed_srgb8_alpha8_astc_12x12_khr when using the ext_texture_compression_bptc extension: ext.compressed_rgba_bptc_unorm_ext ext.compressed_srgb_alp...
... examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc') || gl.getextension('moz_webgl_compressed_texture_s3tc') || gl.getextension('webkit_webgl_compressed_texture_s3tc') ); gl.compressedtexsubimage2d(gl.texture_2d, 0, 2
56, 2
56,
512,
512, ext.compressed_rgba_s3tc_dxt
5_ext, texturedata); specifications specification status comment webgl 1.0the definition of 'compressedtexsubimage2d' in that specification.
WebGLRenderingContext.texSubImage2D() - Web APIs
possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_
5_6_
5:
5 red bits, 6 green bits,
5 blue bits.
... gl.unsigned_short_
5_
5_
5_1:
5 red bits,
5 green bits,
5 blue bits, 1 alpha bit.
...nsion: gl.float when using the oes_texture_half_float extension: gl.half_float_oes when using a webgl 2 context, the following values are available additionally: gl.byte gl.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_
5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) pixels one of the following objects can be used as a pixel source for the texture: arraybufferview, a uint8array must be used if type is gl.unsigned_byte.
... a uint16array must be used if type is either gl.unsigned_short_
5_6_
5, gl.unsigned_short_4_4_4_4, gl.unsigned_short_
5_
5_
5_1, or ext.half_float_oes.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-32768, 32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 2
55] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 6
553
5] gl.float: 32-bit ieee floating point number when using a webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a flo...
...cannot be larger than 2
55.
... for example, the following vertex: { "position": [1.0, 2.0, 1.
5], "normal": [1.0, 0.0, 0.0], "texcoord": [0.
5, 0.2
5] } will be stored in the array buffer as follows: 00 00 80 3f 00 00 00 40 00 00 0c 3f 7f 00 00 00 7f ff 3f ff creating the array buffer first, we dynamically create the array buffer from json data using a dataview.
...; i < vertices.length; i++) { dv.setfloat32(20 * i, vertices[i].position[0], true); dv.setfloat32(20 * i + 4, vertices[i].position[1], true); dv.setfloat32(20 * i + 8, vertices[i].position[2], true); dv.setint8(20 * i + 12, vertices[i].normal[0] * 0x7f); dv.setint8(20 * i + 13, vertices[i].normal[1] * 0x7f); dv.setint8(20 * i + 14, vertices[i].normal[2] * 0x7f); dv.setint8(20 * i + 1
5, 0); dv.setuint16(20 * i + 16, vertices[i].texcoord[0] * 0xffff, true); dv.setuint16(20 * i + 18, vertices[i].texcoord[1] * 0xffff, true); } for higher performance, we could also do the previous json to arraybuffer conversion on the server-side, e.g.
Using DTMF with WebRTC - Web APIs
if you'd like to know more about how this works, read rfc 3
550: rtp: a transport protocol for real-time applications and rfc 4733: rtp payload for dtmf digits, telephony tones, and telephony signals.
... let dialstring = "12024
561111"; let callerpc = null; let receiverpc = null; let dtmfsender = null; let hasaddtrack = false; let mediaconstraints = { audio: true, video: false }; let offeroptions = { offertoreceiveaudio: 1, offertoreceivevideo: 0 }; let dialbutton = null; let logelement = null; these are, in order: dialstring the dtmf string the caller will send when the "dial" button is clicked.
... function handlecallericeconnectionstatechange() { log("caller's connection state changed to " + callerpc.iceconnectionstate); if (callerpc.iceconnectionstate === "connected") { log("sending dtmf: \"" + dialstring + "\""); dtmfsender.insertdtmf(dialstring, 400,
50); } } the iceconnectionstatechange event doesn't actually include within it the new state, so we get the connection process's current state from callerpc's rtcpeerconnection.iceconnectionstate property.
... our call to insertdtmf() specifies not only the dtmf to send (dialstring), but also the length of each tone in milliseconds (400 ms) and the amount of time between tones (
50 ms).
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
thus a matrix that looks like this: [a1a
5a9a13a2a6a10a14a3a7a11a1
5a4a8a12a16]\left [ \begin{matrix} a_{1} & a_{
5} & a_{9} & a_{13} \\ a_{2} & a_{6} & a_{10} & a_{14} \\ a_{3} & a_{7} & a_{11} & a_{1
5} \\ a_{4} & a_{8} & a_{12} & a_{16} \end{matrix} \right ] is represented in array form like this: let matrixarray = [a1, a2, a3, a4, a
5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a1
5, a16]; in this array, the leftmost co...
...the topmost row contains the entries a1, a
5, a9, and a13.
...human eyes typically have a horizontal field of view of around 13
5° (about 2.3
56 radians) and a vertical fov of about 180° (π or around 3.142 radians).
... for example, consider a device which uses a 2
560x1440 pixel frame buffer.
Fundamentals of WebXR - Web APIs
a human eye is typically able to take in a fov of around 13
5°.
...that overlap is what gives us depth perception; within the overlap area — which is around 11
5° across — we have depth perception.
...basic headsets typically start around 90° or so, while the best headsets generally have a field of view of around 1
50°.
...for example, if a headset uses a 2
560x1440 screen, with the left half being used for the left eye's view and the right half or the right eye's view, the framebuffer is used like this: the simplest headsets have no integrated sensors, and simply focus each half of the screen into the corresponding eye.
Window.customElements - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support
54edge full support 79firefox full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be se...
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 41safari full support 10.1webview android full support
54chrome android full support
54firefox android full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true).
...—
59disabled disabled until version
59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true).
Window.showModalDialog() - Web APIs
this method was removed in chrome 43 and firefox
56.
... notes showmodaldialog() was briefly standardized as part of html
5.
... the third argument for additional options was not present in the html
5 version.
...— 43edge no support nofirefox no support 3 —
56ie full support 4opera no support nosafari full support
5.1notes full support
5.1notes notes see webkit bug 1
5188
5 for possible future removal from safari.webview android no support ...
WindowEventHandlers - Web APIs
living standard no change since the latest snapshot, html
5.1.
... html
5.1the definition of 'windoweventhandlers' in that specification.
...added onlanguage since the html
5 snapshot.
... html
5the definition of 'windoweventhandlers' in that specification.
WindowOrWorkerGlobalScope.btoa() - Web APIs
16array(string.length); for (let i = 0; i < codeunits.length; i++) { codeunits[i] = string.charcodeat(i); } return string.fromcharcode(...new uint8array(codeunits.buffer)); } // a string that contains characters occupying > 1 byte const mystring = "☸☹☺☻☼☾☿"; const converted = tobinary(mystring); const encoded = btoa(converted); console.log(encoded); // ocy
5jjomoyy8jj4mpyy= if you do this, of course you'll have to reverse the conversion on the decoded string: function frombinary(binary) { const bytes = new uint8array(binary.length); for (let i = 0; i < bytes.length; i++) { bytes[i] = binary.charcodeat(i); } return string.fromcharcode(...new uint16array(bytes.buffer)); } const decoded = atob(encoded); const original = frombinary(decode...
...d); console.log(original); // ☸☹☺☻☼☾☿ polyfill you can use a polifill from https://github.com/maxart2
501/base64-js/blob/master/base64.js for browsers that don't support it.
... html
5.1the definition of 'windowbase64.btoa()' in that specification.
... html
5the definition of 'windowbase64.btoa()' in that specification.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
const {cc,ci} = require("chrome"); function createtcperrorfromfailedxhr(xhr) { let status = xhr.channel.queryinterface(ci.nsirequest).status; let errtype; if ((status & 0xff0000) === 0x
5a0000) { // security module const nsinsserrorsservice = ci.nsinsserrorsservice; let nsserrorsservice = cc['@mozilla.org/nss_errors_service;1'].getservice(nsinsserrorsservice); let errorclass; // geterrorclass will throw a generic ns_error_failure if the error code is // somehow not in the set of covered errors.
... .sslstatus.queryinterface(ci.nsisslstatus).servercert; dump("\tcommon name (cn) = " + cert.commonname + "\n"); dump("\tissuer = " + cert.issuerorganization + "\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix
509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfail...
... sha1 fingerprint = f4:99:64:18:6b:7d:c8:fa:c0:0c:2e:a9:61:77:28:67:13:c4:97:7b valid from 7/14/2011 0:00:00 am valid until 8/20/2013 23:
59:
59 pm and here is the output of making an https request to a server that uses an expired certificate: test("https://www.appliancetherapy.com/"); note that the security state has become "insecure" now and there is an error name reported: connection status: failed: securityexpiredcertificateerror security info: security state: insecure common name (cn) = www.appliancether...
... sha1 fingerprint = f1:8c:38:96:0a:30:63:16:47:fa:6e:cd:7d:
58:cc:ab:82:fb:a9:d0 valid from 9/1/2010 0:00:00 am valid until 9/1/2012 23:
59:
59 pm ...
Synchronous and asynchronous requests - Web APIs
line 1
5 actually initiates the request.
... line
5 declares a function invoked when the xhr operation fails to complete successfully.
... line 1
5 specifies true for its third parameter to indicate that the request should be handled asynchronously.
... line
5 checks the status code after the transaction is completed.
:read-only - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius:
5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 1
50%; padding:
5px; border-radius:
5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification.
... html
5the definition of ':read-only' in that specification.
...roidfirefox for androidopera for androidsafari on iossamsung internet:read-onlychrome full support 1edge full support 13firefox full support 78 full support 78 full support 1.
5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4webview android full support ≤37chrome android full support ...
:read-write - CSS: Cascading Style Sheets
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius:
5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
... <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 1
50%; padding:
5px; border-radius:
5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification.
... html
5the definition of ':read-write' in that specification.
...oidfirefox for androidopera for androidsafari on iossamsung internet:read-writechrome full support 1edge full support 13firefox full support 78 full support 78 full support 1.
5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4webview android full support ≤37chrome android full support ...
:scope - CSS: Cascading Style Sheets
erasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:scopechrome full support 27edge full support 79firefox full support 32notes full support 32notes notes firefox
55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported.
...to change preferences in firefox, visit about:config.ie no support noopera full support 1
5safari full support 7webview android full support ≤37chrome android full support 27firefox android full support 32notes full support 32notes notes firefox
55 removes suppor...
...to change preferences in firefox, visit about:config.opera android full support 1
5safari ios full support 7samsung internet android full support 1.
5support in dom api such as in queryselector() and queryselectorall()chrome full support 27edge full support 79firefox full support ...
... 32ie no support noopera full support 1
5safari full support 7webview android full support ≤37chrome android full support 27firefox android full support 32opera android full support 1
5safari ios full support 7samsung internet android full support 1.
5legend full support full support no sup...
@charset - CSS: Cascading Style Sheets
this method is obsoleted in html
5 and must not be used.
... assume that the document is utf-8 syntax @charset "utf-8"; @charset "iso-88
59-1
5"; where: charset is a <string> denoting the character encoding to be used.
... formal syntax @charset "<charset>"; examples valid and invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-88
59-1
5'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (revision 1)the definition of...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@charsetchrome full support 2edge full support 12firefox full support 1.
5notes full support 1.
5notes notes firefox 1 supported an invalid syntax where the character encoding is not between single or double quotes.ie full support
5.
5notes full support
5.
5notes notes from internet explorer
5.
5 to ie 7 (inclusive), internet explorer supp...
font-stretch - CSS: Cascading Style Sheets
syntax /* single values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch:
50%; font-stretch: 100%; font-stretch: 200%; /* multiple values */ font-stretch: 7
5% 12
5%; font-stretch: condensed ultra-condensed;; the font-weight property is described using any one of the values listed below.
... <percentage> a <percentage> value between
50% and 200% (inclusive).
... keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed
50% extra-condensed 62.
5% condensed 7
5% semi-condensed 87.
5% normal 100% semi-expanded 112.
5% expanded 12
5% extra-expanded 1
50% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of the keyterm values.
... @font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.
5% 112.
5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-weight - CSS: Cascading Style Sheets
syntax /* single values */ font-weight: normal; font-weight: bold; font-weight: 400; /* multiple values */ font-weight: normal bold; font-weight: 300
500; the font-weight property is described using any one of the values listed below.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400,
500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... 4
51) will be translated to one of these values for non-variable fonts.
... common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names: value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal
500 medium 600 semi bold (demi bold) 700 bold 800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping.
Resizing background images with background-size - CSS: Cascading Style Sheets
to do this, we can use a fixed background-size value of 1
50 pixels.
... html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c
5e96634f92.png); background-size: 1
50px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 1
50px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c
5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c
5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Overview of CSS Shapes - CSS: Cascading Style Sheets
i have then applied the shape-outside property to it with a value of circle(
50%).
... basic shapes the value circle(
50%) is an example of a basic shape.
... in this next example, we use generated content to insert an element with height and width of 1
50px.
...we have defined a shape using shape-outside: ellipse(40%
50%); and also used clip-path: ellipse(40%
50%); to clip away the same area that we have used to define the shape.
backface-visibility - CSS: Cascading Style Sheets
r> <th><code>backface-visibility: visible;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <div class="container"> <div class="cube showbf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </div> </div> <p> since all faces are partially transparent, the back faces (2, 4,
5) are visible through the front faces (1, 3, 6).
... </p> </td> <td> <div class="container"> <div class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </div> </div> <p> the three back faces (2, 4,
5) are hidden.
... </p> </td> </tr> </table> css /* classes that will show or hide the three back faces of the "cube" */ .showbf div { backface-visibility: visible; } .hidebf div { backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 1
50px; height: 1
50px; margin: 7
5px 0 0 7
5px; border: none; } .cube { width: 100%; height: 100%; perspective:
550px; perspective-origin: 1
50% 1
50%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transfo...
...rm: translatez(
50px); } .back { background: rgba(0, 2
55, 0, 1); color: black; transform: rotatey(180deg) translatez(
50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(
50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(
50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(
50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(
50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status comment css transforms level 2the definition of 'backfa...
background-position-x - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 2
5%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 2
5%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-posi...
...a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of
50% horizontally centers the background image.
... html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/173
50/3b4892b7e820122ac6dd7678891d4
507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification.
...androidopera for androidsafari on iossamsung internetbackground-position-xchrome full support 1edge full support 12firefox full support 49ie full support 6opera full support 1
5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 49opera android full support 18safari ios ful...
background-position-y - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 2
5%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-p...
...a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of
50% vertically centers the background image.
... html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/173
50/3b4892b7e820122ac6dd7678891d4
507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification.
...androidopera for androidsafari on iossamsung internetbackground-position-ychrome full support 1edge full support 12firefox full support 49ie full support 6opera full support 1
5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 49opera android full support 14safari ios ful...
border-image-slice - CSS: Cascading Style Sheets
zones
5-8 are edge regions.
... syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 4
5; /* top | right | bottom | left */ border-image-slice: 7 12 14
5; /* using the `fill` keyword */ border-image-slice: 10% fill 7 12; /* global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... html <div class="wrapper"> <div></div> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="4
5" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="4
5" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: so...
...lid; border-image: url(https://udn.realityripple.com/samples/
56/bb98f
533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutp...
calc() - CSS: Cascading Style Sheets
for instance, calc(
50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(
50% - 8px) is a percentage followed by a subtraction operator and a length.
... likewise, calc(8px + -
50%) is treated as a length followed by an addition operator and a negative percentage.
...lc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.
5rem + 3vw); } this ensures that text size will scale if the page is zoomed.
...2
5px.
clamp() - CSS: Cascading Style Sheets
the <h1> element's font-size is set as clamp(1.8rem, 2.
5vw, 2.8rem).
... this means that the font-size will be set at 1.8rem, until the computed value of 2.
5vw becomes greater than that of 1.8rem.
... at this point, font-size will be set at 2.
5vw, until 2.
5vw's computed value becomes greater than that of 2.8rem.
...</p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(70% + 100px)); } h1 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.
5vw, 2.8rem); } p { line-height: 1.
5; font-size: max(1.2rem, 1.2vw); } specifications specification status comment css values and units module level 4the definition of 'clamp()' in that specification.
column-count - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolumn-countchrome full support
50 full support
50 full support 1prefixed prefixed implemented with the vendor prefix: -webkit-edge full support 12 full support 12 full support 12prefixed prefixed implemented...
... with the vendor prefix: -webkit-firefox full support
52 full support
52 no support 1.
5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support 1
5prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 9 full support ...
... 9 full support 3prefixed prefixed implemented with the vendor prefix: -webkit-webview android full support
50 full support
50 full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support
50 full support
50 full support 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support
52 full support
52 ...
... 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 9 full support 9 full support 1prefixed prefixed implemented with the vendor prefix: -webkit-samsung internet android full support
5.0 full support
5.0 full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full supportsee implementation notes.see implementation notes.requires a vendor prefix or different name for use.requires a...
env() - CSS: Cascading Style Sheets
syntax /* using the four safe area inset values with no fallback values */ env(safe-area-inset-top); env(safe-area-inset-right); env(safe-area-inset-bottom); env(safe-area-inset-left); /* using them with fallback values */ env(safe-area-inset-top, 20px); env(safe-area-inset-right, 1em); env(safe-area-inset-bottom, 0.
5vh); env(safe-area-inset-left, 1.4rem); values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left the safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectan...
... <p> if the <code>env()</code> function is supported in your browser, this paragraph’s text will have
50px of padding between it and the left border — but not the top, right and bottom.
... this is because the accompanying css is the equivalent of <code>padding: 0 0 0
50px</code>, because, unlike other css properties, user agent property names are case-sensitive.
... </p> p { width: 300px; border: 2px solid red; padding: env(safe-area-inset-top,
50px) env(safe-area-inset-right,
50px) env(safe-area-inset-bottom,
50px) env(safe-area-inset-left,
50px); } example values padding: env(safe-area-inset-bottom,
50px); /* zero for all rectangular user agents */ padding: env(safe-area-inset-bottom,
50px); /*
50px because ua properties are case sensitive */ padding: env(x,
50px 20px); /* as if padding: '
50px 20px' were set because x is not a valid environment variable */ padding: env(x,
50px, 20px); /* ignored because '
50px, 20px' is not a valid padding value and x is not a valid environment variable */ the syntax of the fallback, like that of custom properties, allows commas.
font-size - CSS: Cascading Style Sheets
if the font-size you want is 12px, then you should specify 0.7
5em (because 12/16 = 0.7
5).
... similarly, if you want a font size of 10px, then specify 0.62
5em (10/16 = 0.62
5); for 22px, specify 1.37
5em (22/16).
...take the following html and css: html { font-size: 62.
5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; } <div> <span>outer <span>inner</span> outer</span> </div> the result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 2
5.6px.
... html { font-size: 62.
5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6rem; } then we apply this css to the same html, which looks like this: <span>outer <span>inner</span> outer</span> in this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px).
object-position - CSS: Cascading Style Sheets
syntax /* <position> values */ object-position: center top; object-position: 100px
50px; /* global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element.
... formal definition initial value
50%
50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... img { width: 300px; height: 2
50px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box.
... 10samsung internet android full support 2.0support for three-value syntax of positionchrome no support 31 — 68edge no support 16 — 79firefox no support 36 — 70ie no support noopera no support 19 —
55 no support 19 —
55 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support 10webview android no support 4.4.3 — 68chrome android no support 31 — 68firefox android full su...
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(4
5deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(
50% at 2
5% 2
5%); offset-path: inset(
50%
50%
50%
50%); offset-path: polygon(30% 0%, 70% 0%, 100%
50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segmen...
... <svg xmlns="http://www.w3.org/2000/svg" width="700" height="4
50" viewbox="3
50 0 1400 900"> <title>house and scissors</title> <rect x="
59
5" y="423" width="610" height="377" fill="blue" /> <polygon points="
506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,24
5 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="m900,190 l993,24
5 v201 a11,11 0 0,1 1004,190 h107
5 a11,11 0 ...
...0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 120
5,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1
59
5,789 v434 a11,11 0 0,0
584,423 h
506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" transform="translate(0,0)" fill="green" stroke="black" stroke-width="
5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0...
... 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="
5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> </svg> css .scissorhalf { offset-path: path('m900,190 l993,24
5 v201 a11,11 0 0,1 1004,190 h107
5 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 120
5,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1
59
5,789 v434 a11,11 0 0,0
584,423 h
506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status comment motion path module level 1th...
paint() - CSS: Cascading Style Sheets
in this example, we passed two arguments: whether the background-image on a group of list items is filled or just has a stroke outline, and the width of that outline: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item
5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 1
5</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspain...
...t/intro/worklets/hilite.js'); li { --boxcolor: hsla(
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(1
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(2
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpaint()chrome full support 6
5edge full support 79firefox no support noie no support noopera full support
52safari no support nowebview android full support 6
5c...
...hrome android full support 6
5firefox android no support noopera android full support 47safari ios no support nosamsung internet android full support 9.2legend full support full support no support no support see also paintworklet css painting api using the css painting api <image> canvas ...
matrix3d() - CSS: Cascading Style Sheets
html <section id="example-element" tabindex="0"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.
5s; transform: rotate3d(1, 1, 1, 30deg); margin:
50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,
50,100,0,1.1); } .face { display: flex; ...
... align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(
50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(
50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(
50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(
50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(
50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(
50px); } result matrix translation and scale example another transform3d() example, which implem...
...</div> css html { width: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width:
50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here.
... the matrix below describes the following transformations: translates every x point by -
50px translates every y point by -100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -
50,-100,0,1.1 ); }
50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0,
50,100,0,1.1 ) } } result specifications specification status comment css transforms level 2the definition of 'matrix3d()' in that specification.
vertical-align - CSS: Cascading Style Sheets
ples/16/ed9c61c3b6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.
5em; } p { height: 3em; padding: 0 .
5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> ...
...e discovers exactly what the universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.
5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
...ednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff
5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff
5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff
5b.svg" alt="link" width="32" height="32" /> image with a text-bottom ali...
...gnment.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b4/e1f0faff
5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
Web Audio playbackRate explained - Developer guides
playbackrate basics let's starting by looking at a brief example of playbackrate usage: var myaudio = document.createelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.
5; here we create an <audio> element, and set its src to a file of our choice.
... next we set playbackrate to 0.
5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/0862
5b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/
5b/8cd6da9c6
5.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.
5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid...
... browser support chrome 20+ ✔ firefox 20+ ✔ ie 9+ ✔ safari 6+ ✔ opera 1
5+ ✔ mobile chrome (android) ✖ mobile firefox 24+ ✔ ie mobile ✖ mobile safari 6+ (ios) ✔ opera mobile ✖ notes most browsers stop playing audio outside playbackrate bounds of 0.
5 and 4, leaving the video playing silently.
... for most applications, it's recommended that you limit the range to between 0.
5 and 4.
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h
5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr...
... elements belonging to this category are <h1>, <h2>, <h3>, <h4>, <h
5>, <h6> and <hgroup>.
... note: the <hgroup> element was removed from the w3c html specification prior to html
5 being finalized, but is still part of the whatwg specification and is at least partially supported by most browsers.
... the script-supporting elements are: <script> <template> transparent content model if an element has a transparent content model, then its contents must be structured such that they would be valid html
5, even if the transparent element were removed and replaced by the child elements.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
for the phone number "1-8
55-
555-6
502", this field's value would be "8
55-
555-6
502".
...for the phone number "
555-6
502", use "tel-local-prefix" for "
555" and "tel-local-suffix" for "6
502".
...see bug 6
54072.
... united states a typical home address within the united states looks like this: 432 anywhere st exampleville ca 9
5555 in the united states, the least-specific portion of the address is the state, in this case "ca" (the official us postal service shorthand for "california").
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
<h1>heading level 1</h1> <h2>heading level 2</h2> <h3>heading level 3</h3> <h4>heading level 4</h4> <h
5>heading level
5</h
5> <h6>heading level 6</h6> here is the result of this code: example page the following code shows a few headings with some content under them.
... using the aria-labelledby attribute labeling regions • page structure • w3c wai web accessibility tutorials specifications specification status comment html living standardthe definition of '<h1>, <h2>, <h3>, <h4>, <h
5>, and <h6>' in that specification.
... living standard html
5the definition of '<h1>, <h2>, <h3>, <h4>, <h
5>, and <h6>' in that specification.
... recommendation html 4.01 specificationthe definition of '<h1>, <h2>, <h3>, <h4>, <h
5>, and <h6>' in that specification.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
the <applet> element was removed in gecko
56 and chrome 47.
... example html <applet code="game.class" align="left" archive="game.zip" height="2
50" width="3
50"> <param name="difficulty" value="easy"> <b>sorry, you need java to play this game.</b> </applet> specifications specification status comment html
5.2the definition of '<applet>' in that specification.
... recommendation html
5.1the definition of '<applet>' in that specification.
... recommendation html
5the definition of '<applet>' in that specification.
<area> - HTML: Hypertext Markup Language
note: since html
5, omitting the href attribute is sufficient.
...this attribute is global in html
5.
...(the w3c
5.3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="7
5,7
5,7
5" href="left.html" alt="click to go left"> <area shape="circle" coords="27
5,7
5,7
5" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e
559101b3.png" alt="3
50 x 1
50 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... living standard html
5the definition of '<area>' in that specification.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
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.
...eak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</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; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
... 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 html
5the definition of '<bdi>' in that specification.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
defaults to 1
50.
...stack overflow): browser maximum height maximum width maximum area chrome 32,767 pixels 32,767 pixels 268,43
5,4
56 pixels (i.e., 16,384 x 16,384) firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (i.e., 22,
528 x 20,992) safari 32,767 pixels 32,767 pixels 268,43
5,4
56 pixels (i.e., 16,384 x 16,384) ie 8,192 pixels 8,192 pixels ?
... mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html
5 canvas accessibility in firefox 13 – by steve faulkner best practices for interactive canvas elements specifications specification status comment html living standardthe definition of '<canvas>' in that specification.
... living standard html
5the definition of '<canvas>' in that specification.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
examples images <!-- just an image --> <figure> <img src="https://udn.realityripple.com/samples/6c/9848
5e
5d8a.png" alt="the beautiful mdn logo."> </figure> <!-- image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/9848
5e
5d8a.png" alt="the beautiful mdn logo."> <figcaption>mdn logo</figcaption> </figure> code snippets <figure> <figcaption>get browser details using <code>navigator</code>.</figcaption> <pre> function navigatorexample() { var txt; ...
... living standard html
5.2the definition of '<figure>' in that specification.
... recommendation no changes from html
5.0.
... html
5the definition of '<figure>' in that specification.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
default is 1
50.
...via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 6
5), chromium-based browsers, and safari/ios.
... non-standard attributes mozbrowser see bug 1318
532 for exposing this to webextensions in firefox.
... living standard html
5the definition of '<iframe>' in that specification.
<input type="button"> - HTML: Hypertext Markup Language
<div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="
50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 1
50px; height: 7
5px; padding:
5px; } input[type="color"], input[type="button"] { width: ...
...90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom:
5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-8
5; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update sizepicker output value sizepicker.oninput = function() { output.textcont...
...document.documentelement.scrolltop : document.body.scrolltop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-8
5, sizepicker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status comments html living standardthe definition of '<input type="button">' in that specification.
... living standard html
5the definition of '<input type="button">' in that specification.
<input type="hidden"> - HTML: Hypertext Markup Language
the edit form's html might look a little bit like this: <form> <div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="
5"> this is the content of my excellent blog post.
... </textarea> </div> <div> <button type="submit">update post</button> </div> <input type="hidden" id="postid" name="postid" value="346
57"> </form> let's also add some simple css: html { font-family: sans-serif; } form { width:
500px; } div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding:
5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modi...
... when submitted, the form data sent to the server will look something like this: title=my+excellent+blog+post&content=this+is+the+content+of+my+excellent+blog+post.+i+hope+you+enjoy+it!&postid=346
57 even though the hidden input cannot be seen at all, its data is still submitted.
... living standard initial definition html
5.2the definition of '<input type="hidden">' in that specification.
<input type="month"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } the best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use javascript libraries such as t...
... div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left:
5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left:
5px; } javascript the javascript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <select> follows.
...nction populateyears() { // get the current year as a number var date = new date(); var year = date.getfullyear(); // make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createelement('option'); option.textcontent = year-i; yearselect.appendchild(option); } } note: remember that some years have
53 weeks in them (see weeks per year)!
<keygen> - HTML: Hypertext Markup Language
(note that only a subset of the curves named there may actually be supported in any particular browser.) if the keyparams parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "secp384r1" for high, and the curve named "secp2
56r1" for medium keys.
... publickeyandchallenge ::= sequence { spki subjectpublickeyinfo, challenge ia
5string } signedpublickeyandchallenge ::= sequence { publickeyandchallenge publickeyandchallenge, signaturealgorithm algorithmidentifier, signature bit string } the public key and challenge string are der encoded as publickeyandchallenge, and then digitally signed with the private key to produce a signedpublickeyandchallenge.
...if no challenge string is provided, then it will be encoded as an ia
5string of length zero.
... here is an example form submission as it would be delivered to a cgi program by the http server: commonname=john+doe&email=doe@foo.com&org=foobar+computing+corp.& orgunit=bureau+of+bureaucracy&locality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk
5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%3d specifications specification status comment html
5the definition of 'the <keygen> element' in that specification.
<script>: The Script element - HTML: Hypertext Markup Language
asynchtml
5 for classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.
... nomodule this boolean attribute is set to indicate that the script should not be executed in browsers that support es201
5 modules — in effect, this can be used to serve fallback scripts to older browsers that do not support modular javascript code.
...the html
5 specification urges authors to omit the attribute rather than provide a redundant mime type.
... living standard removed the charset attribute html
5the definition of '<script>' in that specification.
<style>: The Style Information element - HTML: Hypertext Markup Language
this attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3
547.
... <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding:
5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than
500px in width.
... <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding:
5px; border: 1px solid black; } </style> <style media="all and (max-width:
500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content.
... living standard html
5the definition of 'style' in that specification.
<time> - HTML: Hypertext Markup Language
valid datetime values a valid year string 2011 a valid month string 2011-11 a valid date string 2011-11-18 a valid yearless date string 11-18 a valid week string 2011-w47 a valid time string 14:
54 14:
54:39 14:
54:39.929 a valid local date and time string 2011-11-18t14:
54:39.929 2011-11-18 14:
54:39.929 a valid global date and time string 2011-11-18t14:
54:39.929z 2011-11-18t14:
54:39.929-0400 2011-11-18t14:
54:39.929-04:00 2011-11-18 14:
54:39.929z 2011-11-18 14:
54:39.929-0400 2011-11-18 14:
54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the ...
...concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-0
5-1
5t19:00">may 1
5</time>.</p> output specifications specification status comment html living standardthe definition of '<time>' in that specification.
... living standard no change from html
5.1 html
5.1the definition of '<time>' in that specification.
... recommendation no change from html
5 html
5the definition of '<time>' in that specification.
id - HTML: Hypertext Markup Language
consider ticket-186
59 versus r4
5tgfe-freds&$@).
...though this restriction has been lifted in html
5, an id should start with a letter for compatibility.
... living standard no change from latest snapshot, html
5.1 html
5.1the definition of 'id' in that specification.
... recommendation snapshot of html living standard, no change from html
5 html
5the definition of 'id' in that specification.
itemprop - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 19
54)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itemprop name avatar itemprop director james cameron itemprop genre science fiction itemprop trailer ../movie...
... a meter element <div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.
5 max=
5>rated 3.
5/
5</meter> (based on <span itemprop="reviewcount">11</span> customer reviews) </div> </div> similarly, for date- and time-related data, the time element and its datetime attribute can be used.
... an item with one property, "birthday", whose value is a date <div itemscope> i was born on <time itemprop="birthday" datetime="2009-0
5-10">may 10th 2009</time>.
... names examples item itemprop name itemprop value itemprop country ireland itemprop option 2 itemprop https://www.flickr.com/photos/nlireland/699206
5114/ ring of kerry itemprop img https://www.flickr.com/photos/nlireland/699206
5114/ itemprop website flickr itemprop (token) (token) tokens are either strings or url's.
itemtype - HTML: Hypertext Markup Language
ype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme<br></span> <span itemprop="name">executive anvil<br></span> <img itemprop="image" src="https://udn.realityripple.com/samples/61/fa8ee62aba.png" width="
50" height="
50" alt="executive anvil logo" /><br> <span itemprop="description">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... <br> </span> product #: <span itemprop="mpn">92
5872<br></span> <span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.4</span> stars, based on <span itemprop="reviewcount">89 </span> reviews </span><p> <span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $179.99<br> <meta itemprop="pricecurrency" content="usd" /> <span itemprop="price">sale price: $119.99<br></span> (sale ends <time itemprop="pricevaliduntil" datetime="2020-11-0
5">
5 november!</time>)<br> available from: <span itemprop="seller" itemscope itemtype="http://schema.org/organization"> <span itemprop="name">executive objects<br></span> </s...
...</span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/201
5/09/0
5/18/1
5/suitcase-92460
5_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... itemprop mpn 92
5872 itemprop brand [thing] itemprop name acme itemscope itemprop[itemtype] aggregaterating[aggregaterating] itemprop ratingvalue 4.4 itemprop reviewcount 89 itemprop offers [offer] http://schema.org/offer itemprop pricecurrency usd itemprop price 119.99 itemprop pricevaliduntil 2020-11-0
5 itemprop itemcondition http://schema.org/usedcondition itemprop availability http://schema.org/instock itemscope itemprop[itemtype] seller [organization] http://schema.org/organization itemprop name executive objects note: a handy tool for extracting microdata struc...
title - HTML: Hypertext Markup Language
3.2.
5.1.
... the title attribute | w3c html
5.2: 3.
... living standard no change from latest snapshot, html
5.1 html
5.1the definition of 'title' in that specification.
... recommendation snapshot of html living standard, no change from html
5 html
5the definition of 'title' in that specification.
Content negotiation - HTTP
html
5 provides alternatives to content negotiation via, for example, the <source> element.
...for example,
512 megabytes will be reported as 0.
5.
...traditionally, it was set to a different value for each locale for the browser, like iso-88
59-1,utf-8;q=0.7,*;q=0.7 for a western european locale.
... with utf-8 now being well-supported, being the preferred way of encoding characters, and to guarantee better privacy through less configuration-based entropy, browsers omit the accept-charset header: internet explorer 8, safari
5, opera 11, firefox 10 and chrome 27 have abandoned this header.
Accept-Charset - HTTP
in early versions of http/1.1, a default character encoding was defined: iso-88
59-1.
...to guarantee better privacy through less configuration-based entropy, all browsers omit the accept-charset header: internet explorer 8+, safari
5+, opera 11+, firefox 10+ and chrome 27+ no longer send it.
... header type request header forbidden header name yes syntax accept-charset: <charset> // multiple types, weighted with the quality value syntax: accept-charset: utf-8, iso-88
59-1;q=0.
5 directives <charset> a character encoding name, like utf-8 or iso-88
59-1
5.
... examples accept-charset: iso-88
59-1 accept-charset: utf-8, iso-88
59-1;q=0.
5 accept-charset: utf-8, iso-88
59-1;q=0.
5, *;q=0.1 specifications specification title rfc 7231, section
5.3.3: accept-charset hypertext transfer protocol (http/1.1): semantics and context ...
Digest - HTTP
header type response header forbidden header name no syntax digest: <digest-algorithm>=<digest-value> digest: <digest-algorithm>=<digest-value>,<digest-algorithm>=<digest-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc
5843, and include sha-2
56 and sha-
512.
... some of the supported algorithms, including unixsum and md
5 are subject to collisions and are thus not suitable for applications in which collision-resistance is important.
...the choice of digest algorithm also determines the encoding to use: for example sha-2
56 uses base64 encoding.
... examples digest: sha-2
56=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-2
56=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
If-Range - HTTP
it is a string of ascii characters placed between double quotes (like "67
5af34
563dc-tr34") and may be prefixed by w/ to indicate that the weak comparison algorithm should be used.
..."04" or "
59".
..."04" or "
59".
... examples if-range: wed, 21 oct 201
5 07:28:00 gmt specifications specification title rfc 7233, section 3.2: if-range hypertext transfer protocol (http/1.1): range requests ...
Public-Key-Pins-Report-Only - HTTP
header type response header forbidden header name no syntax public-key-pins-report-only: pin-sha2
56="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha2
56="<pin-value>" the quoted string is the base64 encoded subject public key information (spki) fingerprint.
...some browsers might allow other hashing algorithms than sha-2
56 in the future.
... example public-key-pins-report-only: pin-sha2
56="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha2
56="m8hztczm3eluxkcjr2s
5p4hhybnf6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha2
56="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
... the second pin declaration pin-sha2
56="m8hztczm3eluxkcjr2s
5p4hhybnf6lhkmjahkhpgpwe=" also pins the backup key.
Want-Digest - HTTP
header type general header forbidden header name no syntax want-digest: <digest-algorithm> // multiple algorithms, weighted with the quality value syntax: want-digest: <digest-algorithm><q-value>,<digest-algorithm><q-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc
5843, and include sha-2
56 and sha-
512.
... some of the supported algorithms, including unixsum and md
5 are subject to collisions and are thus not suitable for applications in which collision-resistance is important.
... examples want-digest: sha-2
56 want-digest: sha-
512;q=0.3, sha-2
56;q=1, md
5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-2
56;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-2
56=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-2
56=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= the server does not support any of the requested digest algorithms, so responds with a 400 error and includes another want-dige...
...st header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-2
56, sha-
512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
Network Error Logging - HTTP
usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age": 31
5569
52 } an origin considered secure by the browser is required.
... the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 31
5569
52, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.20
5.28.66", "status_code": 400, "type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
...tcp connection was reset tcp.refused the tcp connection was refused by the server tcp.aborted the tcp connection was aborted tcp.address_invalid the ip address is invalid tcp.address_unreachable the ip address is unreachable tcp.failed the tcp connection failed due to reasons not covered by previous errors http.error the user agent successfully received a response, but it had a 4xx or
5xx status code http.protocol.error the connection was aborted due to an http protocol error http.response.invalid response is empty, has a content-length mismatch, has improper encoding, and/or other conditions that prevent user agent from processing the response http.response.redirect_loop the request was aborted due to a detected redirect loop http.failed the connection failed due to err...
Control flow and error handling - JavaScript
important: javascript before ecmascript201
5 (6th edition) does not have block scope!
...(in c or java, the equivalent code would have outputted 1.) since ecmascript201
5, the let and const variable declarations are block-scoped.
... switch (fruittype) { case 'oranges': console.log('oranges are $0.
59 a pound.'); break; case 'apples': console.log('apples are $0.32 a pound.'); break; case 'bananas': console.log('bananas are $0.48 a pound.'); break; case 'cherries': console.log('cherries are $3.00 a pound.'); break; case 'mangoes': console.log('mangoes are $0.
56 a pound.'); break; case 'papayas': console.log('mangoes and papayas are $2.79 a poun...
...sole.log(0); throw 'bogus'; } catch(e) { console.log(1); return true; // this return statement is suspended // until finally block has completed console.log(2); // not reachable } finally { console.log(3); return false; // overwrites the previous "return" console.log(4); // not reachable } // "return false" is executed now console.log(
5); // not reachable } console.log(f()); // 0, 1, 3, false overwriting of return values by the finally block also applies to exceptions thrown or re-thrown inside of the catch block: function f() { try { throw 'bogus'; } catch(e) { console.log('caught inner "bogus"'); throw e; // this throw statement is suspended until // finally block has completed } finally { ...
Regular expression syntax cheatsheet - JavaScript
for example, /\w/ matches "a" in "apple", "
5" in "$
5.28", and "3" in "3d".
...for example, /\w/ or /[^a-za-z0-9_]/ matches "%" in "
50%".
...equivalent to [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u20
5f\u3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u20
5f\u3000\ufeff].
Rest parameters - JavaScript
however, the third argument, manymoreargs, will be an array that contains the 3rd, 4th,
5th, 6th ...
... // using the same function definition from example above myfun("one", "two") // a, one // b, two // manymoreargs, [] argument length since theargs is an array, a count of its elements is given by the length property: function fun1(...theargs) { console.log(theargs.length) } fun1() // 0 fun1(
5) // 1 fun1(
5, 6, 7) // 3 ordinary parameter and rest parameters in the next example, a rest parameter is used to collect all parameters after the first into an array.
...ltiply(multiplier, ...theargs) { return theargs.map(element => { return multiplier * element }) } let arr = multiply(2, 1, 2, 3) console.log(arr) // [2, 4, 6] use with the arguments object array methods can be used on rest parameters, but not on the arguments object: function sortrestargs(...theargs) { let sortedargs = theargs.sort() return sortedargs } console.log(sortrestargs(
5, 3, 7, 1)) // 1, 3,
5, 7 function sortarguments() { let sortedargs = arguments.sort() return sortedargs // this will never happen } console.log(sortarguments(
5, 3, 7, 1)) // throws a typeerror (arguments.sort is not a function) to use array methods on the arguments object, it must be converted to a real array first.
... function sortarguments() { let args = array.from(arguments) let sortedargs = args.sort() return sortedargs } console.log(sortarguments(
5, 3, 7, 1)) // 1, 3,
5, 7 specifications specification ecmascript (ecma-262)the definition of 'function definitions' in that specification.
Array.prototype.copyWithin() - JavaScript
if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-
5.
... math.max(len + relativeend, 0) : math.min(relativeend, len); // step 1
5.
... return o; }, configurable: true, writable: true }); } examples using copywithin [1, 2, 3, 4,
5].copywithin(-2) // [1, 2, 3, 1, 2] [1, 2, 3, 4,
5].copywithin(0, 3) // [4,
5, 3, 4,
5] [1, 2, 3, 4,
5].copywithin(0, 3, 4) // [4, 2, 3, 4,
5] [1, 2, 3, 4,
5].copywithin(-2, -3, -1) // [1, 2, 3, 3, 4] [].copywithin.call({length:
5, 3: 1}, 0, 3) // {0: 1, 3: 1, length:
5} // es201
5 typed arrays are subclasses of array var i32a = new int32array([1, 2, 3, 4,
5]) i32a.copywithin(0, 2) // int32ar...
...ray [3, 4,
5, 4,
5] // on platforms that are not yet es201
5 compliant: [].copywithin.call(new int32array([1, 2, 3, 4,
5]), 0, 3, 4); // int32array [4, 2, 3, 4,
5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.copywithin' in that specification.
Array.prototype.flat() - JavaScript
alternatives reduce and concat const arr = [1, 2, [3, 4]]; // to flat single level array arr.flat(); // is equivalent to arr.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4] // or with decomposition syntax const flattened = arr => [].concat(...arr); reduce + concat + isarray + recursivity const arr = [1, 2, [3, 4, [
5, 6]]]; // to enable deep level flatten use recursion with reduce and concat function flatdeep(arr, d = 1) { return d > 0 ?
...flatdeep(val, d - 1) : val), []) : arr.slice(); }; flatdeep(arr, infinity); // [1, 2, 3, 4,
5, 6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(input) { const stack = [...input]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original input stack.push(...next); } else { res.push(next); } } // reverse to restore input order return res.reverse...
...(); } const arr = [1, 2, [3, 4, [
5, 6]]]; flatten(arr); // [1, 2, 3, 4,
5, 6] use generator function function* flatten(array, depth) { if(depth === undefined) { depth = 1; } for(const item of array) { if(array.isarray(item) && depth > 0) { yield* flatten(item, depth - 1); } else { yield item; } } } const arr = [1, 2, [3, 4, [
5, 6]]]; const flattened = [...flatten(arr, infinity)]; // [1, 2, 3, 4,
5, 6] please do not add polyfills on this article.
... for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24
500 examples flattening nested arrays const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [
5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [
5, 6]] const arr3 = [1, 2, [3, 4, [
5, 6]]]; arr3.flat(2); // [1, 2, 3, 4,
5, 6] const arr4 = [1, 2, [3, 4, [
5, 6, [7, 8, [9, 10]]]]]; arr4.flat(infinity); // [1, 2, 3, 4,
5, 6, 7, 8, 9, 10] flattening and array holes the flat method removes empty slots in arrays: const arr
5 = [1, 2, , 4,
5]; arr
5.flat(); // [1, 2, 4,
5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flat' in that specification.
Array.prototype.indexOf() - JavaScript
polyfill indexof() was added to the ecma-262 standard in the
5th edition; as such it may not be present in all browsers.
...this algorithm matches the one specified in ecma-262,
5th edition, assuming typeerror and math.abs() have their original values.
... // production steps of ecma-262, edition
5, 1
5.4.4.14 // reference: http://es
5.github.io/#x1
5.4.4.14 if (!array.prototype.indexof) { array.prototype.indexof = function(searchelement, fromindex) { "use strict"; var k; // 1.
... if (len === 0) { return -1; } //
5.
Array.prototype.lastIndexOf() - JavaScript
polyfill lastindexof was added to the ecma-262 standard in the
5th edition; as such it may not be present in other implementations of the standard.
...this algorithm is exactly the one specified in ecma-262,
5th edition, assuming object, typeerror, number, math.floor, math.abs, and math.min have their original values.
... // production steps of ecma-262, edition
5, 1
5.4.4.1
5 // reference: http://es
5.github.io/#x1
5.4.4.1
5 if (!array.prototype.lastindexof) { array.prototype.lastindexof = function(searchelement /*, fromindex*/) { 'use strict'; if (this === void 0 || this === null) { throw new typeerror(); } var n, k, t = object(this), len = t.length >>> 0; if (len === 0) { return -1; } n = len - 1; if (arguments.length > 1) { n = number(arguments[1]); if (n != n) { n = 0; } else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { n = (n > 0 || -1) * math.floor(math.abs(n)); } } for (k = n >= 0 ?
... var numbers = [2,
5, 9, 2]; numbers.lastindexof(2); // 3 numbers.lastindexof(7); // -1 numbers.lastindexof(2, 3); // 3 numbers.lastindexof(2, 2); // 0 numbers.lastindexof(2, -2); // 0 numbers.lastindexof(2, -1); // 3 finding all the occurrences of an element the following example uses lastindexof to find all the indices of an element in a given array, using push to add them to another array as they are ...
Array.prototype.length - JavaScript
elista = new array(4294967296); //2 to the 32nd power = 4294967296 var namelistc = new array(-100) //negative sign console.log(namelista.length); //rangeerror: invalid array length console.log(namelistc.length); //rangeerror: invalid array length var namelistb = []; namelistb.length = math.pow(2,32)-1; //set array length less than 2 to the 32nd power console.log(namelistb.length); //429496729
5 you can set the length property to truncate an array at any time.
... const arr = [1, 2]; console.log(arr); // [ 1, 2 ] arr.length =
5; // set array length to
5 while currently 2.
... var numbers = [1, 2, 3, 4,
5]; var length = numbers.length; for (var i = 0; i < length; i++) { numbers[i] *= 2; } // numbers is now [2, 4, 6, 8, 10] shortening an array the following example shortens the array numbers to a length of 3 if the current length is greater than 3.
... var numbers = [1, 2, 3, 4,
5]; if (numbers.length > 3) { numbers.length = 3; } console.log(numbers); // [1, 2, 3] console.log(numbers.length); // 3 create empty array of fixed length var numbers = []; numbers.length = 3; console.log(numbers); // [undefined, undefined, undefined] specifications specification ecmascript (ecma-262)the definition of 'array.length' in that specification.
Array.prototype.map() - JavaScript
polyfill map was added to the ecma-262 standard in the
5th edition.
...this algorithm is exactly the one specified in ecma-262,
5th edition, assuming object, typeerror, and array have their original values and that callback.call evaluates to the original value of function.prototype.call.
... // production steps of ecma-262, edition
5, 1
5.4.4.19 // reference: http://es
5.github.io/#x1
5.4.4.19 if (!array.prototype.map) { array.prototype.map = function(callback/*, thisarg*/) { var t, a, k; if (this == null) { throw new typeerror('this is null or not defined'); } // 1.
... // see: http://es
5.github.com/#x9.11 if (typeof callback !== 'function') { throw new typeerror(callback + ' is not a function'); } //
5.
Array - JavaScript
let years = [19
50, 1960, 1970, 1980, 1990, 2000, 2010] console.log(years.0) // a syntax error console.log(years[0]) // works properly renderer.3d.settexture(model, 'character.png') // a syntax error renderer['3d'].settexture(model, 'character.png') // works properly in the 3d example, '3d' had to be quoted (because it begins with a digit).
... const fruits = [] fruits.push('banana', 'apple', 'peach') console.log(fruits.length) // 3 when setting a property on a javascript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's length property accordingly: fruits[
5] = 'mango' console.log(fruits[
5]) // 'mango' console.log(object.keys(fruits)) // ['0', '1', '2', '
5'] console.log(fruits.length) // 6 increasing the length.
... fruits.length = 10 console.log(fruits) // ['banana', 'apple', 'peach', empty x 2, 'mango', empty x 4] console.log(object.keys(fruits)) // ['0', '1', '2', '
5'] console.log(fruits.length) // 10 console.log(fruits[8]) // undefined decreasing the length property does, however, delete elements.
..., , , , , p,p,p,p,p,p,p,p r,n,b,q,k,b,n,r r,n,b,q,k,b,n,r p,p,p,p,p,p,p,p , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r using an array to tabulate a set of values values = [] for (let x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) } console.table(values) results in // the first column is the index 0 1 0 1 2 2 2 4 8 3 8 18 4 16 32
5 32
50 6 64 72 7 128 98 8 2
56 128 9
512 162 specifications specification initial publication ecmascript (ecma-262)the definition of 'array' in that specification.
BigInt.prototype.toLocaleString() - JavaScript
var bigint = 3
500n; bigint.tolocalestring(); // displays "3,
500" if in u.s.
...in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var bigint = 1234
567891234
56789n; // german uses period for thousands console.log(bigint.tolocalestring('de-de')); // → 123.4
56.789.123.4
56.789 // arabic in most arabic speaking countries uses eastern arabic digits console.log(bigint.tolocalestring('ar-eg')); // → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩ // india uses thousands/lakh/crore separators console.log(bigint.tolocalestring('en-in')); // → 1,23,4
5,67,89,12,34,
56,789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.4
56.789.123.4
56.789 using options the results provided by tolocalestring can be customized using the options argument: var bigint = 1234
567891234
56789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.4
56.789.123.4
56.789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,4
56,78...
...9,123,4
56,789 // limit to three significant digits console.log(bigint.tolocalestring('en-in', { maximumsignificantdigits: 3 })); // → 1,23,00,00,00,00,00,00,000 specifications specification ecmascript (ecma-262)the definition of 'bigint.prototype.tolocalestring()' in that specification.
Date.UTC() - JavaScript
minute optional an integer between 0 and
59 representing the minutes.
... second optional an integer between 0 and
59 representing the seconds.
...for example, 9
5 is converted to the year 199
5.
...for example, if 1
5 is used for month, the year will be incremented by 1 (year + 1) and 3 will be used for the month.
Date.prototype.getDay() - JavaScript
examples using getday() the second statement below assigns the value 1 to weekday, based on the value of the date object xmas9
5.
... december 2
5, 199
5, is a monday.
... var xmas9
5 = new date('december 2
5, 199
5 23:1
5:30'); var weekday = xmas9
5.getday(); console.log(weekday); // 1 note: if needed, the full name of a day ("monday" for example) can be obtained by using intl.datetimeformat with an options parameter.
... using this method, the internationalization is made easier: var options = { weekday: 'long'}; console.log(new intl.datetimeformat('en-us', options).format(xmas9
5)); // monday console.log(new intl.datetimeformat('de-de', options).format(xmas9
5)); // montag specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getday' in that specification.
Date.prototype.getTime() - JavaScript
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 new date().gettime(); // 1
519211809934 // 1
519211810362 // 1
519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled new date().gettime(); // 1
5191298
53
500 // 1
5191298
58900 // 1
519129864400 // ...
... // since month is zero based, birthday will be january 10, 199
5 var birthday = new date(1994, 12, 10); var copy = new date(); copy.settime(birthday.gettime()); measuring execution time subtracting two subsequent gettime() calls on newly generated date objects, give the time span between these two calls.
Date.now() - JavaScript
polyfill this method was standardized in ecma-262
5th edition.
... in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 date.now() // 1
519211809934 // 1
519211810362 // 1
519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled date.now(); // 1
5191298
53
500 // 1
5191298
58900 // 1
519129864400 // ...
Date.prototype.setHours() - JavaScript
ideally, an integer between 0 and
59, representing the minutes.
... if a value greater than
59 is provided, the datetime will be incremented by the extra minutes.
...ideally, an integer between 0 and
59, representing the seconds.
... if a value greater than
59 is provided, the datetime will be incremented by the extra seconds.
Intl.NumberFormat.prototype.formatToParts() - JavaScript
the structure the formattoparts() method returns, looks like this: [ { type: "integer", value: "3" }, { type: "group", value: "." }, { type: "integer", value: "
500" } ] possible types are the following: currency the currency string, such as the symbols "$" and "€" or the name "dollar", "euro" depending on how currencydisplay is specified.
... examples comparing format and formattoparts numberformat outputs localized, opaque strings that cannot be manipulated directly: var number = 3
500; var formatter = new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }); formatter.format(number); // "3.
500,00 €" however, in many user interfaces there is a desire to customize the formatting of this string.
... the formattoparts method enables locale-aware formatting of strings produced by numberformat formatters by providing you the string in parts: formatter.formattoparts(number); // return value: [ { type: "integer", value: "3" }, { type: "group", value: "." }, { type: "integer", value: "
500" }, { type: "decimal", value: "," }, { type: "fraction", value: "00" }, { type: "literal", value: " " }, { type: "currency", value: "€" } ] now the information is available separately and it can be formatted and concatenated again in a customized way.
... console.log(numberstring); // "3.
500,00 <strong>€</strong>" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.formattoparts' in that specification.
Intl.NumberFormat - JavaScript
var number = 3
500; console.log(new intl.numberformat().format(number)); // → '3,
500' if in us english locale using locales this example shows some of the variations in localized number formats.
... in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var number = 1234
56.789; // german uses comma as decimal separator and period for thousands console.log(new intl.numberformat('de-de').format(number)); // → 123.4
56,789 // arabic in most arabic speaking countries uses real arabic digits console.log(new intl.numberformat('ar-eg').format(number)); // → ١٢٣٤٥٦٫٧٨٩ // india uses thousands/lakh/crore separators console.log(new intl.numberformat('en-in').format(number)); // → 1,23,4
56.789 // the nu extension key requests a numbering system, e.g.
... chinese decimal console.log(new intl.numberformat('zh-hans-cn-u-nu-hanidec').format(number)); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(new intl.numberformat(['ban', 'id']).format(number)); // → 123.4
56,789 using options the results can be customized using the options argument: var number = 1234
56.789; // request a currency format console.log(new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }).format(number)); // → 123.4
56,79 € // the japanese yen doesn't use a minor unit console.log(new intl.numberformat('ja-jp', { style: 'currency', currency: 'jpy' }).format(number)); // → ¥123,4
57 // limit to three significant digi...
...ts console.log(new intl.numberformat('en-in', { maximumsignificantdigits: 3 }).format(number)); // → 1,23,000 using style and unit console.log(new intl.numberformat("pt-pt", { style: 'unit', unit: "mile-per-hour" }).format(
50)); // →
50 mi/h console.log((16).tolocalestring('en-gb', { style: "unit", unit: "liter", unitdisplay: "long" })); // → 16 litres specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat' in that specification.
Map - JavaScript
note: as of es
5, this can be bypassed by using object.create(null), but this is seldom done.
... note: since ecmascript 201
5, objects do preserve creation order for string and symbol keys.
... in javascript engines that comply with the ecmascript 201
5 spec, iterating over an object with only string keys will yield the keys in order of insertion.
... let contacts = new map() contacts.set('jessie', {phone: "213-
555-1234", address: "123 n 1st ave"}) contacts.has('jessie') // true contacts.get('hilary') // undefined contacts.set('hilary', {phone: "617-
555-4321", address: "321 s 2nd st"}) contacts.get('jessie') // {phone: "213-
555-1234", address: "123 n 1st ave"} contacts.delete('raymond') // false contacts.delete('jessie') // true console.log(contacts.size) // 1 constructor map() creates a new map ob...
Number.MAX_SAFE_INTEGER - JavaScript
the number.max_safe_integer constant represents the maximum safe integer in javascript (2
53 - 1).
... property attributes of number.max_safe_integer writable no enumerable no configurable no description the max_safe_integer constant has a value of 90071992
54740991 (9,007,199,2
54,740,991 or ~9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 7
54 and can only safely represent numbers between -(2
53 - 1) and 2
53 - 1.
... polyfill if (!number.max_safe_integer) { number.max_safe_integer = 90071992
54740991; // math.pow(2,
53) - 1; } examples return value of max_safe_integer number.max_safe_integer; // 90071992
54740991 numbers higher than safe integer this returns 2 because in floating points, the value is actually the decimal trailing "1" except for in subnormal precision cases such as zero.
Number.MIN_SAFE_INTEGER - JavaScript
the number.min_safe_integer constant represents the minimum safe integer in javascript (-(2
53 - 1)).
... property attributes of number.min_safe_integer writable no enumerable no configurable no description the min_safe_integer constant has a value of -90071992
54740991 (-9,007,199,2
54,740,991 or about -9 quadrillion).
... the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 7
54 and can only safely represent numbers between -(2
53 - 1) and 2
53 - 1.
... examples using min_safe_integer number.min_safe_integer // -90071992
54740991 -(math.pow(2,
53) - 1) // -90071992
54740991 specifications specification ecmascript (ecma-262)the definition of 'number.min_safe_integer' in that specification.
Object.defineProperty() - JavaScript
ineproperty with a data property descriptor object.defineproperty(o, 'a', { value: 37, writable: true, enumerable: true, configurable: true }); // 'a' property exists in the o object and its value is 37 // example of an object property added // with defineproperty with an accessor property descriptor var bvalue = 38; object.defineproperty(o, 'b', { // using shorthand method names (es201
5 feature).
... var o = {}; // creates a new object object.defineproperty(o, 'a', { value: 37, writable: false }); console.log(o.a); // logs 37 o.a = 2
5; // no error thrown // (it would throw in strict mode, // even if the value had been the same) console.log(o.a); // logs 37.
... var o = {}; object.defineproperty(o, 'a', { value: 1, enumerable: true }); object.defineproperty(o, 'b', { value: 2, enumerable: false }); object.defineproperty(o, 'c', { value: 3 }); // enumerable defaults to false o.d = 4; // enumerable defaults to true // when creating a property by setting it object.defineproperty(o, symbol.for('e'), { value:
5, enumerable: true }); object.defineproperty(o, symbol.for('f'), { value: 6, enumerable: false }); for (var i in o) { console.log(i); } // logs 'a' and 'd' (in undefined order) object.keys(o); // ['a', 'd'] o.propertyisenumerable('a'); // true o.propertyisenumerable('b'); // false o.propertyisenumerable('c'); // false o.propertyisenumerable('d'); // true o.propertyisenumerable(symbol.fo...
...r('e')); // true o.propertyisenumerable(symbol.for('f')); // false var p = { ...o } p.a // 1 p.b // undefined p.c // undefined p.d // 4 p[symbol.for('e')] //
5 p[symbol.for('f')] // undefined configurable attribute the configurable attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than value and writable) can be changed.
Object.getOwnPropertyNames() - JavaScript
in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be coerced to an object.
... object.getownpropertynames('foo'); // typeerror: "foo" is not an object (es
5 code) object.getownpropertynames('foo'); // ["0", "1", "2", "length"] (es201
5 code) examples using object.getownpropertynames() var arr = ['a', 'b', 'c']; console.log(object.getownpropertynames(arr).sort()); // .sort() is an array method.
... items on the prototype chain are not listed: function parentclass() {} parentclass.prototype.inheritedmethod = function() {}; function childclass() { this.prop =
5; this.method = function() {}; } childclass.prototype = new parentclass; childclass.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() function to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtain...
Object.preventExtensions() - JavaScript
var nonextensible = { removable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 867
5309 }); // throws a typeerror // in strict mode, attempting to add new properties // to a non-extensible object throws a typeerror.
...fixed.__proto__ = { oh: 'hai' }; non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it was a non-extensible ordinary object, simply return it.
... object.preventextensions(1); // typeerror: 1 is not an object (es
5 code) object.preventextensions(1); // 1 (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.preventextensions' in that specification.
String.prototype.slice() - JavaScript
str2 = str1.slice(1, 8), str3 = str1.slice(4, -2), str4 = str1.slice(12), str
5 = str1.slice(30); console.log(str2) // output: he morn console.log(str3) // output: morning is upon u console.log(str4) // output: is upon us.
... console.log(str
5) // output: "" using slice() with negative indexes the following example uses slice() with negative indexes.
... console.log(str.slice(11, -7)) // => " is u" these arguments count backwards from the end by
5 to find the start index and backwards from the end by 1 to find the end index.
... console.log(str.slice(-
5, -1)) // => "n us" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.slice' in that specification.
String - JavaScript
the first is the charat() method: return 'cat'.charat(1) // returns "a" the other way (introduced in ecmascript
5) is to treat the string as an array-like object, where individual characters correspond to a numerical index: return 'cat'[1] // returns "a" when using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed.
... console.log(eval(s2.valueof())) // returns the number 4 escape notation special characters can be encoded using escape notation: code output \xxx (where xxx is 1–3 octal digits; range of 0–377) iso-88
59-1 character / unicode code point between u+0000 and u+00ff \' single quote \" double quote \\ backslash \n new line \r carriage return \v vertical tab \t tab \b backspace \f form feed \uxxxx (where xxxx is 4 hex digits; range of 0x0000–0xffff) utf-16 code unit / unicode code ...
...\u{xxxxxx} (where x…xxxxxx is 1–6 hex digits; range of 0x0–0x10ffff) utf-32 code unit / unicode code point between u+0000 and u+10ffff \xxx (where xx is 2 hex digits; range of 0x00–0xff) iso-88
59-1 character / unicode code point between u+0000 and u+00ff long literal strings sometimes, your code will include strings which are very long.
...part of the ecmascript
5 standard.
WebAssembly.CompileError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0compileerror() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled ...
...in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.LinkError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0linkerror() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in ...
...the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
WebAssembly.RuntimeError - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0runtimeerror() constructorchrome full support ...
...
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44safari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled ...
...in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support full support no support no supportsee implementation notes.see implementation notes.
isNaN() - JavaScript
note, coercion inside the isnan function has interesting rules; you may alternatively want to use number.isnan(), as defined in ecmascript 201
5.
...hat when coerced to numeric type result in a valid non-nan numeric value (notably the empty string and boolean primitives, which when coerced give numeric values zero or one), the "false" returned value may be unexpected; the empty string, for example, is surely "not a number." the confusion stems from the fact that the term, "not a number", has a specific meaning for numbers represented as ieee-7
54 floating-point values.
... the function should be interpreted as answering the question, "is this value, when coerced to a numeric value, an ieee-7
54 'not a number' value?" ecmascript 201
5 contains the number.isnan() function.
... = number(value); return n !== n; }; examples isnan(nan); // true isnan(undefined); // true isnan({}); // true isnan(true); // false isnan(null); // false isnan(37); // false // strings isnan('37'); // false: "37" is converted to the number 37 which is not nan isnan('37.37'); // false: "37.37" is converted to the number 37.37 which is not nan isnan("37,
5"); // true isnan('123abc'); // true: parseint("123abc") is 123 but number("123abc") is nan isnan(''); // false: the empty string is converted to 0 which is not nan isnan(' '); // false: a string with spaces is converted to 0 which is not nan // dates isnan(new date()); // false isnan(new date().tostring()); // true // this is a false positive and the reason ...
var - JavaScript
foo = 'f' // in non-strict mode, assumes you want to create a property named `foo` on the global object globalthis.hasownproperty('foo') // true in ecmascript
5, this behavior was changed for strict mode.
... z =
5; // creates a new global variable z, and assigns it a value of
5.
... console.log(x, y, z); // 3 4
5 } a(); // also calls b.
... console.log(x, z); // 3
5 console.log(typeof y); // "undefined", as y is local to function a specifications specification ecmascript (ecma-262)the definition of 'variable statement' in that specification.
with - JavaScript
using with is not recommended, and is forbidden in ecmascript
5 strict mode.
...consider this example: function f(foo, values) { with (foo) { console.log(values); } } if you call f([1,2,3], obj) in an ecmascript
5 environment, then the values reference inside the with statement will resolve to obj.
... however, ecmascript 201
5 introduces a values property on array.prototype (so that it will be available on every array).
... so, in a javascript environment that supports ecmascript 201
5, the values reference inside the with statement could resolve to [1,2,3].values.
Transitioning to strict mode - JavaScript
ecmascript
5 introduced strict mode which is now implemented in all major browsers (including ie10).
... differences from non-strict to strict syntax errors when adding 'use strict';, the following cases will throw a syntaxerror before the script is executing: octal syntax var n = 023; with statement using delete on a variable name delete myvariable; using eval or arguments as variable or function argument name using one of the newly reserved keywords (in prevision for ecmascript 201
5): implements, interface, let, package, private, protected, public, static, and yield declaring function in blocks if (a < b) { function f() {} } obvious errors declaring twice the same name for a property name in an object literal {a: 1, b: 3, a: 7} this is no longer the case in ecmascript 201
5 (bug 1041128).
... setting a value to an undeclared variable function f(x) { 'use strict'; var a = 12; b = a + x * 3
5; // error!
...if you really want to set a value to the global object, pass it as an argument and explicitly assign it as a property: var global = this; // in the top-level context, "this" always // refers to the global object function f(x) { 'use strict'; var a = 12; global.b = a + x * 3
5; } f(42); trying to delete a non-configurable property 'use strict'; delete object.prototype; // error!
Trailing commas - JavaScript
javascript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ecmascript
5) and most recently (ecmascript 2017) to function parameters.
... var arr = [1, 2, 3,,,]; arr.length; //
5 objects starting with ecmascript
5, trailing commas in object literals are legal as well: var object = { foo: "bar", baz: "qwerty", age: 42, }; trailing commas in functions ecmascript 2017 allows trailing commas in function parameter lists.
... // array destructuring with trailing comma [a, b,] = [1, 2]; // object destructuring with trailing comma var o = { p: 42, q: true, }; var {p, q,} = o; again, when using a rest element, a syntaxerror will be thrown: var [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma trailing commas in json trailing commas in objects were only introduced in ecmascript
5.
... as json is based on javascript's syntax prior to es
5, trailing commas are not allowed in json.
JavaScript typed arrays - JavaScript
it clamps the values between 0 and 2
55.
... type value range size in bytes description web idl type equivalent c type int8array -128 to 127 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 2
55 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 2
55 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32768 to 32767 2 16-bit two's complement signed integer short int16_t uint16array 0 to 6
553
5 2 16-bit unsigned integer unsigned short uint16_t int32array -2147483648 to 2147483647 4 32-bit two's complement signed integer long int32_t uint32array 0 to 429496729
5 ...
... 4 32-bit unsigned integer unsigned long uint32_t float32array 1.2×10-38 to 3.4×1038 4 32-bit ieee floating point number (7 significant digits e.g., 1.1234
56) unrestricted float float float64array
5.0×10-324 to 1.8×10308 8 64-bit ieee floating point number (16 significant digits e.g., 1.123...1
5) unrestricted double double bigint64array -263 to 263-1 8 64-bit two's complement signed integer bigint int64_t (signed long long) biguint64array 0 to 264-1 8 64-bit unsigned integer bigint uint64_t (unsigned long long) dataview the dataview is a low-level interface that provides a getter/setter api to read and write arbitrary data to the buffer.
... imagedata.data is a uint8clampedarray representing a one-dimensional array containing the data in the rgba order, with integer values between 0 and 2
55 inclusive.
Populating the page: how browsers work - Web Performance
at 2048 x 1
536, the ipad has over 3,14
5,000 pixels to be painted to the screen.
... time to interactive (tti) is the measurement of how long it took from that first request which led to the dns lookup and ssl connection to when the page is interactive -- interactive being the point in time after the first contentful paint when the page responds to user interactions within
50ms.
... if the main thread is occupied parsing, compiling, and executing javascript, it is not available and therefore not able to responsd to user interactions in a timely (less than
50ms) fashion.
...avoid occupying the main thread, as demonstrated in this webpagetest example: in this example, the dom content load process took over 1.
5 seconds, and the main thread was fully occupied that entire time, unresponsive to click events or screen taps.
Mobile first - Progressive web apps (PWAs)
i had to make sure both of these were not direct children of the <article>, otherwise the following would not work: #bottom, #top { font-size: 0.8em; position:absolute; right: 1em; text-decoration: none; } #top { color: white; top: 0.
5em; } #bottom { bottom: 0.
5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px.
... to create something more suitable for desktop, i put in the following media queries: @media (min-width: 480px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d
5; border-bottom: none; display: inline-block; padding: 0
5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(2
55,2
55,2
55,0.3); ...
...modernizr is a good choice as it not only includes a feature detect for just about everything (css, html
5, some other bits besides), it is also fairly reliable, and you can create your own custom version with only the feature detects you need in it, using the modernizr download builder.
... } google searches and mobile preference since april 21, 201
5, google's algorithm gives pages that display well on mobile devices priority over those that do not on searches made from mobile devices.
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="1
50" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <...
...ange"/> </lineargradient> <lineargradient id="repeatgradient" spreadmethod="repeat" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="
50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg> result notice that the middle third of each gradient is the same.
... examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="7
5%" cy="2
5%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" cx="7
5%" cy="2
5%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialrepeatgradie...
...nt" spreadmethod="repeat" cx="7
5%" cy="2
5%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> </defs> <rect fill="url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="url(#radialrepeatgradient)" x="230" y="10" width="100" height="100"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'spreadmethod for <radialgradient>' in that specification.
stroke-miterlimit - SVG: Scalable Vector Graphics
has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.
5 ,-3 l3.
5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.7
5,-3 l0.7
5,3 m2,0 l0.
5 ,-3 l0.
5 ,3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2" d="m1,19 l7 ,-3 l7 ,3 m2, 0 l3.
5 ,-3 l3.
5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.7
5,-3 l0.7
5,3 ...
... m2, 0 l0.
5 ,-3 l0.
5 ,3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="m1,29 l7 ,-3 l7 ,3 m2, 0 l3.
5 ,-3 l3.
5 ,3 m2, 0 l2 ,-3 l2 ,3 m2, 0 l0.7
5,-3 l0.7
5,3 m2, 0 l0.
5 ,-3 l0.
5 ,3" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path stroke="pink" fill="none" stroke-width="0.0
5" d="m1, 9 l7,-3 l7,3 m2,0 l3.
5,-3 l3.
5,3 m2,0 l2,-3 l2,3 m2,0 l0.7
5,-3 l0.7
5,3 m2,0 l0.
5,-3 l0.
5,3 m1,19 l7,-3 l7,3 m2,0 l3.
5,-3 l3.
5,3 m2,0 l2,-3 l2,3 m2,0 l0.7
5,-3 l0.7
5,3 m2,0 l0.
5,-3 l0.
5,3 m1,29 l7,-3 l7,3 m2,0 l3.
5,-3 l3.
5,3 m2,0 l2,-3 l2,3 m2,0 l0.7
5,-3 l0.7
5,3 m2,0 l...
...0.
5,-3 l0.
5,3" /> </svg> when two line segments meet at a sharp angle and miter joins have been specified for stroke-linejoin, it is possible for the miter to extend far beyond the thickness of the line stroking the path.
... the angle (theta) between the segments in user space by the formula: stroke-miterlimit = miterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.
5 degrees.
y1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="
5" stroke="red" /> <line x1="1" x2="9" y1="
5" y2="
5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="
5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="
5" stroke="red" /> <line x1="1" x2="9" y1="
5" y2="
5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="
5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
... --> <lineargradient y1="0%" id="g0"> <stop offset="
5%" stop-color="black" /> <stop offset="
50%" stop-color="red" /> <stop offset="9
5%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at the bottom left corner of the bounding box of the shape it is applied to.
... --> <lineargradient y1="100%" id="g1"> <stop offset="
5%" stop-color="black" /> <stop offset="
50%" stop-color="red" /> <stop offset="9
5%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y1' in that specification.
y2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="
5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="
5" y2="
5" stroke="green" /> <line x1="1" x2="9" y1="
5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="
5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="
5" y2="
5" stroke="green" /> <line x1="1" x2="9" y1="
5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
... --> <lineargradient y2="0%" id="g0"> <stop offset="
5%" stop-color="black" /> <stop offset="
50%" stop-color="red" /> <stop offset="9
5%" stop-color="black" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector end at the bottom right corner of the bounding box of the shape it is applied to.
... --> <lineargradient y2="100%" id="g1"> <stop offset="
5%" stop-color="black" /> <stop offset="
50%" stop-color="red" /> <stop offset="9
5%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'y2' in that specification.
Content type - SVG: Scalable Vector Graphics
metric ::= "h" | "min" | "s" | "ms" hours ::= digit+; any positive number minutes ::= 2digit; range from 00 to
59 seconds ::= 2digit; range from 00 to
59 fraction ::= digit+ timecount ::= digit+ 2digit ::= digit digit digit ::= [0-9] for timecount values, the default metric suffix is "s" (for seconds).
... the following are examples of legal clock values: full clock values: 02:30:03 = 2 hours, 30 minutes and 3 seconds
50:00:10.2
5 =
50 hours, 10 seconds and 2
50 milliseconds partial clock value: 02:33 = 2 minutes and 33 seconds 00:10.
5 = 10.
5 seconds = 10 seconds and
500 milliseconds timecount values: 3.2h = 3.2 hours = 3 hours and 12 minutes 4
5min = 4
5 minutes 30s = 30 seconds
5ms =
5 milliseconds 12.467 = 12 seconds and 467 milliseconds fractional values are just (base 10) floating point definitions of seconds.
... thus: 00.
5s =
500 milliseconds 00:00.00
5 =
5 milliseconds color <color> the basic type <color> is a css2 compatible specification for a color in the srgb color space.
...the integer value 2
55 corresponds to 100%, and to f or ff in the hexadecimal notation: rgb(2
55,2
55,2
55) = rgb(100%,100%,100%) = #fff.
Linking - SVG: Scalable Vector Graphics
the target attribute on the svg <a> element doesn't work in mozilla firefox 1.
5.
... when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="
50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked.
... however, target does not work with mozilla's implementation of the svg <a> element in firefox 1.
5.
...you would now have page2.html embedded inside a 100x
50 pixel frame inside page1.html).
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="1
50" cy="100" r="80" fill="green" /> <text x="1
50" y="12
5" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
... a green circle <circle> with a radius of 80px is drawn atop the center of the red rectangle (center of circle offset 1
50px to the right, and 100px downward from the top left corner).
... if the html is html
5, and the browser is a conforming html
5 browser, the svg can also be directly embedded.
... however, there may be syntax changes necessary to conform to the html
5 specification.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
actually, in mozilla firefox 1.
5, the media type for files embedded into html using the html <embed> and <object> tags is (unfortunately) obtained in the same way as it's obtained for local files instead of using the http headers as it should.
...it's adapted from jp fiset's comment in bug 303
581 which in turn was adapted from jeff schiller's comment in bug 303
581.
...
5.
...related bugs: bug 332690 and bug 303
581.
Subresource Integrity - Web security
an integrity value begins with at least one string, with each string including a prefix indicating a particular hash algorithm (currently the allowed prefixes are sha2
56, sha384, and sha
512), followed by a dash, and ending with the actual base64-encoded hash.
... example integrity string with base64-encoded sha384 hash: sha384-oqvuafxrkap7fdgccy
5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc so oqvuafxrkap7fdgccy
5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is the "hash" part, and the prefix sha384 indicates that it's a sha384 hash.
...therefore, the resource must be served with an access-control-allow-origin header that allows the resource to be shared with the requesting origin; for example: access-control-allow-origin: * examples in the following examples, assume that oqvuafxrkap7fdgccy
5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is already known to be the expected sha-384 hash (digest) of a particular script example-framework.js, and there’s a copy of the script hosted at https://example.com/example-framework.js.
... <script src="https://example.com/example-framework.js" integrity="sha384-oqvuafxrkap7fdgccy
5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc" crossorigin="anonymous"></script> note: for more details on the purpose of the crossorigin attribute, see cors settings attributes.
xml:base - XML: Extensible Markup Language
support was removed from blink (chrome and opera) in 201
5: chromium bug 3418
54 blink-dev mailing list post and from firefox 66 in bug 903372.
... <html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -
5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-
5l10,0l0,
5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </svg> </body> </html> imagine a svg with font references.
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/1
506684
56
53629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #16161
5; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypass cors issue while not changing the base uri for your entire document.
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c
5cf7c
5b2e424c0061d2 specifications specification status comment xml base (second edition) recommendation ...
WebAssembly Concepts - WebAssembly
in fact, the basic unit of webassembly code is called a module and webassembly modules are symmetric in many ways to es201
5 modules.
...a module declares imports and exports just like an es201
5module.
...an instance is like an es201
5 module that has been loaded into a particular global with a particular set of imports.
... in the future, webassembly modules will be loadable just like es201
5 modules (using <script type='module'>), meaning that javascript will be able to fetch, compile, and import a webassembly module as easily as an es201
5 module.
Modules - Archive of obsolete content
this becomes a problem when two scripts try to define the same property: // index.js: loadscript("www.foo.com/a.js"); loadscript("www.foo.com/b.js"); foo; // =>
5 // a.js: foo = 3; // b.js: foo =
5; in the above example, the value of foo depends on the order in which the subscripts are loaded: there is no way to access the property foo defined by "a.js", since it is overwritten by "b.js".
...using this new version of loadscript, we can now rewrite our earlier example as follows: // index.js: let a = loadscript("www.foo.com/a.js"); let b = loadscript("www.foo.com/b.js"); a.foo // => 3 b.foo; // =>
5 // a.js: foo = 3; // b.js: foo =
5; importing names in addition to exporting properties from the script being loaded to the loading script, we can also import properties from the loading script to the script being loaded: function loadscript(url, imports) { let global = { imports: imports, exports: {} }; loader.loadsubscript(url, global); return global.exports...
...; } among other things, this allows us to import loadscript to scripts being loaded, allowing them to load further scripts: // index.js: loadscript("www.foo.com/a.js", { loadscript: loadscript }).foo; =>
5 // a.js: exports.foo = imports.loadscript("www.foo.com/b.js").bar; // b.js: exports.bar =
5; sandboxes and compartments the loadscript function as defined in the previous section still has some serious shortcomings.
simple-prefs - Archive of obsolete content
{ "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" } color displayed as a colorpicker and stores a string in the #1234
56 format.
... { "type": "color", "name": "highlightcolor", "value": "#6a
5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.
...>.<preference-name> for example, if you had a simple-pref named "somepreference" then you could get its value like so: require('sdk/preferences/service').get(['extensions', require('sdk/self').id, 'somepreference'].join('.')) this would give you the same value as: require('sdk/simple-prefs').prefs['somepreference'] the ability to change the default preferences branch is new in add-on sdk 1.1
5.
simple-storage - Archive of obsolete content
to store a value, just assign it to a property on storage: var ss = require("sdk/simple-storage"); ss.storage.myarray = [1, 1, 2, 3,
5, 8, 13]; ss.storage.myboolean = true; ss.storage.mynull = null; ss.storage.mynumber = 3.1337; ss.storage.myobject = { a: "foo", b: { c: true }, d: null }; ss.storage.mystring = "o frabjous day!"; you can store array, boolean, number, object, null, and string values.
...currently this limit is about five megabytes (
5,242,880 bytes).
...if you're within your quota, it's a number from 0 to 1 (so a value of 0.
5 means that you're using
50% of your quota and 1.0 means you're using your entire quota).
loader/sandbox - Archive of obsolete content
evaluate code module provides evaluate function that lets you execute code in the given sandbox: evaluate(scope, 'var a =
5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via optional arguments that may improve exception reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
... evaluate(scope, 'a ++', 'http://foo.com/bar.js', 2); version of javascript can be also specified via an optional argument: evaluate(scope, 'let b = 2;', 'bar.js', 1, '1.
5'); // throws cause `let` is not defined in js 1.
5.
... load(scope, 'resource://path/to/my/script.js'); load(scope, 'file:///path/to/script.js'); load(scope, 'data:,var a =
5;'); globals functions sandbox(source) make a new sandbox that inherits principals from source.
window/utils - Archive of obsolete content
features object map of features to set for the window, defined like this: { width: 10, height: 1
5, chrome: true }.
... var { open } = require('sdk/window/utils'); var window = open('data:text/html,hello window', { name: 'jetpack window', features: { width: 200, height:
50, popup: true } }); args object extra argument(s) to be attached to the new window as the window.arguments property.
... features string map of features to set for the window, defined like: { width: 10, height: 1
5, chrome: true }.
Release notes - Archive of obsolete content
firefox 3
5 highlights added access keys for context menu.
... details github commits made between firefox 34 and firefox 3
5.
... bugs fixed between firefox 34 and firefox 3
5.
Developing for Firefox Mobile - Archive of obsolete content
enable usb debugging on the device (step 2 of this link only) on the development machine: install version 1.
5 or higher of the add-on sdk install the correct version of the android sdk for your device using the android sdk, install the android platform tools next, attach the device to the development machine via usb.
...then type: adb devices you should see some output like: list of devices attached
51800f220f01
564 device (the long hex string will be different.) if you do, then adb has found your device and you can get started.
...info: starting info: starting zerdatime 13292
58
528988 - browser chrome startup finished.
Finding window handles - Archive of obsolete content
that means if you use the top level nsibasewindow as a param, null will be returned in the chain and cause crash of firefox, that's a bug of firefox.(https://bugzilla.mozilla.org/show_bug.cgi?id=48904
5) now, let's move forward.
...ace(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dll'); /* http://msdn.microsoft.com/en-us/library/ms633
539%28v=vs.8
5%29.aspx * bool winapi setforegroundwindow( * __in_ hwnd hwnd * ); */ var setforegroundwindow = user32.declare('setforegroundwindow', ctypes.winapi_abi, ctypes.bool, // return bool ctypes.voidptr_t // hwnd ); var hwnd = ctypes.voidptr_t(ctypes.uint64(hwndstring)); var rez_setforegroundwindow = setforegroundwindow(hwnd); console.log('rez_setforegroundwindow:', rez_setfor...
...to see the messy code see here: https://gist.github.com/noitidart/60aab0a96f060240614f#file-_ff-addon-snippet-x11_focusmostrecentwindowofpid-js-l3
54 gdk.close(); x11.close(); see also js-ctypes - how to use c from javascript standard os libraries - specifics of js-ctypes per os ...
Deploying a Plugin as an Extension - Archive of obsolete content
one of the new features available in firefox 1.
5 is the ability to place browser plugins in a firefox extension.
...with firefox 1.
5, you can use the built-in extension mechanism to make a plugin available to your users.
...2/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.
5</em:minversion> <em:maxversion>1.
5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> you can get more detailed information about this file at install.rdf.
How to convert an overlay extension to restartless - Archive of obsolete content
(note that the usage of an octal integer literal, while standard for handling permissions, is dangerous and deprecated; usage of use es
5 strict mode to disable this and other foot-guns is recommended) if you need to read/manipulate binary data, a nsibinaryinputstream instance is what you'll use on that stream (e.g.
...this wasn't added until firefox 1
5.
... step
5: no more internal jar files you know how i've been mentioning extractionless add-ons every once in a while thus far?
Jetpack Processes - Archive of obsolete content
note: the above statement is not currently true, as js-ctypes is now provided to jetpack processes as of bug
588
563.
... a mechanism to optionally disable this feature has been proposed in bug 6143
51.
... history see bug
556846 and bug
578821 for details.
Listening to events in Firefox extensions - Archive of obsolete content
pageshow event this event works the same as the load event, except that it fires every time the page is loaded (whereas the load event doesn't fire in firefox 1.
5 when the page is loaded from cache).
... if you call javascript functions as part of the pageshow event, you can ensure these functions are called when the page is loaded in browsers other than firefox 1.
5 by calling the pageshow event as part of the load event, as shown in the sample later in this article.
... firefox 1.
5 tries to simulate load events in the same order they would occur when the page is initially loaded.
XPCOM Objects - Archive of obsolete content
*/ [scriptable, uuid(bd46f689-6c1d-47d0-bc07-bb
52b
546b8b
5)] interface xsihellocounter : nsisupports { /* the maximum allowed count.
... [scriptable, uuid(bd46f689-6c1d-47d0-bc07-bb
52b
546b8b
5)] the scriptable qualifier says that this component can be accessed from js code.
... const class_id = components.id("{37ed
5d2a-e223-4386-98
54-b64fd38932bf}"); const class_name = "hello world counter"; const contract_id = "@xulschool.com/counter;1"; these constants are used at the bottom, in the component registration code.
Extensions support in SeaMonkey 2 - Archive of obsolete content
the code for that will look something like this: <em:targetapplication> <!-- seamonkey --> <description> <em:id>{926
50c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>2.*</em:maxversion> </description> </em:targetapplication> the install.js is not supported any more and should be removed.
... in javascript code you can use the following technique to detect the application: const firefox_id = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}"; const seamonkey_id = "{926
50c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) { // running under thunderbird } else if(appinfo.id == seamon...
...you can use the application flag to select which overlay should be used with which application: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6} overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smoverlay.xul application={926
50c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} ...
Supporting search suggestions in search plugins - Archive of obsolete content
this enhancement request - the handling of a selected suggestion, namely calling of a full specified url as proposed in the opensearch standard - is tracked in bug 386
591.
... note: firefox requires that suggest requests complete within
500ms for suggestions to be displayed.
... if the request for the suggest url does not return data before
500ms have elapsed, no search suggestions will be shown.
Case Sensitivity in class and id Names - Archive of obsolete content
in section 7.
5.2, which defines class and ids, we find the following text: id = name [cs] this attribute assigns a name to an element.
... related links html 4.01, section 7.
5.2 html 4.01, section 12.2.3 original document information author(s): eric a.
... meyer, netscape communications last updated date: published 0
5 mar 2001 copyright information: copyright © 2001-2003 netscape.
Creating a status bar extension - Archive of obsolete content
</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.
5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> let's take a look at some key parts of the manifest.
...before firefox 1.
5, this was a guid.
... starting with firefox 1.
5, however, you should use a string in the form extension-name@creator-domain.
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.
5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating system as of ...
...vailable beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available doczilla sgml/xml/html browser last release on site from july 200
5 fabula language learning application inactive galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 200
5 homebase desktop operating environment for internet computers no longer available ...
...o im client last news item on site from january 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu web authoring tool development stopped in 200
5 and is being continued as an unofficial bugfix release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site from february 2008 xabyl visual xbl e...
cert_override.txt - Archive of obsolete content
example here is an example for a sha1-2
56 hash algorithm.
...some.website.com:443 oid.2.16.840.1.101.3.4.2.1 00:11:22:33:44:
55:66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:66:
55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa== fields fields are separated by a tab character.
... domainname:port : port 443 for https (ssl) hash algorithm oid sha1-2
56: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-
512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in the validity time, for example, for expired or not yet valid certs certificate's serial number and the issuer name as a base64 encoded string ...
Creating a Web based tone generator - Archive of obsolete content
in order to always have samples to play, a buffer of
500 ms is created.
... the function mozcurrentsampleoffset() is used to know the position of the samples being played so that we can fill a
500 ms buffer of audio samples.
... var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffersize = samplerate / 2; // buffer
500ms var tail = null; // the function called with regular interval to populate // the audio output buffer.
No Proxy For configuration - Archive of obsolete content
filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for" items bug 80917 - proxy: "no proxy" w/ form based ui bug 91
587 - proxy: "no proxy for" default domain filtering fails w/ non-fqdn (e.g., http://web/) bug 20168
5 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 260883 - "no p...
...roxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 171
58 comment 21: the correct separator are spaces or commas.
... original document information author(s): benjamin chuang last updated date: november 2, 200
5 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Source code directories overview - Archive of obsolete content
windows contains source code for windows 9
5, windows 98 and windows nt 4.0.
... qt contains source code for the qt toolkit, a c class library which runs on x-windows on unix, windows 9
5, windows 98 and window nt 4.0.
... original document information author(s): daniel howard other contributors: heikki toivonen (11-nov-1999), hervé renault (for the french translation) (16-nov-1999) last updated date: michael kaply 2-june-200
5 copyright information: portions of this content are © 1998-2007 by individual mozilla.org contributors; content available under a creative commons license | details.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
introduction microsoft has removed support for netscape plug-ins from ie
5.
5 sp 2 and beyond.
... a note to developers if you intend to modify this control in any way then you must also change the clsid from {dbb2de32-61f1-4f7f-beb8-a37f
5bc24ee2} to something else and any other guids this control relies upon (iid, libids etc).
... usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f
5bc24ee2" width="
500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels.
Creating regular expressions for a microsummary generator - Archive of obsolete content
for detailed documentation about regular expressions, see core_javascript_1.
5_reference:global_objects:regexp.
... to identify which parts are unique and which are common, let's look at the urls of several other auction item pages: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=130017
517168 http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=290019763032 http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=170019463424 based on these examples, it looks like the unique part is the item number at the end of the urls, and everything else is common to all urls.
... here are several other urls of this style: http://cgi.ebay.com/firefox-2002-dvd_w0qqitemz130017
517168qqihz003qqcategoryz617qqcmdzviewitem http://cgi.ebay.com/ahm-ho-scale-firefox-tank-car_w0qqitemz290019763032qqihz019qqcategoryz19130qqcmdzviewitem http://cgi.ebay.com/inuyasha-anime-pin-of-kirara-kilala-firefox_w0qqitemz170019463424qqihz007qqcategoryz39
557qqcmdzviewitem based on these examples, it looks like the urls all start with "http://cgi.ebay.com/", they all contain the string "qqit...
DTrace - Archive of obsolete content
mozilla dtrace support has been added by the sun dtrace team and can be used on solaris 10 and mac os x 10.
5.
... the dtrace probes currently built into the codebase may be enabled by default in the future, but for now you'll need to create a build with --enable-dtrace (on mac os x you also have to use at least the 10.
5 sdk for --with-macos-sdk, unlike the common configuration that uses the 10.4 sdk).
... pounce on dtrace a guide to using dtrace on mac os x 10.
5.
Drag and Drop - Archive of obsolete content
next » as of gecko 1.9.1 (firefox 3.
5), these apis are officially deprecated the newer, simpler, portable api should be used in their place.
... ondragstart an alias for ondraggesture; this is the html
5 spec name for the event and may be used in html or xul; however, for backward compatibility with older versions of firefox, you may wish to continue using ondraggesture in xul.
...for example, this will be set to
5 if five bookmarks are being dragged.
Downloading Nightly or Trunk Builds - Archive of obsolete content
firefox 3.0 corresponds to mozilla 1.9.0; firefox 3.
5 corresponds to mozilla 1.9.1; firefox 3.6 corresponds to mozilla 1.9.2.
...for example "shiretoko" is used for firefox 3.
5.
...for firefox 3.
5 that would be latest-mozilla-1.9.1 in https://archive.mozilla.org/pub/firefox/nightly/.
Java in Firefox Extensions - Archive of obsolete content
note bug 834918 about click-to-play effect on java plugins in chrome and bug 77
5301.
...i've had problems with stability in the latest xquseme when testing in firefox 3.
5b4, especially apparently on linux (i haven't so far been able to find any workarounds/incompatibilities, but everything is working in firefox 3.0.10.).
...see also liveconnect overview https://jdk6.dev.java.net/plugin2/#liveconnect https://jdk6.dev.java.net/plugin2/liveconnect/ http://forums.sun.com/thread.jspa?th...66932&start=1
5 ...
Menu - Archive of obsolete content
see bug
534014 for details and a workaround.
... a future version of jetpack may change this behavior; see bug
527924.
... see bug
526382 for more information.
Microsummary XML grammar reference - Archive of obsolete content
see the reference core_javascript_1.
5_reference:global_objects:regexp for the details of the regular expression syntax valid for generators and the tutorial creating regular expressions for a microsummary generator for step by step instructions to writing regular expressions that match urls.
...
5.
5 minutes) are permitted, although they probably aren't useful.
... notes: regardless of the absolute or conditional update interval specified by this element, firefox will never update microsummaries more frequently than once per minute; because firefox checks for expired microsummaries every 1
5 seconds, it is possible for a microsummary update to begin up to 1
5 seconds later than its interval indicates; firefox respects the browser cache when updating microsummaries, so it will not reload a page to update its microsummary if the cache contains a fresh copy of the page.
Monitoring downloads - Archive of obsolete content
var dbconn = this.storageservice.opendatabase(this.dbfile); var statement = dbconn.createstatement("update items set size=?1, " + "endtime=?2, speed=?3, status=?4 where source=?
5 and starttime=?6"); statement.bindint64parameter(0, adownload.size); statement.bindint64parameter(1, endtime.gettime()); statement.binddoubleparameter(2, adownload.speed); statement.bindint32parameter(3, adownload.state); statement.bindstringparameter(4, adownload.source.spec); statement.bindint64parameter(
5, adownload.starttime); statement.execute(); state...
...testr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(
5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; case 2: statusstr = "failed"; style = "color:red"; ...
... break; case 3: statusstr = "canceled"; style = "color:purple"; break; case 4: statusstr = "paused"; style = "color:blue"; break; case
5: statusstr = "queued"; style = "color:teal"; break; case 6: statusstr = "blocked"; style = "color:white background-color:red"; break; case 7: statusstr = "scanning"; style = "color:silver"; break; default: statusstr = "unknown"; break; } cell.setattribute("label", statusstr); cell.setattribute("style", style); row.appendchild(cell); loglist.appendchild(row); } } finally { ...
Priority Content - Archive of obsolete content
book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.
5 original: core javascript reference 1.
5 wiki location: core javascript 1.
5 reference migrators: deb richardson in progress: transforming xml: netscape and xslt 1.0 original: transforming xml: netscape and xslt 1.0 wiki location: transforming xml with xslt migrators: serge k.
...mathieu deaudelin 1
5:22, 17 may 200
5 (pdt) mostly completed: netscape gecko compatibility handbook original: netscape gecko compatibility handbook wiki location: gecko compatibility handbook migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.
... migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 200
5 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please put completed articles on the devedge page instead.
Frequently Asked Questions - Archive of obsolete content
we currently maintain two documents to help answer this question: a status page for svg in firefox 1.
5+ and a status page for svg in the development trunk.
...this is either because your browser doesn't support svg (you must have mozilla firefox 1.
5 or newer), or because the webpage/server isn't correctly telling mozilla that the file contains svg.
... the first milestone builds that will have this support will be svg enabled builds of firefox 1.
5.
Space Manager Detailed Design - Archive of obsolete content
| | | // +-----+ +-----+ | | | r | | b | | b | // +-----+ | b | +-----+ | | +-----+ | | // | | | | +-----+ | r | +-----+ // | b | +-----+ +-----+ // | | // +-----+ // // // // case
5 case 6 case 7 // ------ ------ ------ // +-----+ +-----+ +-----+ +-----+ // | | | r | | b | | | +-----+ // | b | +-----+ +-----+ | r | | b | // | | | | +-----+ // +-----+ +-----+ // +-----+ // | r | ...
... case #
5: the rect is totally below the current bandrect, so just skip to the next band case #3 and #4: rect is at least partially intersection with the bandrect, so divide the current band into two parts, where the top part is above the current rect.
... cross-component algorithms tech notes original document information author(s): marc attinasi other contributors: david baron, josh soref last updated date: november 2
5, 200
5 ...
Supporting private browsing mode - Archive of obsolete content
firefox 3.
5 introduced private browsing mode, in which potentially private information is not recorded.
... this._os.removeobserver(this, "private-browsing"); } }, get inprivatebrowsing() { return this._inprivatebrowsing; }, get watcher() { return this._watcher; }, set watcher(val) { this._watcher = val; } }; of special note is the fact that this helper object is designed to not break on versions of firefox without private browsing support (those prior to firefox 3.
5).
...color for the url bar when in private browsing mode, you could do the following: [browsingmode=private] #urlbar { -moz-appearance: none; background: #eee } similarly, if you want to theme the firefox button in firefox 4 differently when private browsing mode is permanent: #main-window[privatebrowsingmode=temporary] #appmenu-button:not(:-moz-window-inactive) { -moz-border-left-colors: rgba(2
55,2
55,2
55,.
5) rgba(43,8,6
5,.9); -moz-border-bottom-colors: rgba(2
55,2
55,2
55,.
5) rgba(43,8,6
5,.9); -moz-border-right-colors: rgba(2
55,2
55,2
55,.
5) rgba(43,8,6
5,.9); } this snippet is pulled directly from the standard skin; you can customize as you see fit.
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
osdefault-jitinterpretedaggressive jit mac (os/x 10.4 intel, 2ghz dual core)tc-703 vs tc-700: 0.0%tc-703 vs flash10: 1.1% slowertc-703 vs tc-700: 17.4% fastertc-703 vs flash10: 16
5.3% fastertc-703 vs tc-700: 0.1% fastertc-703 vs flash10: 0.8% slower windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 0.6% fastertc-703 vs flash10: 0.8% fastertc-703 vs tc-700: 16.4% fastertc-703 vs flash10: 148.7% fastertc-703 vs tc-700: 0.1% slowertc-703 vs flash10:
5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-703 vs tc-700: 6.0% fastertc-703 vs flash10: 1.7% fas...
...tertc-703 vs tc-700: 89.
5% fastertc-703 vs flash10: 182.0% fastertc-703 vs tc-700: 6.1% fastertc-703 vs flash10: 1.4% faster performance testuite memory metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700).
... buildsize flash10
576k tc-700740k tc-7036
55k known issues known failures in the acceptance testsuite include: number failures in testsuite when running on linux windows mobile system.privatebytes and -memstats privatebytes always returns 0 amd64 longjmp hack needs reengineering on non-windows platforms different runtime errors w...
XBL - Archive of obsolete content
removal of the xbl implementation is being tracked in bug 1
566221.
... w3c sxbl (currently a working draft, 200
5) stands for svg's xml binding language.
... some differences between sxbl and xbl2 are listed in an article by anne van ke ( seesteren (november, 200
5).
International characters in XUL JavaScript - Archive of obsolete content
gecko 1.8, as used in firefox 1.
5 and other applications, added support for non-ascii characters in javascript files loaded from xul files.
... earlier versions always interpreted js files loaded from xul as iso-88
59-1 (latin-1), in both local and remote cases.
...however, you can use unicode escapes – the earlier example rewritten using them would be: var text = "ein sch\u00f6nes beispiel eines mehrsprachigen textes: \u6
5e
5\u672c\u8a9e"; an alternative might be to use property files via nsistringbundle or the xul <stringbundle> element; this would allow for localization of the xul.
Sorting Results - Archive of obsolete content
for example, the date 'may 1
5' would appear after 'august 24' when sorted purely alphabetically but before it when sorted chronologically.
... is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">112
596676729
5<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype="integer" for numbers which will allow sorting numerically.
...for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos
5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items will be sorted by title.
Template Builder Interface - Archive of obsolete content
this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
...for example: <vbox datasources="template-guide-photos
5.rdf template-guide-streets.rdf"> sometimes, you will want to calculate the datasource to be used and attach it to the template later.
...for instance: var tree = document.getelementbyid("thetree"); tree.datasources = "template-guide-photos
5.rdf template-guide-streets.rdf"; this will also change the datasources used.
Adding more elements - Archive of obsolete content
nupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 1
5em;"/> </hbox> two drop down boxes have been added to the dialog.
...nupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 1
5em;"/> </hbox> <spacer style="height: 10px" flex="1"/> <hbox> now when the dialog is resized, the two buttons will move so that they are always along the bottom of the dialog.
... <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 1
5em;"/> </groupbox> there are other cosmetic problems as well.
Grids - Archive of obsolete content
the following example demonstrates this: example 4 : source view <grid flex="1"> <columns> <column flex="
5"/> <column/> <column/> </columns> <rows> <row flex="10"> <button label="cherry"/> <button label="lemon"/> <button label="grape"/> </row> <row flex="1"> <button label="strawberry"/> <button label="raspberry"/> <button label="peach"/> </row> </rows> </grid> the first column and both rows have been made flexible.
...the cell in the first column and first row (the cherry button) will be flexible by a factor of
5 horizontally and flexible by a factor of 10 vertically.
...here is a simple example: example
5 : source view <grid> <columns> <column flex="1"/> <column flex="1"/> </columns> <rows> <row> <label value="northwest"/> <label value="northeast"/> </row> <button label="equator"/> <row> <label value="southwest"/> <label value="southeast"/> </row> </rows> </grid> the button will stretch to fit the entire width of the grid as it is not...
Keyboard Shortcuts - Archive of obsolete content
vk_cancel vk_back vk_tab vk_clear vk_return vk_enter vk_shift vk_control vk_alt vk_pause vk_caps_lock vk_escape vk_space vk_page_up vk_page_down vk_end vk_home vk_left vk_up vk_right vk_down vk_printscreen vk_insert vk_delete vk_0 vk_1 vk_2 vk_3 vk_4 vk_
5 vk_6 vk_7 vk_8 vk_9 vk_semicolon vk_equals vk_a vk_b vk_c vk_d vk_e vk_f vk_g vk_h vk_i vk_j vk_k vk_l vk_m vk_n vk_o vk_p vk_q vk_r vk_s vk_t vk_u vk_v vk_w vk_x vk_y vk_z vk_numpad0 vk_numpad1 vk_numpad2 vk_numpad3 vk_numpad4 vk_...
...numpad
5 vk_numpad6 vk_numpad7 vk_numpad8 vk_numpad9 vk_multiply vk_add vk_separator vk_subtract vk_decimal vk_divide vk_f1 vk_f2 vk_f3 vk_f4 vk_f
5 vk_f6 vk_f7 vk_f8 vk_f9 vk_f10 vk_f11 vk_f12 vk_f13 vk_f14 vk_f1
5 vk_f16 vk_f17 vk_f18 vk_f19 vk_f20 vk_f21 vk_f22 vk_f23 vk_f24 vk_num_lock vk_scroll_lock vk_comma vk_period vk_slash vk_back_quote vk_open_bracket vk_back_slash vk_close_bracket vk_quote vk_help for example, to create a shortcut that is activated when the user presses alt and f
5, do the following: <keyset> <key id="test-key" modifiers="alt" keycode="vk_...
...f
5"/> </keyset> the example below demonstrates some more keyboard shortcuts: <keyset> <key id="copy-key" modifiers="accel" key="c"/> <key id="find-key" keycode="vk_f3"/> <key id="switch-key" modifiers="control alt" key="1"/> </keyset> the first key is invoked when the user presses their platform-specific shortcut key and c.
Stack Positioning - Archive of obsolete content
for example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and
50 pixels from the top edge.
... the second button can be placed at 100 pixels from the left edge and
5 pixels from the top edge.
... example 1 : source view <stack> <button label="goblins" left="
5" top="
5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes.
Tree Box Objects - Archive of obsolete content
rface(components.interfaces.nsitreeboxobject); boxobject.scrolltorow(value); } </script> <tree id="thetree" rows="4"> <treecols> <treecol id="row" label="row" primary="true" flex="1"/> </treecols> <treechildren> <treeitem label="row 0"/> <treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row
5"/> <treeitem label="row 6"/> <treeitem label="row 7"/> <treeitem label="row 8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll" oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
... tree.boxobject.getrowat(
50, 100 ); this example will return the index of the row with a horizontal position of
50 and a vertical position of 100.
...ue = column.value; document.getelementbyid("part").value = part.value; } </script> <tree id="thetree" flex="1" onmousemove="updatefields(event);"> <treecols> <treecol id="utensil" label="utensil" primary="true" flex="1"/> <treecol id="count" label="count" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="fork"/> <treecell label="
5"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="knife"/> <treecell label="2"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="spoon"/> <treecell label="8"/> </treerow> </treeitem> </treechildren> </tree> <label value="row:"/> <label id="row"/> <label value="column:"/> <label id="col...
Window icons - Archive of obsolete content
see also bug 1
531836 for more details.
... starting with firefox 1.
5, thunderbird 1.
5, and xulrunner 1.8, you can specify an icon for a xul window by putting files named mywindow.ico (for windows) and mywindow.xpm or mywindow16.xpm (linux), where mywindow is the id of the <window> you want to attach the icon to, in the chrome/icons/default subfolder of your bundle.
... note: the global icons override does not currently work due to bug bug
543490.
The Implementation of the Application Object Model - Archive of obsolete content
first of all it could streamline the redundancy in the interface methods and present a new interface for pluggable content that was much smaller and easier to plug into than the 4-
5 interfaces required if directly implementing the content tree interfaces.
... statement #
5 when a change is made to aggregated data that falls outside of the domain of an existing data source, it must be possible for that change to be persistently remembered by recording the change into a new data source that can then be read in when the data is re-aggregated in future sessions of the application.
... talk to john mcmullen about
5.0 preferences and figure out where localdata will need to be used (likely on every form element control) talk to steve elmer.
listbox - Archive of obsolete content
electall, selectitem, selectitemrange, timedselect, toggleitemselection examples <listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </listbox> <listbox id="thelist" rows="10" width="400"> <listhead> <listheader label="1ct gem" width="240"/> <listheader label="price" width="1
50"/> </listhead> <listcols> <listcol/> <listcol flex="1"/> </listcols> </listbox> var thelist = document.getelementbyid('thelist'); gems = [ {gem: "ruby", price: "$3,
500 - $4,600"}, {gem: "emerald", price: "$700 - 4,2
50"}, {gem: "blue sapphire", price: "$3,400 - $4,
500"}, {gem: "diamond", price: "$
5,600 - $16,000"} ]; for (var i = 0; i < gems...
... for richlistbox, this is new in firefox 3.
5.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html
5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
prefwindow - Archive of obsolete content
the preference window will not run correctly if you do not set this preference in your application's defaults (see bug 48
51
50 for more information).
... the default setting of browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 103722
5).
...returning false doesn't currently prevent the dialog from closing, but does prevent saving (bug 474
527).
textbox - Archive of obsolete content
the default is
50 milliseconds.
...the default is
500 milliseconds.
...you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to
500).
timepicker - Archive of obsolete content
attributes disabled, hideseconds, increment, readonly, tabindex, value properties amindicator, datevalue, disabled, hideseconds, hour, hourleadingzero, increment, is24hourclock, ispm, minute, minuteleadingzero, pmindicator, readonly, second, secondleadingzero, tabindex, value examples <timepicker value="12:0
5"/> attributes disabled type: boolean indicates whether the element is disabled or not.
... minute type: integer the currently selected minute from 0 to
59.
... second type: integer the currently selected second from 0 to
59.
Building XULRunner - Archive of obsolete content
on mac, xulrunner requires mac os x 10.3 or higher and xcode 1.
5 or higher to build properly.
...a release configuration of xulrunner is: mk_add_options moz_co_project=xulrunner mk_add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_add_options --enable-application=xulrunner #uncomment the following line if you don't want to build javaxpcom: #ac_add_options --disable-javaxpcom cvs tags and xulrunner versions older xulrunner releases where tagged in cvs with (for instance xulrunner_1_8_0_
5_release ) up to version 1.8.0.
5 the cvs repository does not have specific tags for xulrunner anymore.
...for instance, in firefox 2.0.0.9 you will get : mozilla/
5.0 (windows; u; windows nt
5.1; en-us; rv:1.8.1.9) gecko/2007102
5 firefox/2.0.0.9 therefore the xulrunner version for this firefox version is : 1.8.1.9 fetching sources from mercurial as with all other mozilla products, one would fetch recent sources from mercurial.
Building XULRunner with Python - Archive of obsolete content
the issue is that xulrunner must be built with the same version of c as python and with python 2.
5 that is msvc71.
...install the included python distro usingpython2
5\python-2.
5.msi.
... it is possible to test for python in a batch file using something like rem check python 2.
5 installed reg query "hklm\software\python\pythoncore\2.
5" > nul 2>&1 || reg query "hkcu\software\python\pythoncore\2.
5" > nul 2>&1 if errorlevel 1 ( echo python 2.
5 was not found.
Deploying XULRunner - Archive of obsolete content
xulrunner 39 and later due to mac os x code signing rules and how they interact with the design of xulrunner (see bug 110
5044 for the inside scoop), starting with xulrunner 39 the xulrunner library files are no longer able to reside in a xulrunner framework directory.
... finally : you can use any paint or graphics utility to create your application's icon, which should be provided as a
512 by
512 pixel png file.
... to make it all work, change the permissions of your bundle by running chmod -r 7
55 yourapp.app.
mozilla.dev.platform FAQ - Archive of obsolete content
then unpack the xul app into the mac structure with xulrunner -install-app q: can you build xulrunner with newer (>1.
5) features, such as storage?
...0x00016b
50 in xre_createappdata () a: when you <tt>--disable-libxul</tt>, the xpcom glue doesn't have information about how to load all the dependent libraries like <tt>libgfx.dylib</tt>.
... visual studio express 200
5 q: when i try to run xulrunner-stub.exe i get the error "this application failed to start because msvcr80.dll was not found." a: see bug 3
50616 ...
2006-11-03 - Archive of obsolete content
he has also created a bug entry on bugzilla with the bug id of opened bug #3448
54.
... on november 2nd gery replied with the bug number 3
58706.
... problems building browser's trunk on windows using vs 200
5 originally posted on october 29th: ricardo sixel is trying to retrieve the trunk source code using the browser check out option.
2006-12-01 - Archive of obsolete content
firefox 1.
5.0.9/2.0.0.1 update - we need help!
... jay patael calls for help getting the next update ff 1.
5.x and 2.x.
... bon echo project status: remaining "to-do" items beltzner starts a discussion on when to offer 1.
5.0.8+ users the chance to upgrade to ff2.x (now or when ff2.0.0.1 is released).
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px
516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
... gecko 1.9.1 (firefox 3.
5) and earlier the chromedir attribute firefox, thunderbird and seamonkey expose an attribute named chromedir on certain elements.
... toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px
516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl.
Theme changes in Firefox 2 - Archive of obsolete content
browser.css the following styles used in firefox 1.
5 themes are no longer used in firefox 2 and should be removed from your theme: #bookmarks-button:active #copy-button:active #cut-button:active #downloads-button:active #forward-button[buttondown="true"] #history-button:active #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="tr...
... browser.css the following styles that were used in firefox 1.
5 are no longer used in firefox 2 and have been removed: tab:focus tab[beforeselected="true"] > .tab-image-right tab[selected="true"] > .tab-image-left tab[selected="true"] > .tab-image-middle tab[selected="true"] > .tab-image-right the following styles are new in firefox 2: .alltabs-item > .menu-iconic-left > .menu-iconic-icon .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-ico...
... changes in mozapps extensions/about.css the following styles from firefox 1.
5 are no longer used in firefox 2 and should be removed: #contributorsbox #creatorbox #extensioncontributors #extensioncontributors #extensioncreatorlabel the following styles were added: .indent .sectiontitle you may wish to make changes to other styles as well.
Summary of Changes - Archive of obsolete content
ight: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01 div plus scripting non-standard bgsound html 4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie
5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.getelementbyid(id_attribute_value) ie
5+ formname.inputname.value dom level 1: document.forms["formname"].inputname.value ie
5+ inputname.value dom level 1: document.forms["formname"].inputname.value ie
5+ formctrlname dom ...
...level 1: document.forms["formname"].formctrlname ie
5+ document.forms(0) dom level 1: document.forms[0] ie elemref.innertext dom level 1 (core) interface we could introduce dom 3 core textcontent attribute here which is supported by mozilla 1.
5+ and is a perfect equivalent to innertext.
... http://www.w3.org/tr/2004/rec-dom-le...e3-textcontent ie
5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie
5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie
5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated feature w3c feature or recommended replacement ...
for each...in - Archive of obsolete content
the for each...in statement is deprecated as the part of ecma-3
57 (e4x) standard.
... firefox now warns about the usage of for each...in and it no longer works starting with firefox
57.
... the following snippet iterates over an object's properties, calculating their sum: var sum = 0; var obj = {prop1:
5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } console.log(sum); // logs "26", which is
5+13+8 specifications not part of any standard.
Old Proxy API - Archive of obsolete content
object.getpropertydescriptor(proxy, name) getpropertydescriptor: function(name) -> propertydescriptor | undefined this function doesn't exist in ecmascript
5.
... object.getpropertynames(proxy) getpropertynames: function() -> strings array this function doesn't exist in ecmascript
5.
... // fundamental traps getownpropertydescriptor: function(name) { var desc = object.getownpropertydescriptor(obj, name); // a trapping proxy's properties must always be configurable if (desc !== undefined) { desc.configurable = true; } return desc; }, getpropertydescriptor: function(name) { var desc = object.getpropertydescriptor(obj, name); // not in es
5 // a trapping proxy's properties must always be configurable if (desc !== undefined) { desc.configurable = true; } return desc; }, getownpropertynames: function() { return object.getownpropertynames(obj); }, getpropertynames: function() { return object.getpropertynames(obj); // not in es
5 }, defineproperty: function(name, desc) ...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
see listing
5 for an update to listing 1 to reflect this.
... listing
5 - demonstration of server-proxy <script runat="server"> function notexposed() { // runs on the server, hidden from the browser return "can't see me!"; } function exposed() { // runs on the server, callable from the browser return "exposed to the browser"; } exposed.proxy = true; // tell jaxer this function is ok to be called from the browser </script> <script runat="client" type="text/javascript"> alert( exposed() ); //works like a charm alert( notexposed() ); //produces an object not found error since it server-side only </script> understanding the concept of operating context in jaxer is central to moving forward with the example application which is what we'll examine next.
... } // assemble the string var s = "name: " + name + "<br/>" + "email: " + email + "<br/>" + "message: " + message + "<br/><br/>"; // append the entry to the log file jaxer.file.append( "dump.txt", s ); // add support for management via database jaxer.db.execute( "create table if not exists comments ( id integer primary key auto_increment, " + "name varchar(
50) not null, " + "email varchar(2
55) not null, " + "message varchar(300) not null )" ); jaxer.db.execute( "insert into comments ( name, email, message ) values ( ?, ?, ?
background-size - Archive of obsolete content
[that said, the popularity of chrome let me think of a table row like safari, chrome (webkit) | 4.0, 2.0 (
528).
... konqueror's global market share is 0.0
5%, (<
5% of linux users).
...lem - that gets inherited even if i add in -moz-border-image: none, to <body> or <html>, and setting the height to 100% is more a matter of covering it up rather than stopping it happening (see further examples a, b and c - b and c look ok, but adding margin or padding reveals that the image applies to both <body> and <html> even though explicitly set to none) user:robertc 2009-08-14 see also bug
509681 and bug 49799
5.
forEach - Archive of obsolete content
jswisher 1
5 aug 2011 <hr> is this a from _core_ of javascript 1.
5?
... if so, is js 1.
5 gecko only?
...--gandalf 07:18, 31 may 200
5 (pdt) is there a way to make foreach make use of break?
Writing JavaScript for XHTML - Archive of obsolete content
/*]]>*/--></style> see this document for more on the issues related to application/xhtml+xml and text/html (at least as far as xhtml 1.* and html 4; html
5 addresses many of these problems).
... solution: use the storage object with firefox 2 there was a new feature enabled, the html
5 storage object.
... for completeness here is the accept field, that firefox 2.0.0.9 sends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.
5 further reading you will find several useful articles in the developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using css and javascript in xhtml documents ...
Archive of obsolete content
201
5 mdn fellowship program add-ons archived add-ons documentation.
... an interview with douglas bowman of wired news one of the web's oldest news sites, wired news draws between 20 and 2
5 million page views every month.
... using firebug and jquery (screencast) note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ using io timeout and interrupt on nt this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.
51 and 4.0.
Common causes of memory leaks in extensions - Extensions
while bug 69
5480 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist.
...for example: function implicitdeclarationleak(window) { // implicit variable declaration in the js global, holding a strong ref to the document doc = window.document; } implicitly declared variables can be avoided by using ecmascript
5's strict mode.
... for some examples found in real-world add-ons, see bug 712733, bug 72
587
5, and bug 727
552.
Anatomy of a video game - Game development
different monitors input at different rates: 30 fps, 7
5 fps, 100 fps, 120 fps, 144 fps, etc.
...it is 20 hz (
50ms) here.
... mygame.ticklength =
50; // this sets your simulation to run at 20hz (
50ms) setinitialstate(); main(performance.now()); // start the cycle })(); another alternative is to simply do certain things less often.
Introduction to game development for the Web - Game development
thanks to massive performance improvements in javascript just-in-time compiler technology and new apis, you can build games that run in the browser (or on html
5-powered devices) without making compromises.
... the html
5 game platform you can truly think of the web as a better target platform for your game.
...games built with html
5 work on smartphones, tablets, pcs and smart tvs.
Audio for Web games - Game development
if you space your individual sounds by at least
500ms then using the timeupdate event (which fires every 2
50ms) should be sufficient.
... here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16
512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="17">1</button> <button data-start="14" data-stop="1
5">2</button> <button data-start="12" data-stop="13">3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">
5</button> <button data-start="6" data-stop="7">6</button> <button data-start="4" data-stop="
5">7</button> <button data-start="2" data-stop="3">8</button> <button data-start="0" data-stop="1">9</button> now we have buttons wi...
... see also web audio api on mdn <audio> on mdn developing game audio with the web audio api (html
5rocks) mixing positional audio and webgl (html
5rocks) songs of diridum: pushing the web audio api to its limits making html
5 audio actually work on mobile audio sprites (and fixes for ios) ...
Crisp pixel art look with image-rendering - Game development
if the canvas was created with a 128 pixel width, for example, we would set the css width to
512px if we wanted a 4x scale.
...the original image we want to upscale looks like this: here's some html to create a simple canvas: <canvas id="game" width="128" height="128"></canvas> css to size the canvas and render a crisp image: canvas { width:
512px; height:
512px; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image ...
...into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a29
54fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...
Build the brick field - Game development
var brickrowcount = 3; var brickcolumncount =
5; var brickwidth = 7
5; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30; here we've defined the number of rows and columns of bricks , their width and height, the padding between the bricks so they won't touch each other and a top and left offset so they won't start being drawn right from the edge of the canvas.
...our code might look like this: function drawbricks() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { bricks[c][r].x = 0; bricks[c][r].y = 0; ctx.beginpath(); ctx.rect(0, 0, brickwidth, brickheight); ctx.fillstyle = "#009
5dd"; ctx.fill(); ctx.closepath(); } } } again, we're looping through the rows and columns to set the x and y position of each brick, and we're also painting a brick on the canvas — size brickwidth x brickheight — with each loop iteration.
...unt; c++) { for(var r=0; r<brickrowcount; r++) { var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; bricks[c][r].x = brickx; bricks[c][r].y = bricky; ctx.beginpath(); ctx.rect(brickx, bricky, brickwidth, brickheight); ctx.fillstyle = "#009
5dd"; ctx.fill(); ctx.closepath(); } } } actually drawing the bricks the last thing to do in this lesson is to add a call to drawbricks() somewhere in the draw() function, preferably at the beginning, between the clearing of the canvas and drawing the ball.
Create the Canvas and draw on it - Game development
ctx.beginpath(); ctx.rect(20, 40,
50,
50); ctx.fillstyle = "#ff0000"; ctx.fill(); ctx.closepath(); all the instructions are between the beginpath() and closepath() methods.
...in our case the rectangle is painted 20 pixels from the left side of the screen and 40 pixels from the top side, and is
50 pixels wide and
50 pixels high, which makes it a perfect square.
...try adding this code to your javascript too: ctx.beginpath(); ctx.rect(160, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 2
55, 0.
5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle.
Animations and tweens - Game development
loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it put the call to animations.add() seen below: ball = game.add.sprite(
50, 2
50, 'ball'); ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24); to add an animation to the object we use the animations.add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
...update the first line inside update() as shown below: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); paddle.x = game.input.x || game.world.width*0.
5; } then we can create the ballhitpaddle() function (having ball and paddle as default parameters), playing the wobble animation when it is called.
... that's the expanded version of the tween definition, but we can also use the shorthand syntax: game.add.tween(brick.scale).to({x:2,y:2},
500, phaser.easing.elastic.out, true, 100); this tween will double the brick's scale in half a second using elastic easing, will start automatically, and have a delay of 100 miliseconds.
Visual-js game engine - Game development
http://creativecommons.org/licenses/by-nc-sa/3.0/ download from : https://www.adobe.com/devnet/archive/html
5/articles/javascript-motion-detection.html webrtc - webcam communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyright (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : http...
...der textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.
5.2 minimum also redistribution pack for c++ how to start project ?
... 1) click create application 2) enter new application name in input prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www)
5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix install_ ) second way - open cmd terminal and enter next command : npm install mysql npm install delivery npm install express npm install mkdirp npm install socket.io npm install nodemailer@0.7.0 very easy installation and project files generator .
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-co...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-co...
Long task - MDN Web Docs Glossary: Definitions of Web-related terms
a long task is a task that takes more than
50ms to complete.
... it is an uninterrupted period where the main ui thread is busy for
50 ms or longer.
... common examples include long running event handlers, expensive reflows and other re-renders, and work the browser does between different turns of the event loop that exceeds
50 ms.
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
javascript // the primitive let foo =
5; // defining a function that should change the primitive value function addtwo(num) { num += 2; } // another function trying to do the same thing function addtwo_v2(foo) { foo += 2; } // calling our first function while passing our primitive as an argument addtwo(foo); // getting the current primitive value console.log(foo); //
5 // trying again with our second function...
... addtwo_v2(foo); console.log(foo); //
5 did you expect it to be 7 instead of
5?
...it correctly finds our variable instantiated with our first statement after finding it, the expression is evaluated, foo is replaced by
5 and the javascript engine passes that value to the functions as an argument before executing the statements inside the functions' bodies, javascript takes a copy of the originally passed argument (which is a primitive) and creates a local copy.
Type coercion - MDN Web Docs Glossary: Definitions of Web-related terms
examples const value1 = '
5'; const value2 = 9; let sum = value1 + value2; console.log(sum); in the above example, javascript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of
59.
... the compiler could have coerced the
5 into a number and returned a sum of 14, but it did not.
... to return this result, you'd have to explicitly convert the
5 to a number using the number() method: sum = number(value1) + value2; ...
CSS and JavaScript accessibility best practices - Learn web development
"standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size:
5rem; } p, li { line-height: 1.
5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc.
... providing custom controls for html
5 <video>s that are accessible to keyboard-only users, along with a direct link to the video that can be used to access it if javascript is not available (the default <video> browser controls aren't keyboard accessible in most browsers).
... note: some of you will probably be thinking about that fact that html
5 forms have built-in validation mechanisms like the required, min/minlength, and max/maxlength attributes (see the <input> element reference for more information).
What is accessibility? - Learn web development
note: the world health organization's disability and health fact sheet states that "over a billion people, about 1
5% of the world's population, have some form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness.
... in terms of statistics, the world health organization estimates that "28
5 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see visual impairment and blindness).
... your country may also have specific legislation governing the need for websites serving their population to be accessible — for example en 301
549 in the eu, section
508 of the rehabilitation act in the us, federal ordinance on barrier-free information technology in germany, the accessibility regulations 2018 in the uk, accessibilità in italy, the disability discrimination act in australia, etc.
Beginner's guide to media queries - Learn web development
there are a number of other media features that you can test for, although some of the newer features introduced in level 4 and
5 of the media queries specification have limited browser support.
... * { box-sizing: border-box; } body { width: 90%; margin: 2em auto; font: 1em/1.3 arial, helvetica, sans-serif; } a:link, a:visited { color: #333; } nav ul, aside ul { list-style: none; padding: 0; } nav a:link, nav a:visited { background-color: rgba(207, 232, 220, 0.2); border: 2px solid rgb(79, 18
5, 227); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .related { background-color: rgba(79, 18
5, 227, 0.3); border: 1px solid rgb(79, 18
5, 227); padding: 10px; } .sidebar { background-color: rgba(207, 232, 220, 0.
5); padding: 10px; } article { ma...
... this could be achieved using the following: <ul class="grid"> <li> <h2>card 1</h2> <p>...</p> </li> <li> <h2>card 2</h2> <p>...</p> </li> <li> <h2>card 3</h2> <p>...</p> </li> <li> <h2>card 4</h2> <p>...</p> </li> <li> <h2>card
5</h2> <p>...</p> </li> </ul> .grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .grid li { border: 1px solid #666; padding: 10px; } open the grid layout example in the browser, or view the source.
Supporting older browsers - Learn web development
* {box-sizing: border-box;} .wrapper { background-color: rgb(79,18
5,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the ...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,18
5,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> to deal with this issue we need to h...
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,18
5,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius:
5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">i...
HTML forms in legacy browsers - Learn web development
and html
5 <input> types don't fail when not supported: they fall back to type=text.
... html input types the input types added in html
5 are all useable, even in ancient browsers, because the way they degrade is highly predictable.
... here is an example: modernizr.load({ // this tests if your browser supports the html
5 form validation api test : modernizr.formvalidation, // if the browser does not support it, the following polyfill is loaded nope : form-validation-api-polyfill.js, // in any case, your core app file that depends on that api is loaded both : app.js, // once both files are loaded, this function is called in order to initialize the app.
Example 2 - Learn web development
lect> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -
5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #2277
55; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidd...
...en; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.62
5em; /* 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 2
5px 2px
5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.4
5); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:af...
...elect> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -
5000em; height : 0; overflow : hidden; } result for no js ...
Other form controls - Learn web development
<progress max="100" value="7
5">7
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.
... <meter min="0" max="100" value="7
5" low="33" high="66" optimum="
50">7
5</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.
... previous overview: forms next in this module your first form how to structure a web form basic native form controls the html
5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
JavaScript basics - Learn web development
for example, enter '3
5' + '2
5' into your console.
...if you enter, 3
5 + 2
5 you'll get the total of the two numbers.
...for example: multiply(4, 7); multiply(20, 20); multiply(0.
5, 3); note: the return statement tells the browser to return the result variable out of the function so it is available to use.
Manipulating documents - Learn web development
as an example, try adding these lines to our ongoing example: para.style.color = 'white'; para.style.backgroundcolor = 'black'; para.style.padding = '10px'; para.style.width = '2
50px'; para.style.textalign = 'center'; reload the page and you'll see that the styles have been applied to the paragraph.
... if you look at that paragraph in your browser's page inspector/dom inspector, you'll see that these lines are indeed adding inline styles to the document: <p style="color: white; background-color: black; padding: 10px; width: 2
50px; text-align: center;">we hope you enjoyed the ride.</p> note: notice how the javascript property versions of the css styles are written in lower camel case whereas the css versions are hyphenated (e.g.
... add the following inside your html <head>: <style> .highlight { color: white; background-color: black; padding: 10px; width: 2
50px; text-align: center; } </style> now we'll turn to a very useful method for general html manipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to.
Handling text — strings in JavaScript - Learn web development
we then use a window.alert() function in line
5 to display another popup containing a string we've assembled from two string literals and the name variable, via concatenation.
...we did exactly this in our number guessing game, in line
54.
... you can include complex expressions inside template literals, for example: let examscore = 4
5; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestscore*100)) }%).
Object prototypes - Learn web development
in the next article, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 201
5 classes.
... note: before ecmascript 201
5, there wasn't officially a way to access an object's prototype directly — the "links" between the items in the chain are defined in an internal property, referred to as [[prototype]] in the specification for the javascript language (see ecmascript).
... since ecmascript 201
5, you can access an object's prototype object indirectly via object.getprototypeof(obj).
Aprender y obtener ayuda - Learn web development
it can be as simple as: "it'll take me
500 hours to learn what i need to know, and i have a year to do it, so if i assume 2 weeks' holiday i'll need to do work on this for 10 hours per week.
...we'd recommend taking a 1
5 minutes break every hour to 90 minutes.
...if you are really into gaming, for example, there is something quite motivating about saying "no gaming tonight unless i get through my
5 hours of learning".
The "why" of web performance - Learn web development
imagine loading that same site on a $3
5 huawei device in a rural india with limited coverage or no coverage.
... here's some real-world examples of performance improvements: tokopedia reduced render time from 14s to 2s for 3g connections and saw a 19% increase in visitors, 3
5% increase in total sessions, 7% increase in new users, 17% increase in active users and 16% increase in sessions per user.
... rebuilding pinterest pages for performance resulted in a 40% decrease in wait time, a 1
5% increase in seo traffic and a 1
5% increase in conversion rate to signup.
Componentizing our Svelte app - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c89
59b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/0
5-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
5-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a374
52e8c7f70
521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/0
5-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/0
5-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a374
52e8c7f70
521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a
5a4494366b179c8739
5940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibility and usability issues.
Dynamic behavior in Svelte: working with variables and props - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a
5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
... now try going back to localhost:
5000, pressing ctrl + shift + k to open your browser console and typing something into the input field.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/99b9eb228b404a2f8c89
59b22c0a40d3?version=3.23.2 summary that will do for now!
Accessibility information for UI designers and developers
the ratio should be 4.
5:1 for regular text and 3:1 for large text.
... text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.
5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface.
...for example: after a level 2 heading, the first subheading would be a level 3, and never a level 4 or
5.
A bird's-eye view of the Mozilla framework
tiner last updated date: 11/23/0
5 statement of purpose the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework.
...the code samples in the article are based on mozilla/
5.0 (windows; u; windows nt
5.1; en-us; rv:1.9a1) gecko/200
51104 seamonkey/1.1a from a new source tree checked out 11/04/0
5.
... the build id is 200
5110409.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach
5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> ...
...shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj8
5c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh
5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn7
5d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8lui...
...acnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh
5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar
5pqmalacabquulttbgccagcnnzgabbgamj
5thwgvjlaaaaabjru
5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Creating a Firefox sidebar
it's the easiest way to create an extension with a sidebar.obsolete since gecko
57 you can also build a restartless extension yourself without the sdk.
... a sample extension to add a web panel is available as a starter.obsolete since gecko
57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
... the document might be obsolete, though.obsolete since gecko
57 the social api obsolete since gecko
57 (firefox
57 / thunderbird
57 / seamonkey 2.
54)this feature is obsolete.
Creating reftest-based unit tests
step 3 create a file named foo.html with the following: <html><head><title>reftest0001</title> <body><strong>hello!</strong></body> </html> step 4 create a file named bar.html with the following: <html><head><title>reftest0001</title> <body><b>hello!</b></body> </html> step
5 create a file named reftest.list with the following: == foo.html bar.html you are now ready to run the test (but first you must go back to the root of firefox's source code tree): $ ./mach reftest path/to/reftest.list 2>&1 | grep reftest reftest pass: file:///users/ray/mozilla-central/path/to/foo.html $ congratulations!
...i can create
50 or 100 test files that have spaces between the element name and the attribute of a element for a bunch of different elements, add those to the list of tests to be run, and it causes no problems for anyone.
... maybe it will actually take
500 test files to actually check this behavior.
How Mozilla's build system works
0 created; 1 updated; 2187 unchanged total wall time:
5.03s; cpu time: 3.79s; efficiency: 7
5% what this is saying is that a total of 1,096 moz.build files were read.
...the whole process took
5.03s.
...this means we spent roughly 2
5% of the time waiting on i/o.
Creating Custom Events That Can Pass Data
(see bug 427
537) requirements in order to do this you must be able to do all of the following: download mozilla source code build mozilla creating custom firefox extensions with the mozilla build system.
... #include "nsidomevent.idl" [scriptable, uuid(08bea243-8a7b-4
554-9ee9-70d778
5d741b)] interface nsidommyevent: nsidomevent { //put members here!
... myevent = do_queryinterface(event); myevent->setmyproperty(4
5); //set my property of my event to (e.g.) 4
5.
SVG Guidelines
aks (see below for more details) adding a license header use double quotes whitespace and line breaks whitespace in addition to trailing whitespace at the end of lines, there are a few more cases more specific to svgs: trailing whitespaces in attribute values (usually seen in path definitions) excessive whitespace in path or polygon points definition examples this path: <path d=" m
5,
5 l1,1z "> can be cut down to this: <path d="m
5,
5 l1,1z"> similarly, this polygon: <polygon points=" 0,0 4,4 4,0 "/> can be cut down to this: <polygon points="0,0 4,4 4,0"/> line breaks you should only use line breaks for logical separation or if they help make the file readable.
...en the element is a descendant of a <clippath> unreferenced/unused clip paths, masks or defs (example) styling basics privilege short lowercase hex for colors don't use excessive precision for numeric values (usually comes from illustrator) use descriptive ids avoid inline styles and use class names or svg attributes examples here are some examples for excessive number precision:
5.000000e-02 → 0.0
5 (as seen here) -3.728928e-10 → 0 (as seen here) translate(0.000000, -1.000000) → translate(0, -1) (as seen here) as for descriptive ids: for gradients: svg_id1 → gradient1 (as seen here) use of class names avoid using a class if that class is only used once in the file if that class only sets a fill or a stroke, it's better to set the fill/stroke directly on...
...ub.com/svg/svgo alternatives to svgo: https://github.com/razrfalcon/svgcleaner https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixes the excessive number precision: https://simon.html
5.org/tools/js/svg-optimizer/ converts inline styles to svg attributes: https://www.w3.org/wiki/svgtidy raphaeljs has a couple of utilities that may be useful: raphael.js ...
Performance best practices for Firefox front-end engineers
as of bug 13
53206, you can also schedule idle events in non-dom contexts by using services.tm.idledispatchtomainthread.
... here’s a simple example, cribbed from this blog post by paul rouget: div1.style.margin = "200px"; // line 1 var height1 = div1.clientheight; // line 2 div2.classlist.add("foobar"); // line 3 var height2 = div2.clientheight; // line 4 dosomething(height1, height2); // line
5 at line 1, we’re setting some style information on a dom node that’s going to result in a reflow - but (at just line 1) it’s okay, because that reflow will happen after the style calculation.
...note that a significant number of the graphics team members are in the us eastern time zone (utc-
5 or utc-4 during daylight saving time), so let that information guide your timing when you ask questions in the gfx room .
Firefox UI considerations for web developers
apple-touch-icon and apple-touch-icon-precomposed icons with no size attribute are assumed to be the standard classic iphone size of
57x
57 pixels.
... <link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon" sizes="2
56x2
56" href="touch-icon-2
56x2
56.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires.
... usa today the only icon provided by usa today is its classic favicon: <link rel="shortcut icon" href="https://www.gannett-cdn.com/sites/usatoday/images/favicon.png"> since no rich icon is available, firefox creates a screenshot of the home page rendered
560 pixels wide.
HTMLIFrameElement.sendTouchEvent()
warning: removed in firefox 6
5.
... modifiers a number representing a key pressed at the same time the mouse button was clicked: 1 : alt 2 : ctrl 4 : shift 8 : meta 16 : alt gr 32 : caps lock 64 : fn 128 : num lock 2
56 : scroll
512 : symbol lock 1024 : win note: you can specify multiple key modifiers separated by a pipe symbol, for example 1 | 1014.
... examples var browser = document.queryselector('iframe'); browser.sendtouchevent("touchstart", [1], [x], [y], [2], [2], [20], [0.
5], 1, 0); specification not part of any specification.
Browser API
browser api methods removed in firefox 6
5 in firefox 6
5, several of the mozilla browser api methods were removed in an effort to cut down on domrequest usage in the browser, and remove the parts of the browser api that are no longer needed (it is used only by the firefox devtools at this point).
... see bug 1
503070 for more details.
... the methods removed in firefox 6
5 are: htmliframeelement.addnextpaintlistener() defines a handler to listen for the next mozafterpaint event in the browser <iframe>.
OS.File for the main thread
see bug 9248
58.
...if false use hex numbers, e.g., filename-a6
5bc0.ext.
... firefox 2
5 note tmppath is required in firefox 24 or lower version, but optional in firefox 2
5 or higher version nooverwrite if specified and true, and if path already exists, this function will throw an error without overwriting path.
QA phase
enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:7c
543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:2
5 2009 +0100 summary: added search bar strings now compare the local repository on your machine with the remote hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing the hg outgoing command compares the two repositories and lists all changesets...
...you can expect to see output like this: comparing with http://hg.mozilla.org/l10n-central/x-testing searching for changes changeset: 0:7c
543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:2
5 2009 +0100 summary: added search bar strings let's now push this changeset.
...quota: 979.7 kb in use, 1
50.0 mb available (0.64% used) your changeset has been successfully pushed to your repository!
Activity Monitor, Battery Status Menu and top
after
5–10 seconds, the "average energy impact" column is populated with values and the title bar changes to "activity monitor (applications in last 8 hours)".
... if you have top open during those
5–10 seconds you'll see that systemstats is running and using a lot of cpu, and so presumably the measurements are obtained from it.
... pid command %cpu idlew power
50300 firefox 12.9 278 26.6 762
56 plugin-container 3.4 1
59 11.3 1
51 coreaudiod 0.9 68 4.3 76
50
5 top 1.
5 1 1.6 763
54 activity monitor 1.0 0 1.0 the pid, command and %cpu columns are self-exp...
Leak-hunting strategies and tips
--jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28
555 for a slightly more interesting one.
...(this can happen equally with or without nscomptr.) see bug 38
586 and bug 287847 for examples.
... if you really need to debug leaks that involve js objects closely, you can get detailed printouts of the paths js uses to mark objects when it is determining the set of live objects by using the functions added in bug 378261 and bug 3782
55.
turbostat
sr", you need to run the following command: sudo modprobe msr the output is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.63 3694 3398 0 12.02 3.16 1.71 61.48 49 49 0.00 0.00 0.00 0.00 22.68 1
5.13 1.13 0 0 821 22.44 36
57 3398 0 9.92 2.43 2.2
5 62.96 39 49 0.00 0.00 0.00 0.00 22.68 1
5.13 1.13 0 4 708 19.14 3698 3398 0 13.22 1 1 743 20.26 3666 3398 0 21.40 4.01 1.42
52.90 49 1
5 1206 31.98 3770 3398 0 9.69 ...
... 2 2 784 21.29 3681 3398 0 11.78 3.10 1.13 62.70 40 2 6 782 21.1
5 3698 3398 0 11.92 3 3 702 19.14 3670 3398 0 8.39 3.09 2.03 67.36 39 3 7 648 17.67 3667 3398 0 9.8
5 the man page has good explanations of what each column measures.
... if you run with the -s option you get a smaller range of measurements that fit on a single line, like the following: avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt 3614 97.83 3694 3399 0 2.17 0.00 0.00 0.00 77 77 0.00 0.00 0.00 0.00 67.
50
57.77 0.46 ...
Midas
this also avoids problems with bug 1981
55.
... formatblock h1, h2, h3, h4, h
5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element.
... heading h1, h2, h3, h4, h
5, h6 selected block will be formatted as the given type of heading.
NSPR LOG MODULES
level is a numeric value between 0 and
5, with the values having the following meanings: 0 = pr_log_none: nothing should be logged 1 = pr_log_always: important; intended to always be logged 2 = pr_log_error: errors 3 = pr_log_warning: warnings 4 = pr_log_debug: debug messages, notices
5: everything!
...to enable all log module calls to pr_log, set the variable as follows: set nspr_log_modules=all:
5 timestamp including timestamp results in a timestamp of the form "201
5-01-1
5 21:24:26.049906 utc - " prefixing every logged line.
... set nspr_log_modules=timestamp,mozstorage:
5 set nspr_log_file=/tmp/foo.log logging with try server for mochitest, edit variable nspr_log_modules in testing/mochitest/runtests.py before pushing to try.
NSS Key Log Format
(see bug 11886
57.) notably, debian does not have this option enabled, see debian bug 842292.
... the tls 1.3 lines are supported since nss 3.34 (bug 1287711) and wireshark 2.4 (early_exporter_secret exists since nss 3.3
5, bug 1417331).
...it is 64, 96 or 128 characters for sha2
56, sha384 or sha
512 respectively.
NSS_3.11.10_release_notes.html
bug 291384: certutil -k behavior doesn't match usage bug 374247: modutil -disable command not disabling modules' slots bug 3844
59: certification path validation fails when authority key identifier extension contains key identifier bug 38
5946: can't import certificate into cert database in fips mode (certutil).
...nd handshake with ssl_forcehandshake bug 403240: threads hanging in nss_initlock bug 403888: memory leak in trustdomain.c bug 416067: certutil -l -h token doesn't report token authentication failure bug 417637: tstclnt crashes if -p option is not specified bug 421634: don't send an sni client hello extension bearing an ipv6 address bug 422918: add verisign class 3 public primary ca - g
5 to nss bug 4241
52: add thawte primary root ca to nss bug 424169: add geotrust primary certification authority root to nss bug 42
5469: add multiple new roots: geotrust bug 426
568: add comodo certification authority certificate to nss bug 431381: add network solutions certificate authority root to nss bug 431621: add diginotar root ca root to nss bug 431772: add network solutions and ...
...diginotar root certs to nss bug 442912: fix nssckbi version number on 3.11 branch bug 44304
5: fix pk11_generatekeypair for ecc keys on the 3.11 branch bug 4448
50: nss misbehaves badly in the presence of a disabled pkcs#11 slot bug 462948: lint warnings for source files that include keythi.h documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS 3.16 release notes
bug 90388
5: (cve-2014-1492) in a wildcard certificate, the wildcard character should not be embedded within the u-label of an internationalized domain name.
... see the last bullet point in rfc 612
5, section 7.2.
... bug 9
56082: if the nss_sdb_use_cache environment variable is set, skip the runtime test sdb_measureaccess.
NSS 3.19.1 release notes
nss 3.19.1 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_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138
554 / cve-201
5-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits.
... the minimum size of keys that nss will generate, import, or use has been raised: the minimum modulus size for rsa keys is now
512 bits the minimum modulus size for dsa keys is now 1023 bits the minimum modulus size for diffie-hellman keys is now 1023 bits bugs fixed in nss 3.19.1 this bugzilla query returns all the bugs fixed in nss 3.19.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.1 acknowledgements the nss ...
...development team would like to thank matthew green and karthikeyan bhargavan for responsibly disclosing the issue in bug 1138
554.
NSS 3.19.2 release notes
notable changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum key sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa keys, to
512 bits, and for dh keys, 1023 bits.
... this was done as part of a security fix for bug 1138
554 / cve-201
5-4000.
...the fix for bug 1138
554 has been moved to libssl, and will now only affect the minimum keystrengths used in ssl/tls.
NSS 3.19.3 release notes
notable changes in nss 3.19.3 the following ca certificates were removed cn = buypass class 3 ca 1 sha1 fingerprint: 61:
57:3a:11:df:0e:d8:7e:d
5:92:6
5:22:ea:d0:
56:d7:44:b3:23:71 cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı sha1 fingerprint: 79:98:a3:08:e1:4d:6
5:8
5:e6:c2:1e:1
5:3a:71:9f:ba:
5a:d3:4a:d9 cn = sg trust services racine sha1 fingerprint: 0c:62:8f:
5c:
55:70:b1:c9:
57:fa:fd:38:3f:b0:3d:7b:7d:d7:b9:c6 cn = tc trustcenter universal ca i ...
... sha-1 fingerprint: 6b:2f:34:ad:89:
58:be:62:fd:b0:6b:
5c:ce:bb:9d:d9:4f:4e:39:f3 cn = tc trustcenter class 2 ca ii sha-1 fingerprint: ae:
50:83:ed:7c:f4:
5c:bc:8f:61:c6:21:fe:68:
5d:79:42:21:1
5:6e the following ca certificate had the websites trust bit turned off cn = comsign secured ca sha1 fingerprint: f9:cd:0e:2c:da:76:24:c1:8f:bd:f0:f0:ab:b6:4
5:b8:f7:fe:d
5:7a the following ca certificates were added cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h
5 sha1 fingerprint: c4:18:f6:4d:46:d1:df:00:3d:27:30:13:72:43:a9:12:11:c6:7
5:fb cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha1 fingerprint: 8a:
5c:8c:ee:a
5:03:e6:0
5:
56:ba:d8:1b:d4:f6:c9:b0:ed:e
5:2f:e0 ...
... cn = certinomis - root ca sha1 fingerprint: 9d:70:bb:01:a
5:a4:a0:18:11:2e:f7:1c:01:b9:32:c
5:34:e7:88:a8 the version number of the updated root ca list has been set to 2.
5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
NSS 3.26.2 release notes
notable changes in nss 3.26.2 md
5 signature algorithms sent by the server in certificaterequest messages are now properly ignored.
... previously, with rare server configurations, an md
5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after.
... bugs fixed in nss 3.26.2 the following bug has been fixed in nss 3.26.2: ignore md
5 signature algorithms in certificate requests compatibility nss 3.26.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.27 release notes
the following ca certificates were removed cn = igc/a, o = pm/sgdn, ou = dcssi sha2
56 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 sha2
56 fingerprint: ec:c3:e9:c3:40:7
5:03:be:e0:91:aa:9
5:2f:41:34:8f:f8:8b:aa:86:3b:22:64:be:fa:c8:07:90:1
5:74:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-2
56 fingerprint: 3
5:ae:
5b:dd...
...:d8:f7:ae:63:
5c:ff:ba:
56:82:a8:f0:0b:9
5:f4:84:62:c7:10:8e:e9:a0:e
5:29:2b:07:4a:af:b2 cn = s-trust authentication and encryption root ca 200
5:pn sha-2
56 fingerprint: 37:d8:dc:8a:f7:86:78:4
5:da:33:44:a6:b1:ba:de:44:8d:8a:80:e4:7b:
55:79:f9:6b:f6:31:76:8f:9f:30:f6 o = verisign, inc., ou = class 1 public primary certification authority sha-2
56 fingerprint:
51:84:7c:8c:bd:2e:9a:72:c9:1e:29:2d:2a:e2:47:d7:de:1e:3f:d2:70:
54:7a:20:ef:7d:61:0f:38:b8:84:2c o = verisign, inc., ou = class 2 public primary certification authority - g2 sha-2
56 fingerprint: 3a:43:e2:20:fe:7f:3e:a9:6
5:3d:1e:21:74:2e:ac:2b:7
5:c2:0f:d8:98:03:0
5:bc:
50:2c:af:8c:2d:9b:41:a1 o = verisign, inc., ou = class 3 public primary certification authority ...
... sha-2
56 fingerprint: e7:68:
56:34:ef:ac:f6:9a:ce:93:9a:6b:2
5:
5b:7b:4f:ab:ef:42:93:
5b:
50:a2:6
5:ac:b
5:cb:60:27:e4:4e:70 o = equifax, ou = equifax secure certificate authority sha-2
56 fingerprint: 08:29:7a:40:47:db:a2:36:80:c7:31:db:6e:31:76:
53:ca:78:48:e1:be:bd:3a:0b:01:79:a7:07:f9:2c:f1:78 cn = equifax secure ebusiness ca-1 sha-2
56 fingerprint: cf:
56:ff:46:a4:a1:86:10:9d:d9:6
5:84:b
5:ee:b
5:8a:
51:0c:42:7
5:b0:e
5:f9:4f:40:bb:ae:86:
5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-2
56 fingerprint:
5f:0b:62:ea:b
5:e3:
53:ea:6
5:21:6
5:16:
58:fb:b6:
53:
59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/bu...
NSS 3.30.2 release notes
notable changes in nss 3.30.2 the following ca certificates were removed: o = japanese government, ou = applicationca sha-2
56 fingerprint: 2d:47:43:7d:e1:79:
51:21:
5a:12:f3:c
5:8e:
51:c7:29:a
5:80:26:ef:1f:cc:0a:
5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-2
56 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e
5:42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:
58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-2
56 fingerpr...
...int: 8d:e7:86:
55:e1:be:7f:78:47:80:0b:93:f6:94:d2:1d:36:8c:c0:6e:03:3e:7f:ab:04:bb:
5e:b9:9d:a6:b7:00 cn=microsec e-szigno root sha-2
56 fingerprint: 32:7a:3d:76:1a:ba:de:a0:34:eb:99:84:06:27:
5c:b1:a4:77:6e:fd:ae:2f:df:6d:01:68:ea:1c:4f:
55:67:d0 the following ca certificates were added: cn = d-trust root ca 3 2013 sha-2
56 fingerprint: a1:a8:6d:04:12:1e:b8:7f:02:7c:66:f
5:33:03:c2:8e:
57:39:f9:43:fc:84:b3:8a:d6:af:00:90:3
5:dd:94:
57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-2
56 fingerprint: 46:ed:c3:68:90:46:d
5:3a:4
5:3f:b3:10:4a:b8:0d:ca:ec:6
5:8b:26:60:ea:16:29:dd:7e:86:79:90:64:87:16 trust flags: websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep...
....tr, bel.tr, edu.tr, org.tr the version number of the updated root ca list has been set to 2.14 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 13
508
59 - march 2017 batch of root ca changes bug 134970
5 - implemented domain name constraints for ca: tubitak kamu sm ssl kok sertifikasi - surum 1 compatibility nss 3.30.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.39 release notes
previous versions of nss accepted an rsa pkcs#1 v1.
5 signature where the digestinfo structure was missing the null parameter.
... the following ca certificates were added: ou = globalsign root ca - r6 sha-2
56 fingerprint: 2cabeafe37d06ca22aba7391c0033d2
59829
52c4
53647349763a3ab
5ad6ccf69 cn = oiste wisekey global root gc ca sha-2
56 fingerprint: 8
560f91c3624daba9
570b
5fea0dbe36ff11a8323be94868
54fb3f34a
5571198d the following ca certificate was removed: cn = comsign sha-2
56 fingerprint: ae44
57b40d9eda96677b0d3c92d
57b
5177abd7ac10379
583
56d1e094
518be
5f2 the fo...
...llowing ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-2
56 fingerprint: 1
52a402bfcdf2cd
5480
54d227
5b39c7fca3ec0978078b0f0ea76e
561a6c7433e cn = certplus root ca g2 sha-2
56 fingerprint: 6cc0
5041e644
5e74696c4cfbc9f80f
543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-2
56 fingerprint:
56c77128d98c18d91b4cfdffbc2
5ee9103d47
58ea2abad826a90f34
57d460eb4 cn = opentrust root ca g2 sha-2
56 fingerprint: 2799
5829fe6a7
51
5c1bfe848f9c4761db16c22
59292
57bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-2
56 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f
5709a410f7
5b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an ss...
NSS 3.43 release notes
note that while the mechanism is present, post-handshake authentication is currently not tls 1.3 compliant due to bug 1
532312 notable changes in nss 3.43 the following ca certificates were added: cn = emsign root ca - g1 sha-2
56 fingerprint: 40f6af0346a99aa1cd1d
555a4e9cce62c7f9634603ee40661
5833dc8c8d00367 cn = emsign ecc root ca - g3 sha-2
56 fingerprint: 86a1ecba089c4a8d3bbe2734c612ba341d813e043cf9e8a862cd
5c
57a36bbe6b cn = emsign root ca - c1 sha-2
56 fingerp...
...rint: 12
5609aa301da0a249b97a8239cb6a34216f44dcac9f39
54b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-2
56 fingerprint: bc4d809b1
5189d78db3e1d8cf4f9726a79
5da1643ca
5f13
58e1ddb0edc0d7eb3 cn = hongkong post root ca 3 sha-2
56 fingerprint:
5a2fc03f0c83b090bbfa40604b0988446c7636183df9846e17101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1
528669 and bug 1
529308 - improve gyp build system handling bug 1
5299
50 and bug 1
521174 - improve nss s/mime tests for thunderbird bug 1
530134 - if docker isn't installed, try running a local clang-format as a fallback bug 1
531267 - enable fips mode automatically if the system fips mode flag is set bug 1
528262 - add a -j option to the strsclnt command to specify sig...
...schemes bug 1
513909 - add manual for nss-policy-check bug 1
531074 - fix a deref after a null check in seckey_setpublicvalue bug 1
517714 - properly handle esni with hrr bug 1
529813 - expose hkdf-expand-label with mechanism bug 1
53
5122 - align tls 1.3 hkdf trace levels bug 1
530102 - use getentropy on compatible versions of freebsd.
NSS 3.44 release notes
notable changes in nss 3.44 it is now possible to build nss as a static library (bug 1
543
54
5) initial support for building for ios.
... bugs fixed in nss 3.44 1
501
542 - implement checkarmsupport for android 1
531244 - use __builtin_bswap64 in crypto_primitives.h 1
533216 - cert_decodecertpackage() crash with netscape certificate sequences 1
533616 - sdb_getattributevaluenolock should make at most one sql query, rather than one for each attribute 1
531236 - provide accessor for certcertificate.dercert 1
536734 - lib/freebl/crypto_primitives.c assumes a big endian machine 1
532384 - in nss test certificates, use @example.com (not @bogus.com) 1
538479 - post-handshake messages after async server authentication break when using record layer separation 1
521
578 - x2
5519 support in pk11pars.c 1
54020
5 - freebl build fails with -dnss_disable_chachapoly 1
532312 - post-handshake auth doesn't interoperate with openssl 1
542741...
... - certutil -f crashes with segmentation fault 1
54692
5 - allow preceding text in try comment 1
534468 - expose chacha20 primitive 1418944 - quote cc/cxx variables passed to nspr 1
543
54
5 - allow to build nss as a static library 1487
597 - early data that arrives before the handshake completes can be read afterwards 1
548398 - freebl_gtest not building on linux/mac 1
548722 - fix some coverity warnings 1
5406
52 - softoken/sdb.c: logically dead code 1
549413 - android log lib is not included in build 1
537927 - ipsec usage is too restrictive for existing deployments 1
549608 - signature fails with dbm disabled 1
549848 - allow building nss for ios using gyp 1
549847 - nss's sqlite compilation warnings make the build fail on ios 1
550041 - freebl not building on ios simulator 1
5429
50 - maco...
NSS Sample Code sample3
pto operations */ slot = pk11_getinternalkeyslot(); if (!slot) { cout << "getinternalkeyslot failed" << endl; status = 1; goto done; } /* * part 1 - simple hashing */ cout << "part 1 -- simple hashing" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); /* create a context for hashing (digesting) */ context = pk11_createdigestcontext(sec_oid_md
5); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data, sizeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof digest); if (s != secsucces...
...128, 0); if (!key) { cout << "create key failed" << endl; goto done; } cout << (void *)key << endl; /* create parameters for crypto context */ /* note: params must be provided, but may be empty */ secitem noparams; noparams.type = sibuffer; noparams.data = 0; noparams.len = 0; /* create context using the same slot as the key */ // context = pk11_createdigestcontext(sec_oid_md
5); context = pk11_createcontextbysymkey(ckm_md
5, cka_digest, key, &noparams); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestkey(context, key); if (s != secsuccess) { cout << "digestkey failed" << endl; goto done; } s = pk11_digestop(c...
...digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 3 - mac (with secret key) */ cout << "part 3 -- mac (with secret key)" << endl; /* initialize data */ memset(data, 0xbc, sizeof data); context = pk11_createcontextbysymkey(ckm_md
5_hmac, cka_sign, key, &noparams); if (!context) { cout << "createcontextbysymkey failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data, sizeof data); if (s != secsuccess) { cout << "digestop failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len, sizeof ...
nss tech note7
nss supports pkcs #1 v1.
5.
...pkcs #1 v1.
5 block formatting question: in pkcs #1 v1.
5 (section 8.1 encryption-block formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.
5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_
5), pkcs1 v1.
5 padding is described like this: 02 || ps ...
...for example, 0x001234
56 is equal to 0x1234
56.
Notes on TLS - SSL 3.0 Intolerant Servers
see bug
59321.
...for up-to-date information, you can read this bug
59321 which keeps a list of tls/ssl 3.0 intolerant servers.
... add the information on such a server (software, url) to bug
59321 at bugzilla.
PKCS #11 Module Specs
rc
5 - this token should be used for all rc
5 operations which are not constrained by an existing key in another token.
... md
5 - this token should be used for all basic md
5 hashing.
... sample file: library= name="netscape internal crypto module" parameters="configdir=/u/relyea/.netscape certprefix= secmod=secmod.db" nss="flags=internal,pkcs11module trustorder=1 cipherorder=-1 ciphers= slotparams={0x1=[slotflags='rsa,dsa,dh,rc4,rc2,des,md2,md
5,sha1,ssl,tls,publiccerts,random'] 0x2=[slotflags='rsa' askpw=only]}" library=dkck32.dll name="datakey signasure 3600" nss="trustorder=
50 ciphers= " library=swft32.dll name="netscape software fortezza" parameters="keyfile=/u/relyea/keyfile" nss="trustorder=
50 ciphers=fortezza slotparams=0x1=[slotflags='fortezza']" library=core32.dll name="litronic netsign" softoken specific parameters the inter...
NSS tools : crlutil
list of possible algorithms: md2 | md4 | md
5 | sha1 | sha2
56 | sha384 | sha
512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...for example: 200
502041
53000z * add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (
5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
NSS Tools pk12util
symmetric cbc ciphers for pkcs #
5 v2: "des_cbc" "rc2-cbc" "rc
5-cbcpad" "des-ede3-cbc" --- default for key encryption "aes-128-cbc" "aes-192-cbc" "aes-2
56-cbc" "camellia-128-cbc" "camellia-192-cbc" "camellia-2
56-cbc" pkcs #12 pbe ciphers: "pkcs #12 pbe with sha1 and 128 bit rc4" "pkcs #12 pbe with sha1 and 40 bit rc4" "pkcs #12 pbe with sha1 and triple des cbc" "pkcs #12 pbe with sha1 and 128 bit rc2 cbc" "pkcs #12 pbe with ...
...sha1 and 40 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc4" "pkcs12 v2 pbe with sha1 and 40 bit rc4" --- default for pfx encryption in non-fips mode, no encryption on fips mode "pkcs12 v2 pbe with sha1 and 3key triple des-cbc" "pkcs12 v2 pbe with sha1 and 2key triple des-cbc" "pkcs12 v2 pbe with sha1 and 128 bit rc2 cbc" "pkcs12 v2 pbe with sha1 and 40 bit rc2 cbc" pkcs #
5 pbe ciphers: "pkcs #
5 password based encryption with md2 and des cbc" "pkcs #
5 password based encryption with md
5 and des cbc" "pkcs #
5 password based encryption with sha1 and des cbc" it should be noted that the the crypto provider may be the softtoken module or an external hardware module.
... error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error 6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 - unicode conversion error 12 - temporary file creation error 13 - pkcs11 get slot error 14 - pkcs12 decoder start error 1
5 - error read from import file 16 - pkcs12 decode error 17 - pkcs12 decoder verify error 18 - pkcs12 decoder validate bags error 19 - pkcs12 decoder import bags error 20 - key db conversion version 3 to version 2 error 21 - cert db conversion version 7 to version
5 error 22 - cert and key dbs patch error 23 - get default cert db error 24 - find cert by nickname error 2
5 - create export context err...
NSS tools : crlutil
list of possible algorithms: md2 | md4 | md
5 | sha1 | sha2
56 | sha384 | sha
512 -n nickname specify the nickname of a certificate or key to list, create, add to a database, modify, or validate.
...for example: 200
502041
53000z * add an extension to a crl or a crl certificate entry: addext extension-name critical/non-critical [arg1[arg2 ...]] where: extension-name: string value of a name of known extensions.
... reasoncode non-critical code where: reasoncode: identifies the name of an extension non-critical: should be set to 0 since this is non-critical extension code: the following codes are available: unspecified (0), keycompromise (1), cacompromise (2), affiliationchanged (3), superseded (4), cessationofoperation (
5), certificatehold (6), removefromcrl (8), privilegewithdrawn (9), aacompromise (10) * add invalidity date extension: the invalidity date is a non-critical crl entry extension that provides the date on which it is known or suspected that the private key was compromised or that the certificate otherwise became invalid.
Installing Pork
prerequisites flex >2.
5.4 (flex-old on ubuntu) bison gcc pork uses gcc to generate .i/.ii files (preprocessed c/c++) for elsa to parse.
...gcc 4.3 should also work fairly well, but there may be
5 or so files that elsa can't parse.
... index: src/set_mcpp.sh =================================================================== --- src/set_mcpp.sh (revision 78) +++ src/set_mcpp.sh (working copy) @@ -3
5,14 +3
5,14 @@ echo " cd ${inc_dir}/mcpp-gcc" cd ${inc_dir}/mcpp-gcc if test !
INT_FITS_IN_JSVAL
obsolete since javascript 1.8.
5this feature is obsolete.
... starting in spidermonkey 1.8.
5, jsval can store a full 32-bit integer, so this check isn't needed any longer for 32-bit integers.
...*/ } else { js_reporterror(cx, "integer out of range: %d", item); } see also int_to_jsval changeset -
527
50:0
5bd86e3
559a ...
INT_TO_JSVAL
please use js::int32value instead in spidermonkey 4
5 or later.
... before spidermonkey 1.8.
5, not all integers can be stored in a jsval; use int_fits_in_jsval to test.
... starting in spidermonkey 1.8.
5, jsval can store a full 32-bit integer, so this check isn't needed any longer for 32-bit integers.") }} if i does not fit into a jsval (see int_fits_in_jsval), the behavior is undefined.
JSConstDoubleSpec
syntax template<typename t> struct jsconstscalarspec { const char *name; t val; /* uint8_t flags; // obsolete from jsapi 3
5 uint8_t spare[3]; // obsolete from jsapi 3
5 */ }; typedef jsconstscalarspec<double> jsconstdoublespec; typedef jsconstscalarspec<int32_t> jsconstintegerspec; // added in spidermonkey 38 name type description val double or int32_t value for the double or integer.
...obsolete since jsapi 3
5 currently these can be 0 or more of the following values or'd: jsprop_enumerate: property is visible in for loops.
...obsolete since jsapi 3
5 description jsconstdoublespecs is used to define a set of double values that are assigned as properties to an object using js_defineconstdoubles.
JS_ExecuteScript
syntax bool js_executescript(jscontext *cx, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 4
5 bool js_executescript(jscontext *cx, js::handlescript script); // added in spidermonkey 4
5 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mutablehandlevalue rval); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscontext *cx, js::handleobject obj,...
... js::handlescript script); // obsolete since jsapi 39 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsscript*> script); // added in spidermonkey 4
5 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsscript*> script); // added in spidermonkey 31, obsoleted since jsapi 39 name type description cx jscontext * the context in which to execute the script.
... see also mxr id search for js_executescript mxr id search for js::cloneandexecutescript js::compile js::evaluate bug 993438 bug 114
5294 -- removed obj from js::cloneandexecutescript.
JS_GetGlobalForScopeChain
obsolete since jsapi 2
5this feature is obsolete.
... this article covers features introduced in spidermonkey 1.8.
5 returns the global object for the active function on the context.
...see also js_getglobalforobject js::currentglobalornull bug 89924
5 ...
JS_PropertyStub
syntax bool js_propertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp, js::objectopresult &result); // added in spidermonkey 4
5 bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // obsolete since jsapi 39 bool js_resolvestub(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // obsolete since jsapi 37 bool js_deletepropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool *suc...
...it attempts to call the object's valueof and tostring functions, in the order determined by the specified type, in accordance with the default defaultvalue algorithm in es
5 §8.12.8.
... see also mxr id search for js_propertystub mxr id search for js_strictpropertystub jspropertyop jsstrictpropertyop bug 11031
52 - removed js_deletepropertystub, js_enumeratestub, js_resolvestub, and js_convertstub bug 736978 - removed js_finalizestub bug 1113369 -- added result parameter ...
JS_SameValue
this article covers features introduced in spidermonkey 1.8.1 determines if two jsvals are the same, as determined by the samevalue algorithm in ecmascript 262,
5th edition.
...the samevalue algorithm is equivalent to the following javascript: function samevalue(v1, v2) { if (v1 === 0 && v2 === 0) return 1 / v1 === 1 / v2; if (v1 !== v1 && v2 !== v2) return true; return v1 === v2; } syntax // added in spidermonkey 4
5 bool js_samevalue(jscontext *cx, js::handle<js::value> v1, js::handle<js::value> v2, bool *same); // obsolete since jsapi 39 bool js_samevalue(jscontext *cx, jsval v1, jsval v2, bool *same); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... see also mxr id search for js_samevalue js_strictlyequal js_looselyequal bug 113204
5 -- use handle ...
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 1
5 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
... mxr id search for jsoption_xml jsoption_allow_xml added in spidermonkey 1
5 if this is off, e4x syntax isn't supported no matter what version number is set.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 1
5 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the comment-hiding hack used in html script tags.
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, which were themselves seeded from the 1.8.
5 release notes, so lots of the information here isn't actually new to spidermonkey 17.
...you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md
5 checksum: 20b6f8f1140ef6e47daa3b1696
5c9202).
... — 2
5 march 2013 platform support spidermonkey 17 is supported on all the platforms where firefox 17 runs.
Shell global objects
this page lists variables and functions available on spidermonkey
53.
... values: 0: (none) normal amount of collection (resets all modes) 1: (poke) collect when roots are added or removed 2: (alloc) collect when every n allocations (default: 100) 3: (framegc) collect when the window paints (browser only) 4: (verifierpre) verify pre write barriers between instructions
5: (frameverifierpre) verify pre write barriers between paints 6: (stackrooting) verify stack rooting 7: (generationalgc) collect the nursery every n nursery allocations 8: (incrementalrootsthenfinish) incremental gc in two slices: 1) mark roots 2) finish collection 9: (incrementalmarkallthenfinish) incremental gc in two slices: 1) mark all 2) new marking and finish 10: (increme...
...ntalmultipleslices) incremental gc in multiple slices 11: (incrementalmarkingvalidator) verify incremental marking 12: (elementsbarrier) always use the individual element post-write barrier, regardless of elements size 13: (checkhashtablesonminorgc) check internal hashtables on minor gc 14: (compact) perform a shrinking collection every n allocations 1
5: (checkheapaftergc) walk the heap to check its integrity after every gc 16: (checknursery) check nursery integrity on minor gc schedulegc([num | obj]) if num is given, schedule a gc after num allocations.
WebReplayRoadmap
similarly, when the debugger supports dom mutation breakpoints (bug 1
547692), the recording can be searched for dom mutations, and mutations can be logged to the console and seeked to later.
... media elements (bug 1304146) web audio (bug 1304147) webrtc (bug 1304149) webassembly (bug 1481007) webgl (bug 1
506467) support more operating systems (not yet implemented) only macos is supported right now.
... this is partially underway and is tracked in bug 1
521
566.
Secure Development Guidelines
ain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be >
512, cut it off there if the input should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an html document from another site victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online ba...
... bits maximum value that can be represented data type 8 28-1 2
55 char 16 216-1 6
553
5 short 32 232-1 429496729
5 int 64 264-1 18446744073709
55161
5 long long integer overflows/underflows example of an integer overflow int main() { unsigned int foo = 0xffffffff; printf(“foo: 0x%08x\r\n”, foo); foo++; printf(“foo: 0x%08x\r\n”, foo); } integer overflows/underflows ...
... } integer overflows/underflows: prevention difficult to fix: you need to check every arithmetic operation with user input arithmetic libraries like safeint can help signedness issues bits data type range 8 signed char -128 - +127 unsigned char 0 - +2
55 16 signed short -32768 - +32767 unsigned short 0 - +6
553
5 32 signed int -2147483648 - +2147483647 unsigned int 0 - +429496729
5 64 signed long long -92233720368
5477
5808 - +92233720368
5477
5807 unsigned long long 0 - +18446744073709
55161
5 int vuln_funct(int size) { char buf[1024]; if (si...
Signing Mozilla apps for Mac OS X
you can find it by running this command in the terminal: openssl x
509 -text -noout -inform der -in devloperid_application.cer | grep subject putting it all together, you'll wind up using a command similar to the one below to sign your app.
... codesign -s mac-testing -fv \ --keychain /users/user/library/keychains/mykeychain.keychain \ --resource-rules ./application.app/contents/_codesignature/coderesources \ --requirements '=designated => identifier "org.you.yourapp" and ( (anchor apple generic and certificate leaf[field.1.2.840.11363
5.100.6.1.9] ) or (anchor apple generic and certificate 1[field.1.2.840.11363
5.100.6.2.6] and certificate leaf[field.1.2.840.11363
5.100.6.1.13] and certificate leaf[subject.ou] = "43aq936h96"))' \ application.app or if you're using v2 signing, the command might look like this: codesign -s mac-testing -fv --deep \ --keychain /users/user/library/keychains/mykeychain.keychain \ ...
... --requirements '=designated => ( (anchor apple generic and certificate leaf[field.1.2.840.11363
5.100.6.1.9] ) or (anchor apple generic and certificate 1[field.1.2.840.11363
5.100.6.2.6] and certificate leaf[field.1.2.840.11363
5.100.6.1.13] and certificate leaf[subject.ou] = "43aq936h96"))' \ application.app depending on your keychain preferences, the codesign command may display a popup asking for the password for the specified keychain.
Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith1
5@littlesvr.ca> overview apng is an extension of the portable network graphics (png) format, adding support for animated images.
... 2
5 blend_op byte type of frame area rendering for this frame.
... from 0.4 reintroduced num_frames into actl moved sequence_number from adat into fctl changed contents of adat to fctl+idats+fend added clarifications on what's allowed and what isn't renamed actl to actl, fctl to fctl, adat to fdat and fend to fend to comply with the png spec chunk naming requirements from 0.
5 added the ihdr and plte crcs to the actl chunk the actl fctl and adat are now copy safe, renamed them to actl, fctl and adat from 0.6 the fdat chunk is no longer a container for other chunks, but rather a replacement for an idat chunk removed the fend chunk added a sequence number field to fdat reintroduced the width and height fields in fctl from 0.7 removed hidden f...
Accessing the Windows Registry Using XPCOM
support in firefox 1.
5 or newer in firefox 1.
5, a new api was added, nsiwindowsregkey, which provides extensive registry functionality.
...if you are writing an extension that only needs to support firefox 1.
5 or newer, then you only need to read this section.
...the following skeleton code will allow you to determine which interface to use: if ("@mozilla.org/windows-registry-key;1" in components.classes) { // firefox 1.
5 or newer } else if ("@mozilla.org/winhooks;1" in components.classes) { // seamonkey or other older non-toolkit application } else if ("@mozilla.org/browser/shell-service;1" in components.classes) { var wss = components.classes["@mozilla.org/browser/shell-service;1"] .getservice(components.interfaces.nsiwindowsshellservice); if ("getregistryentry" in wss) { // firef...
Creating the Component Code
static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; // generate unique id here with uuidgen #define sample_cid \ { 0x777f71
50, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x
5e, 0xab, 0x2
5, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; nsimodule.h and nsifactory.h are required to build your module successfully.
...uuidgen is a command-line tool that returns a unique 128-bit number when you call it with no arguments: $ uuidgen ce32e3ff-36f8-42
5f-94be-d8
5b26e634ee on windows, a program called guidgen.exe does the same thing and also provides a graphical user interface if you'd rather point and click.
...ine mozilla_strict_api #include "nsimodule.h" #include "nsifactory.h" #include "nsicomponentmanager.h" #include "nsicomponentregistrar.h" static const nsiid kimoduleiid = ns_imodule_iid; static const nsiid kifactoryiid = ns_ifactory_iid; static const nsiid kisupportsiid = ns_isupports_iid; static const nsiid kicomponentregistrariid = ns_icomponentregistrar_iid; #define sample_cid \ { 0x777f71
50, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x
5e, 0xab, 0x2
5, 0xb3, 0x22, 0xaa}} static const nscid ksamplecid = sample_cid; class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **aresult); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; sample::sample...
Using XPCOM Utilities to Make Things Easier
modules such as the networking libraries in gecko ("necko") have over
50 components declared in a single nsmodulecomponentinfo array like this.
... weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x777f71
50, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x
5e, 0xab, 0x2
5, 0xb3, 0x22, 0xaa}} class sample: public nsisupports { public: sample(); virtual ~sample(); ns_decl_isupports }; sample::sample() { // note: in newer versions of gecko (1.3 or later) // you don't have to do this: ns_init_isupports(); } sample::~sample() { } ns_impl_isupports1(sample, nsisupports); ns_generic_factory_cons...
...in c++, the string literal "xpcom", for example, consists of 6 consecutive bytes, where `x' is at byte offset zero and a null character is at byte offset
5.
nsIRegistry
try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (
530) profiles/foo (1046) profiles/bar (1
518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
...js> rs.getstringutf8(
530, "directory") //
530: key corresponding with profiles/default the output is something like: /home/lion/.mozilla/default/awp83kud.slt boo-yah!
...js> rs.setstringutf8(
530, "directory", "/home/lion/somewhere/else") js> rs.getstringutf8(
530, "directory") /home/lion/somewhere/else yes!
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="4
56,
5,60
5,
53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="41
5,101,497,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="
521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,...
...197,289,24
5" href="http://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="31
5,197,437,24
5" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,24
5" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="63
5,197,787,24
5" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,28
5,341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="
5,389,227,437" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt=...
..."" coords="2
51,389,43
5,437" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,44
5,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace repl...
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="41
5,
5,
553,
53" href="http://developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="379,101,4
51,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="47
5,101,63
5,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="1
51,197,2
57...
...,24
5" href="http://developer.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,396,24
5" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,
559,24
5" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="
583,197,727,24
5" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="1
52,293,2
53,341" href="http://developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="
5,389,192,437" href="http://developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,400,437"...
... href="http://developer.mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,40
5,341" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appen...
RefPtr
refptr (formerly known as nsrefptr, see bug 120724
5) is a general class to implement reference counting pointers for objects.
...bug 7
56640 is on file to enforce this rule but hasn't yet been fixed.
...there are no technical problems with doing so, and in some cases it may be necessary (see bug 7
56640 comment 1).
nsIAccessibleText
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long ...
... boundary_line_start
5 boundary_line_end 6 boundary_attribute_range 7 coordinate type constants obsolete since gecko 1.9 (firefox 3)this feature is obsolete.
... constant value description coord_type_screen 0 coord_type_window 1 methods addselection() void addselection( in long startoffset, in long endoffset ); parameters startoffset endoffset getattributerange() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) get the accessible and start/end offsets around the given offset.
nsIAnnotationService
expire_with_history
5 for annotations that only live as long as the uri is in history (for example, has > 0 visits).
... type_int64
5 int64 type constant.
... note: use of value "1" is omitted due to it's temporary use as expire_never in bug 3194
55.
nsIDownloadProgressListener
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) to use simply implement this interface in your code, then call nsidownloadmanager.addlistener() to start listening.
... onlocationchange() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) void onlocationchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads.
... onstatuschange() obsolete since gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) called when the status of a download request has changed.
nsIHttpChannel
starting from gecko 48 (firefox 48.0 / thunderbird 48.0 / seamonkey 2.4
5) they will return a ns_error_failure.
... warning: calling setresponseheader() while visiting response headers has undefined behavior until gecko 48 (firefox 48.0 / thunderbird 48.0 / seamonkey 2.4
5).
...since firefox
50 the preference defaults to true.
nsINetworkLinkService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.
5) implemented by: @mozilla.org/network/network-link-service;1 as a service: var networklinkservice = components.classes["@mozilla.org/network/network-link-service;1"] .getservice(components.interfaces.nsinetworklinkservice); attributes attribute type description islinkup boolean this is set to true when the system is believed to have a usable network connection.
...android support was backed out due to perceived security concerns, see bug 6910
54.
... link_type_2g
5 a '2g' mobile connection (for example, gsm, gprs, edge).
nsIPluginHost
void findproxyforurl( in string aurl, out string aresult ); parameters aurl aresult native code only!getplugin nsiplugin getplugin( in string amimetype ); parameters amimetype return value getplugincount() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void getplugincount( out unsigned long aplugincount ); parameters aplugincount native code only!getpluginfactory obsolete since gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0)this feature is obsolete.
... void instantiatedummyjavaplugin( in nsiplugininstanceowner aowner ); parameters aowner native code only!instantiateembeddedplugin void instantiateembeddedplugin( in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner ); parameters amimetype aurl aowner instantiateembededplugin() obsolete since gecko 1.8 (firefox 1.
5 / thunderbird 1.
5 / seamonkey 1.0) void instantiateembededplugin( in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner ); parameters amimetype aurl aowner native code only!instantiatefullpageplugin void instantiatefullpageplugin( in string amimetype, in nsiuri auri, in nsiplugininstanceowner aowner, out nsistreamlistener astreamlistener ...
...it will *always malloc()* output buffer (caller is responsible to free it) if input buffer starts with lf, which comes from 4.x spec http://developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#10077
54 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data.
nsIPropertyBag
goodies obtained from window.navigator are: appcodename:"mozilla" appname:"netscape" appversion:"
5.0 (windows)" battery:batterymanager buildid:"20140
529161749" cookieenabled:true donottrack:"yes" geolocation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservic...
...e:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows nt
5.1" platform:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/
5.0 (windows nt
5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype from here we can easily see the operating system version.
...to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output
5.1 services.sysinfo.getproperty("name"); //output windows_nt services.sysinfo.getproperty("arch"); //output x86 services.sysinfo.getproperty("haswindowstouchinterface"); //outputs false or true if windows touch is there consult the uxp repo (//github.com/realityripple/uxp/blob/master/xpcom/base/nssysteminfo.cpp) for the properties supported.
nsISelection2
1.0 66 introduced gecko 1.8 obsolete gecko 8.0 inherits from: nsiselection last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface.
...a value of
50 centers the frame vertically.
...a value of
50 centers the frame horizontally .
nsISmsRequestManager
nsismsrequestmanager dom/sms/interfaces/nsismsrequestmanager.idlscriptable used to manage sms related requests and notifications for the websms api 1.0 66 introduced gecko 13.0 inherits from: nsisupports last changed in gecko 1
5.0 (firefox 1
5.0 / thunderbird 1
5.0 / seamonkey 2.12) implemented by: @mozilla.org/sms/smsrequestmanager;1.
... notifymarkedmessageread() requires gecko 1
5.0(firefox 1
5.0 / thunderbird 1
5.0 / seamonkey 2.12) void notifymarkedmessageread( in long arequestid in bool aread ); parameters arequestid a number representing the id of the request.
... notifymarkmessagereadfailed() requires gecko 1
5.0(firefox 1
5.0 / thunderbird 1
5.0 / seamonkey 2.12) void notifymarkmessagereadfailed( in long arequestid in long aerror ); parameters arequestid a number representing the id of the request.
nsISound
please use the html
5 <audio> tag instead.
... event_menu_execute
5 a menu item is executed.
...please use the html
5 <audio> tag instead.
nsIToolkitProfileService
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) note: starting in gecko 1.9.1, this service is implemented by @mozilla.org/toolkit/profile-service;1.
...os.file is available from gecko 18 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.1
5).
...this may throw an ns_error_failure (0x8000400
5) when trying to get the current profile if it's unavailable or if permissions restrict access.
nsIWebNavigation
void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiinputstream postdata, in nsiinputstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 6
553
5 this flag defines the range of bits that may be specified.
... load_flags_bypass_cache 2
56 this flag specifies that the local web cache should be bypassed, but an intermediate proxy cache could still be used to satisfy the load.
... load_flags_bypass_proxy
512 this flag specifies that any intermediate proxy caches should be bypassed (that is, that the content should be loaded from the origin server).
nsIXPCScriptable
last changed in gecko 1.9.1 (firefox 3.
5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); prbool add...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 want_getproperty 1 <<
5 want_setproperty 1 << 6 want_enumerate 1 << 7 want_newenumerate 1 << 8 indicates that the object wants to have its newenumerate method called.
... want_convert 1 << 10 want_finalize 1 << 11 want_checkaccess 1 << 12 want_call 1 << 13 want_construct 1 << 14 want_hasinstance 1 << 1
5 want_trace 1 << 16 use_jsstub_for_addproperty 1 << 17 use_jsstub_for_delproperty 1 << 18 use_jsstub_for_setproperty 1 << 19 dont_enum_static_props 1 << 20 dont_enum_query_interface 1 << 21 dont_ask_instance_for_scriptable 1 << 22 classinfo_interfaces_only 1 << 23 allow_prop_mods_during_resolve 1 << 24 allow_prop_mods_to_prototype 1 << 2
5 dont_share_prototype 1 << 26 dont_reflect_interface_names 1 << 27 want_equality 1 << 28 want_outer_object 1 << 29 want_inner_object 1 << 30 rese...
nsMsgViewCommandType
selectall 1
5 select all messages.
... label4 2
5 attach a label to the selected messages.
... label
5 26 attach a label to the selected messages.
XPIDL
table 4: basic interface attributes attribute interpretation uuid(1234
5678-fedc-ba98-76
54-01234
56789ab) this is the internal way this interface is accessed; it must be unique, and the uuid must be generated when creating the interface.
...in table
5, the columns on the far right indicate whether changes to a specific attribute affect source compatibility, binary compatibility, or both.
... table
5: optional interface attributes attribute valid for methods valid for attributes effect changes source compatibility?
CData
here is a method to read "malformed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemalformed, it is an attempt at readingmalformed function readaschar8thenaschar16(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of
500 // stringptr is either char or jschar, if you know its jschar for sure, pass 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried getting known_len from stringptr but its not possible, it has be known, i tried this: //"stringptr.contents.tostring()" "9
5" //"stringptr.tostring()"...
... "ctypes.unsigned_char.ptr(ctypes.uint64("0x7f73d
5c876
50"))" // 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 this by reading a string like this: "_scratchpad/entehandle.js at master · noitidart/_scratchpad mdnfirefox" at js array position 36 (so 37 if count from 1), we see 183, and at 77 we see char code of 0 if casted to unsigned_char, if casted to char we see -73 at pos 36 but pos 77 still 0, if casted to jschar we see chineese characters in all spots expect spaces even null terminator is a chineese character c...
Scripting plugins - Plugins
this extension will also let plugins access the script objects in the browser, and is thus a much stronger and more flexible api.) the information in this section applies to firefox 1.0 and mozilla 1.7.
5 and newer versions.
... the new nppvariable enumeration is defined in npapi.h as: nppvpluginscriptablenpobject = 1
5 threading model this api is not designed to be thread safe.
... the new npnvariable enumerations are defined in npapi.h as: npnvwindownpobject = 1
5, npnvpluginelementnpobject = 16 how to call plugin native methods the following html code will do the job: <embed type="application/plugin-mimetype"> <script> var embed = document.embeds[0]; embed.nativemethod(); alert(embed.nativeproperty); embed.nativeproperty.anothernativemethod(); </script> the api extensions the api extensions are based on four new structs: npstring npvari...
Accessibility Inspector - Firefox Developer Tools
as of firefox 6
5, viewing this information for some foreground text that has a complex background image (e.g.
...for example: in this example, the contrast ranges from 4.72 to
5.98.
... the numbers are followed by aaa and a checkmark in green, indicating that the large text has a contrast ratio of 4.
5:1 or more, meeting the criteria for enhanced contrast, or level aaa.
Debugger.Memory - Firefox Developer Tools
0 is equivalent to “never”, 1 is “always”, and .0
5 would be “one out of twenty”.
...its default value is
5000.
... source metadata generated from file: js/src/doc/debugger/debugger.memory.md watermark: sha2
56:2c1
529d6932efec8c624a6f1f366b09cb7fce62
5a64686
57fab81788240bc7ae changeset: e91b2c8
5aacd ...
Debugger.Object - Firefox Developer Tools
(this function behaves like the standard object.isextensible function, except that the object inspected is implicit and in a different compartment from the caller.) copy(value) apply the html
5 “structured cloning” algorithm to create a copy ofvalue in the referent’s global object (and thus in the referent’s compartment), and return a debugger.object instance referring to the copy.
... if the referent is an inner object (say, an html
5 window object), return the corresponding outer object (say, the html
5 windowproxy object).
... source metadata generated from file: js/src/doc/debugger/debugger.object.md watermark: sha2
56:7ae16a834e0883a9
5b4e0d227193293f6b6e4e4dd812c2
570372a39c4c04897b changeset:
557246
5c08a9+ ...
Debugger.Script - Firefox Developer Tools
a[i] = i*i; calling getalloffsets() on that code might yield an array like this: [[0], [
5, 20], , [10]] this array indicates that: the first line’s code starts at offset 0 in the script; the for statement head has two entry points at offsets
5 and 20 (for the initialization, which is performed only once, and the loop test, which is performed at the start of each iteration); the third line has no code; and the fourth line begins at offset 10.
... a[i] = i*i; calling getallcolumnoffsets() on that code might yield an array like this: [{ linenumber: 0, columnnumber: 0, offset: 0 }, { linenumber: 1, columnnumber:
5, offset:
5 }, { linenumber: 1, columnnumber: 10, offset: 20 }, { linenumber: 3, columnnumber: 4, offset: 10 }] if the instance refers to webassembly code, throw a typeerror.
... source metadata generated from file: js/src/doc/debugger/debugger.script.md watermark: sha2
56:8816a4e8617be32c4ce7f3ae
54970fe9c8a7d24817
5d21
5a8990ccff23e6efa9 changeset:
557246
5c08a9+ ...
Tutorial: Set a breakpoint - Firefox Developer Tools
this tutorial was tested against firefox
58 beta and nightly.
... it does not work in firefox
57.
... source metadata generated from file: js/src/doc/debugger/tutorial-breakpoint.md watermark: sha2
56:c8dd4bb69972b
58e
59fcbe6870499206463a
5e330fda2
5f1214893
59
5a1c01d0 changeset: ffa77
5dd
5bd4 ...
Deprecated tools - Firefox Developer Tools
scratchpad scratchpad is deprecated as of firefox 70 (bug 1
56
5380), and will be removed as of firefox 72 (bug 1
519103).
... webide and connect page webide was deprecated as of firefox 69 disabled as of firefox 70 (bug 1
5394
51).
... removed as of firefox 71 (bug 1
539462).
All keyboard shortcuts - Firefox Developer Tools
2 cmd + opt + i or f12 ctrl + shift + i or f12 open web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f
5 shift + f
5 * shift + f
5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m open browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt ...
...before firefox
55, the keyboard shortcut was ctrl + shift + q (cmd + opt + q on a mac).
...to use a remapped key as a standard function key, hold the function key down as well (so to open the profiler, use shift + function + f
5).
Basic operations - Firefox Developer Tools
opening the memory tool before firefox
50, the memory tool is not enabled by default.
... to enable it, open the developer tool settings, and check the "memory" box under "default firefox developer tools": from firefox
50 onwards, the memory tool is enabled by default.
... comparing snapshots starting in firefox 4
5, you can diff two heap snapshots.
Dominators view - Firefox Developer Tools
it looks something like this: the dominators view consists of two panels: the dominators tree panel shows you which nodes in the snapshot are retaining the most memory the retaining paths panel (new in firefox 47) shows the
5 shortest retaining paths for a single node.
... the retaining paths panel shows you, for a given node, the
5 shortest paths back from this node to a gc root.
... we'll use the monster allocation example, which creates three arrays, each containing
5000 monsters, each monster having a randomly-generated name.
Flame Chart - Firefox Developer Tools
the screenshot above covers the period from 143
5ms to a little past 146
5ms.
...in the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this: sortall() // 8 -> sort() // 37 -> bubblesort() // 134
5 -> swap() // 2
52 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 first, we'll just select the whole section in which the program was active: at the top, colored purple, is the sortall() call, running throughout the program from start to finish.
...if you counted them all, the call tree view tells us that you'd see 2
53 of them.
AnalyserNode.frequencyBinCount - Web APIs
therefore, it will be one of 16, 32, 64, 128, 2
56,
512, 1024, 2048, 4096, 8192, and 16384.
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
... analyser.fftsize = 2
56; 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); var barwidth = (width / bufferlength) * 2.
5 - 1; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',
50,
50)'; canvasctx.fillrec...
AnalyserNode.getByteFrequencyData() - Web APIs
the frequency data is composed of integers on a scale from 0 to 2
55.
...for more examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
... analyser.fftsize = 2
56; 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); var barwidth = (width / bufferlength) * 2.
5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',
50,
50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barw...
AnalyserNode.maxDecibels - Web APIs
when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of maxdecibels or higher will be returned as +1.0 or 2
55, respectively.
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
... analyser.fftsize = 2
56; 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); var barwidth = (width / bufferlength) * 2.
5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',
50,
50)'; canvasctx.fillrect(x,...
AnalyserNode.smoothingTimeConstant - Web APIs
for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
... var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.8
5; ...
... analyser.fftsize = 2
56; 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); var barwidth = (width / bufferlength) * 2.
5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',
50,
50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment web audio apithe definition...
Animation.startTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 animation.starttime; // 23.404 // 24.192 // 2
5.
514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animation.starttime; // 49.8 //
50.6 //
51.7 // ...
AnimationPlaybackEvent.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 playbackevent.currenttime; // 23.404 // 24.192 // 2
5.
514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled playbackevent.currenttime; // 49.8 //
50.6 //
51.7 // ...
AnimationTimeline.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 animationtimeline.currenttime; // 23.404 // 24.192 // 2
5.
514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled animationtimeline.currenttime; // 49.8 //
50.6 //
51.7 // ...
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" f...
...ill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="1
51" y="1" width="90" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,2
5 2
51,20 2
51,30 241,2
5" stroke="#d4dde4" fill="none"/><line x1="2
51" y1="2
5" x2="281" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco...
...,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="
521,2
5 531,20
531,30
521,2
5" stroke="#d4dde4" fill="none"/><line x1="
531" y1="2
5" x2="
561" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="
561" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobu...
AudioContext.baseLatency - Web APIs
example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.1
5 specifications specification status comment web audio apithe definition of 'baselatency' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaselatency experimentalchrome full support
58edge full support ≤79firefox full support 70ie no support noopera full support 4
5safari no support nowebview android full support ...
...
58chrome android full support
58firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
AudioListener.dopplerFactor - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.forwardX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.forwardY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.forwardZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.positionX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.positionY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.positionZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.speedOfSound - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.upX - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.upY - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener.upZ - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioListener - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
AudioParam.setValueAtTime() - Web APIs
when the buttons are pressed, the currgain variable is incremented/decremented by 0.2
5, then the setvalueattime() method is used to set the gain value equal to currgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = ...
...eryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.queryselector('.set-target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.
5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.
5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick targetattimeplus.onclick = function() { currgain += 0.2
5; gainnode.gain.setvalueattime(currgain...
..., audioctx.currenttime + 1); } targetattimeminus.onclick = function() { currgain -= 0.2
5; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment web audio apithe definition of 'setvalueattime' in that specification.
AudioParamDescriptor - Web APIs
defaults to -3.402823
5e38.
...defaults to 3.402823
5e38.
...udiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.
5, audiocontext.currenttime + 0.
5) specifications specification status comment web audio apithe definition of 'audioparamdescriptor' in that specification.
AudioTrack - Web APIs
the language is specified as a bcp 47 (rfc
5646) language code, such as "en-us" or "pt-br".
... tracks.foreach(function(track) { if (track.language === userlanguage) { track.enabled = true; } else { track.enabled = false; } }); the language is in standard (rfc
5646) format.
... living standard html
5the definition of 'audiotrack' in that specification.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
defaults to -3.402823
5e38.
...defaults to 3.402823
5e38.
...udiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.
5, audiocontext.currenttime + 0.
5) specifications specification status comment web audio apithe definition of 'parameterdescriptors' in that specification.
BaseAudioContext.createPanner() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
BaseAudioContext.currentTime - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 audioctx.currenttime; // 23.404 // 24.192 // 2
5.
514 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled audioctx.currenttime; // 49.8 //
50.6 //
51.7 // ...
BiquadFilterNode() - Web APIs
the defaults for all are as follows: q: 1 detune: 0 frequency: 3
50 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbiquadfilternode() constructorchrome full support
55notes full support
55notes notes before chrome
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42n...
... webview android full support
55notes full support
55notes notes before version
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.firefox android full support
53opera android full support 42notes full support ...
BluetoothDevice - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20...
... 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="1
51" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
... non-standard chrome os properties these properties were only implemented on google’s chrome os 4
5 and removed from chrome
52.
characteristic - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcharacteristic experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
57notes notes windows 10.safari no support nowebview android no support nochrome android full support
57firefox android no support noopera android full support 44safari ios ...
readValue() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadvalue experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
57notes notes windows 10.safari no support nowebview android no support nochrome android full support
57firefox android no support noopera android full support 44safari ios ...
value - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalue experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
57notes notes windows 10.safari no support nowebview android no support nochrome android full support
57firefox android no support noopera android full support 44safari ios ...
writeValue() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritevalue experimentalchrome full support
57notes full support
57notes notes macos only.
... full support
57notes disabled notes linux and versions of windows earlier than 10.disabled from version
57: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to enabled).
... full support
57notes notes windows 10.safari no support nowebview android no support nochrome android full support
57firefox android no support noopera android full support 44safari ios ...
CSSPrimitiveValue - Web APIs
there is one exception for color percentage values: since a color percentage value is relative to the range 0-2
55, a color percentage value can be converted to a number (see also the rgbcolor interface).
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,2
5 91,20 91,30 81,2
5" stroke="#d4dde4" fill="none"/><line x1="91" y1="2
5" x2="121" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitiveva...
...lue" target="_top"><rect x="121" y="1" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSStyleDeclaration.setProperty() - Web APIs
, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width:
500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; 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; height: 1
50px; line-height: 1
50px; 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,2
55) + ', ' + random(0,2
55) + ', ' + random(0,2
55) + ')'; } 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.cssrules[i]; } } function setra...
...ndomborder() { const newborder = random(1,
50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
CSS Painting API - Web APIs
terpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.8
5; const thecolor = props.get( '--boxcolor' ); const stroketype = args[0].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewidth ) { ctx.linewidth = strokewidth; } else { ctx.linewidth = 1.0; } if ( stroketype === 'stroke' ) { ctx.fillstyle = 'transparent'; ctx.strokestyle = thecolor; } else if ( stroketype === 'filled' ) { ...
... ctx.lineto( blockwidth + (start * 10) + 20 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10 + blockheight, blockheight); ctx.lineto( blockwidth + (start * 10) + 10, y); ctx.closepath(); ctx.fill(); ctx.stroke(); } } }); we then include the paintworklet: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item
5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 1
5</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspain...
...t/intro/worklets/hilite.js'); then we can use the <image> with the css paint() function: li { --boxcolor: hsla(
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(1
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(2
55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.
CanvasRenderingContext2D.arc() - Web APIs
html <canvas></canvas> javascript the arc is given an x-coordinate of 100, a y-coordinate of 7
5, and a radius of
50.
... const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 7
5,
50, 0, 2 * math.pi); ctx.stroke(); result different shapes demonstrated this example draws various shapes to show what is possible with arc().
... html <canvas width="1
50" height="200"></canvas> javascript const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); // draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginpath(); let x = 2
5 + j *
50; // x coordinate let y = 2
5 + i *
50; // y coordinate let radius = 20; // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } els...
CanvasRenderingContext2D.clip() - Web APIs
html <canvas id="canvas"></canvas> javascript the clipping region is a full circle, with its center at (100, 7
5), and a radius of
50.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 7
5,
50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40,
50, 100,
50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.drawWindow() - Web APIs
for example, ctx.drawwindow(window, 0, 0, 100, 200, 'rgb(2
55,2
55,2
55)'); ...
...by specifying "rgba(2
55,2
55,2
55,0)" as the color, the contents would be drawn with a transparent background (which would be slower).
... it is usually a bad idea to use any background other than pure white "rgb(2
55,2
55,2
55)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.
CanvasRenderingContext2D.ellipse() - Web APIs
examples drawing a full ellipse this example draws an ellipse at an angle of π/4 radians (4
5°).
... html <canvas id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100,
50, 7
5, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([
5,
5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 7
5,
50, 30, math.pi * .2
5, 0, math.pi * 1.
5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(1
50, 7
5,
50, 30, math.pi * .2
5, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 7
5,
50, 30, math.pi * .2
5, 0, math.pi, true); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.
5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(
50,
50, 100, 100); result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
... <canvas id="canvas" width="1
50" height="1
50"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw background ctx.fillstyle = '#fd0'; ctx.fillrect(0, 0, 7
5, 7
5); ctx.fillstyle = '#6c0'; ctx.fillrect(7
5, 0, 7
5, 7
5); ctx.fillstyle = '#09f'; ctx.fillrect(0, 7
5, 7
5, 7
5); ctx.fillstyle = '#f30'; ctx.fillrect(7
5, 7
5, 7
5, 7
5); ctx.fillstyle = '#fff'; // set transparency value ct...
...x.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(7
5, 7
5, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.
CanvasRenderingContext2D.lineCap - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 1
5; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke(); result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property.
... <canvas id="canvas" width="1
50" height="1
50"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const linecap = ['butt', 'round', 'square']; // draw guides ctx.strokestyle = '#09f'; ctx.beginpath(); ctx.moveto(10, 10); ctx.lineto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) ...
...{ ctx.linewidth = 1
5; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(2
5 + i *
50, 10); ctx.lineto(2
5 + i *
50, 140); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linecap' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the line begins at (30,
50) and ends at (1
50, 100).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30,
50); // move the pen to (30,
50) ctx.lineto(1
50, 100); // draw a line to (1
50, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(9
5, 2
5); ctx.lineto(1
50, 80); ctx.lineto(20
5, 2
5); ctx.lineto(210, 130); ctx.linewidth = 1
5; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.moveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript the first line begins at (
50,
50) and ends at (200,
50).
... the second line begins at (
50, 90) and ends at (280, 120).
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(
50,
50); // begin first sub-path ctx.lineto(200,
50); ctx.moveto(
50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
html <canvas id="canvas"></canvas> javascript the rotate() method rotates the transformation matrix by 4
5°.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(4
5 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40,
50, 20); ctx.fillrect(40, 90,
50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40,
50, 20); ctx.fillrect(40, 90,
50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.setLineDash() - Web APIs
for example, [
5, 1
5, 2
5] will become [
5, 1
5, 2
5,
5, 1
5, 2
5].
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([
5, 1
5]); ctx.moveto(0,
50); ctx.lineto(300,
50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
... function drawdashedline(pattern) { ctx.beginpath(); ctx.setlinedash(pattern); ctx.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 1
5; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20,
5]); drawdashedline([1
5, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that s...
A basic ray-caster - Web APIs
the code i ended up with is a regurgitated amalgam of the raycaster chapters from an old andré lamothetricks of the game programming gurus book (isbn: 067230
5070), and a java raycaster i found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.
...firefox 1.
5 beta 1 is even faster; i can run 320 x 240 at 24 fps with 4 pixel slivers.
... so there you are, fire up safari 1.3+ or firefox 1.
5+ or some other browser that supports the <canvas> element and enjoy!
Compositing and clipping - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 1
50, 1
50); ctx.translate(7
5, 7
5); // create a circular clipping path ctx.beginpath(); ctx.arc(0, 0, 60, 0, math.pi * 2, true); ctx.clip(); // draw background var lingrad = ctx.createlineargradient(0, -7
5, 0, 7
5); lingrad.addcolorstop(0, '#2322
56'); lingrad.addcolorstop(1, '#143778'); ctx.fillstyle = lingrad; ctx.fillrect(-7
5, -7
5, 1
50, 1
50); // draw stars for (var j = 1...
...; j <
50; j++) { ctx.save(); ctx.fillstyle = '#fff'; ctx.translate(7
5 - math.floor(math.random() * 1
50), 7
5 - math.floor(math.random() * 1
50)); drawstar(ctx, math.floor(math.random() * 4) + 2); ctx.restore(); } } function drawstar(ctx, r) { ctx.save(); ctx.beginpath(); ctx.moveto(r, 0); for (var i = 0; i < 9; i++) { ctx.rotate(math.pi /
5); if (i % 2 === 0) { ctx.lineto((r / 0.
52
5731) * 0.200811, 0); } else { ctx.lineto(r, 0); } } ctx.closepath(); ctx.fill(); ctx.restore(); } <canvas id="canvas" width="1
50" height="1
50"></canvas> draw(); in the first few lines of code, we draw a black rectangle the size of the canvas as a backdrop, then translate the origin to the center.
...after this a set of
50 randomly positioned and scaled stars is drawn, using the custom drawstar() function.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mono...
...space" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
CloseEvent - Web APIs
100
5 no status received reserved.
...this is similar to
502 http status code.
... 101
5 tls handshake reserved.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospa...
...ce" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,2
5 406,20 406,30 396,2
5" stroke="#d4dde4" fill="none"/><line x1="406" y1="2
5" x2="436" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1...
...="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment...
...-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor compositionevent() creates a new compositionevent object instance.
Console.group() - Web APIs
(chrome
59 tested) does not work with console.groupend().
... note: from gecko 9 until gecko
51, the groupcollapsed() method was the same as group().
... collapsed groups are fully supported starting in gecko
52.
DOMException - Web APIs
(legacy code value:
5 and legacy constant name: invalid_character_err) nomodificationallowederror the object cannot be modified.
...(legacy code value: 1
5 and legacy constant name: invalid_access_err) typemismatcherror the type of the object does not match the expected type.
...(legacy code value: 2
5 and legacy constant name: data_clone_err) encodingerror the encoding or decoding operation failed (no legacy code value and constant name).
Binary strings - Web APIs
this means that each code unit requires two bytes of memory and is able to represent 6
553
5 different code points.
...a binary string is a concept similar to the ascii subset, but instead of limiting the range to 127, it allows code points until 2
55.
...however at least one native function requires binary strings as its input, btoa(): invoking it on a string that contains codepoints greater than 2
55 will cause a character out of range error.
DOMTokenList.forEach() - Web APIs
html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es
5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support 4
5edge full support 16firefox full support
50ie no support noopera full support 32safari full support 10webview android full support ...
... 4
5chrome android full support 4
5firefox android full support
50opera android full support 32safari ios full support 10samsung internet android full support
5.0legend full support full support no support no support ...
DataTransfer.getData() - Web APIs
caveats data availability the html
5 drag and drop specification dictates a drag data store mode.
... html content <div id="div1" ondrop="drop(event)" ondragover="allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowdrop(event)"></div> css content #div1, #div2 { width:100px; height:
50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdropevent) { allowdropevent.target.style.color = 'blue'; allowdropevent.preventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); ...
... living standard html
5.1the definition of 'getdata()' in that specification.
DelayNode() - Web APIs
example const audioctx = new audiocontext(); const delaynode = new delaynode(audioctx, { delaytime: 0.
5, maxdelaytime: 2, }); specifications specification status comment web audio apithe definition of 'delaynode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelaynode() constructorchrome full support
55notes full support
55notes notes before version
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42...
... webview android full support
55notes full support
55notes notes before version
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before version
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
Document: keydown event - Web APIs
for example, a lowercase "a" will be reported as 6
5 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 6
5 by all events.
... since firefox 6
5, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 3
543
58, also see keydown and keyup events are now fired during ime composition for more useful details).
Document: keyup event - Web APIs
for example, a lowercase "a" will be reported as 6
5 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 6
5 by all events.
... since firefox 6
5, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 3
543
58, also see keydown and keyup events are now fired during ime composition for more useful details).
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...onospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
Examples of web and XML development using the DOM - Web APIs
dth + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="
50", width="
500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="
50" width="
500"> </p> <p>image 3: no height, width, but style="height:
50px; width:
500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height:
50px; width:
500px;"> </p> <div id="output"> </div> </body> </h...
...tml> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border:
5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border
5px-wide" onclick="setborderwidth(
5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's ...
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .12
5in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example
5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
DynamicsCompressorNode() - Web APIs
its default value is 0.2
50.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdynamicscompressornode() constructorchrome full support
55notes full support
55notes notes before chrome
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42s...
... webview android full support
55notes full support
55notes notes before version
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
DynamicsCompressorNode.release - Web APIs
the release property's default value is 0.2
5 and it can be set between 0 and 1.
... syntax var audioctx = new audiocontext(); var compressor = audioctx.createdynamicscompressor(); compressor.release.value = 0.2
5; value an audioparam.
... // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a compressor node var compressor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-
50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.2
5, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var act...
Element.animate() - Web APIs
accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.
58, 1)".
...0.
5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration.
... accumulate is similar but a little smarter: blur(2) and blur(
5) become blur(7), not blur(2) blur(
5).
Element: keydown event - Web APIs
for example, a lowercase "a" will be reported as 6
5 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 6
5 by all events.
... since firefox 6
5, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 3
543
58, also see keydown and keyup events are now fired during ime composition for more useful details).
Element: keyup event - Web APIs
for example, a lowercase "a" will be reported as 6
5 by keydown and keyup, but as 97 by keypress.
... an uppercase "a" is reported as 6
5 by all events.
... since firefox 6
5, the keyup and keydown events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 3
543
58, also see keydown and keyup events are now fired during ime composition for more useful details).
Element.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 4
5edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support ...
... 4
5chrome android full support 4
5firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support
5.0scrolltooptions parameterchrome full support 4
5edge full support 79firefox full support yesie no support noopera full support 32safari no support no...
...webview android full support 4
5chrome android full support 4
5firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support
5.0legend full support full support no support no support ...
Element.scrollTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support 4
5edge full support 79firefox full support 36ie no support noopera full support 32safari full support 10webview android full support ...
... 4
5chrome android full support 4
5firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support
5.0scrolltooptions parameterchrome full support 4
5edge full support 79firefox full support yesie no support noopera full support 32safari no support no...
...webview android full support 4
5chrome android full support 4
5firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support
5.0legend full support full support no support no support ...
EventTarget.addEventListener() - Web APIs
capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width:
520px; padding: 1
5px; margin: 1
5px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px; } javascript const outer = document.queryselector('.outer'); const middle = document.queryselector('.middle'); const inner1...
...ss to the eventlistener a function that calls the method of the object that contains the fields that need to be accessed: class someclass { constructor() { this.name = 'something good'; } register() { const that = this; window.addeventlistener('keydown', function(e) { that.somemethod(e); }); } somemethod(e) { console.log(this.name); switch(e.keycode) { case
5: // some code here...
...rty: 'data'}; mybutton.addeventlistener('click', function() { console.log(someobject.aproperty); // expected value: 'data' someobject.aproperty = 'data again'; // change the value }); window.setinterval(function() { if (someobject.aproperty === 'data again') { console.log('data again: true'); someobject.aproperty = 'data'; // reset value to wait for next event execution } },
5000); in this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of someobject.aproperty would have changed, because someobject persists in memory (by reference) in both the event listener and interval function, both have access to the same data (i.e.
FederatedCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential() constructor non-standardchrome full support
51edge full support ≤79firefox ?
... webview android full support
51chrome android full support
51firefox android ?
... samsung internet android full support
5.0legend full support full support compatibility unknown compatibility unknownnon-standard.
FederatedCredential.protocol - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprotocol experimentalchrome full support
51edge full support ≤79firefox ?
... webview android full support
51chrome android full support
51firefox android ?
... samsung internet android full support
5.0legend full support full support compatibility unknown compatibility unknownexperimental.
FederatedCredential.provider - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprovider experimentalchrome full support
51edge full support ≤79firefox ?
... webview android full support
51chrome android full support
51firefox android ?
... samsung internet android full support
5.0legend full support full support compatibility unknown compatibility unknownexperimental.
File.lastModifiedDate - Web APIs
in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox
59; in 60 it will be 2ms.
... // reduced time precision (2ms) in firefox 60 somefile.lastmodifieddate.gettime(); // 1
519211809934 // 1
519211810362 // 1
519211811670 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled somefile.lastmodifieddate.gettime(); // 1
5191298
53
500 // 1
5191298
58900 // 1
519129864400 // ...
FileSystemSync - Web APIs
webkitedge full support ≤79prefixed full support ≤79prefixed prefixed implemented with the vendor prefix: webkitfirefox no support noie no support noopera full support 1
5prefixed full support 1
5prefixed prefixed implemented with the vendor prefix: webkitsafari full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix: webkitwebview android full support �...
...ixed prefixed implemented with the vendor prefix: webkitname non-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera full support 1
5safari full support 6webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 14safari ios full ...
... full support 1.0root non-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera full support 1
5safari full support 6webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 14safari ios full ...
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/>...
...<line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignme...
...nt-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters.
Using the Gamepad API - Web APIs
html
5 introduced many of the necessary components for rich, interactive game development.
... interval = setinterval(pollgamepads,
500); } function pollgamepads() { var gamepads = navigator.getgamepads ?
...= 0; i < gamepads.length; i++) { if (gamepads[i]) { if (gamepads[i].index in controllers) { controllers[gamepads[i].index] = gamepads[i]; } else { addgamepad(gamepads[i]); } } } } window.addeventlistener("gamepadconnected", connecthandler); window.addeventlistener("gamepaddisconnected", disconnecthandler); if (!haveevents) { setinterval(scangamepads,
500); } specifications specification status comment gamepadthe definition of 'gamepad' in that specification.
HTMLCanvasElement.height - Web APIs
when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 1
50 is used.
... living standard no change since the latest snapshot, html
5 html
5.1the definition of 'htmlcanvaselement.height' in that specification.
... recommendation html
5the definition of 'htmlcanvaselement.height' in that specification.
HTMLCanvasElement.toBlob() - Web APIs
for example, to get the image in jpeg format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.9
5); // jpeg at 9
5% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico.
... living standard no change since the latest snapshot, html
5 html
5.1the definition of 'htmlcanvaselement.toblob' in that specification.
... recommendation no change html
5the definition of 'htmlcanvaselement.toblob' in that specification.
HTMLDialogElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></div>...
... a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... living standard html
5.2the definition of '<dialog>' in that specification.
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
...ll="#4d4e
53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,2
5 3
56,20 3
56,30 346,2
5" stroke="#d4dde4" fill="none"/><line x1="3
56" y1="2
5" x2="386" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement.hidden - Web APIs
.panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width:
500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding:
5px 36px; } h1 { margin-top: 0; font-size: 17
5%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification.
... living standard html
5.1the definition of 'htmlelement.hidden' in that specification.
... recommendation html
5the definition of 'htmlelement.hidden' in that specification.
HTMLFormElement: reset event - Web APIs
working draft no change html
5.2the definition of 'reset' in that specification.
... recommendation no change html
5.1the definition of 'reset' in that specification.
... html
5the definition of 'reset' in that specification.
HTMLFormElement: submit event - Web APIs
working draft no change html
5.2the definition of 'submit' in that specification.
... recommendation no change html
5.1the definition of 'submit' in that specification.
... recommendation no change html
5the definition of 'submit' in that specification.
HTMLInputElement.setSelectionRange() - Web APIs
html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2,
5); } result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
... living standard no change html
5.1the definition of 'htmlinputelement.setselectionrange()' in that specification.
... recommendation no change html
5the definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
for example, consider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg don's 40th birthday pic2343.jpg pic2344.jpg pic23
55.jpg pic23
56.jpg vacations mars pic
5533.jpg pic
5534.jpg pic
5556.jpg pic
5684.jpg pic
5712.jpg if the user chooses photoalbums, then the list reported by files will contain file objects for every file listed above—but not the directories.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitdirectory non-standardchrome full support 13edge full support 13firefox full support
50ie no support noopera no support nosafari full support 11.1webview android full support yeschrome android full support yesfirefox android full support ...
...
50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportnon-standard.
HTMLMediaElement.controlsList - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontrolslistchrome full support
58edge full support ≤79firefox ?
... opera full support 4
5safari ?
... webview android full support
58chrome android full support
58firefox android ?
HTMLMediaElement.playbackRate - Web APIs
the audio is muted when the fast forward or slow motion is outside a useful range (for example, gecko mutes the sound outside the range 0.2
5 to
5.0).
... syntax // video video.playbackrate = 1.
5; // audio audio.playbackrate = 1.0; value a double.
... living standard html
5the definition of 'htmlmediaelement.playbackrate' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
the event frequency is dependant on the system load, but will be thrown between about 4hz and 66hz (assuming the event handlers don't take longer than 2
50ms to run).
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.ontimeupdate specification html
5 media examples these examples add an event listener for the htmlmediaelement's timeupdate event, then post a message when that event handler has reacted to the event firing.
... living standard html
5the definition of 'timeupdate media event' in that specification.
HTMLOrForeignElement.dataset - Web APIs
examples <div id="user" data-id="1234
567890" data-user="johndoe" data-date-of-birth>john doe</div> const el = document.queryselector('#user'); // el.id === 'user' // el.dataset.id === '1234
567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; // result: el.dataset.date...
... living standard no change from latest snapshot, html
5.1 html
5.1the definition of 'htmlelement.dataset' in that specification.
... recommendation snapshot of html living standard, no change from html
5 html
5the definition of 'htmlelement.dataset' in that specification.
HTMLElement.focus() - Web APIs
ocument.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top:
500px;">click me!</button> </div> result specification specification status comment html living standardthe definition of 'focus' in that specification.
... living standard html
5.1the definition of 'focus' in that specification.
... recommendation html
5the definition of 'focus' in that specification.
Drag Operations - Web APIs
this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwithcustomimage(event) { const canvas = document.createelement("canvas"); canvas.width = canvas.height =
50; const ctx = canvas.getcontext("2d"); ctx.linewidth = 4; ctx.moveto(0, 0); ctx.lineto(
50,
50); ctx.moveto(0,
50); ctx.lineto(
50, 0); ctx.stroke(); const dt = event.datatransfer; dt.setdata('text/plain', 'data to drag'); dt.setdragimage(canvas, 2
5, 2
5); } in this example, we make one canvas the drag image.
... as the canvas is
50×
50 pixels, we use offsets of half of this (2
5) so that the image appears centered on the mouse pointer.
...bug 460801 see also html drag and drop api (overview) dragging and dropping multiple items recommended drag types html
5 living standard: drag and drop ...
History.pushState() - Web APIs
javascript const state = { 'page_id': 1, 'user_id':
5 } const title = '' const url = 'hello-world.html' history.pushstate(state, title, url) specifications specification status comment html living standardthe definition of 'history.pushstate()' in that specification.
... living standard no change from html
5.
... html
5the definition of 'history.pushstate()' in that specification.
History.scrollRestoration - Web APIs
living standard no change from html
5.
... html
5the definition of 'history.scrollrestoration' in that specification.
... nochrome android full support 46firefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support
5.0legend full support full support no support no support ...
Working with the History API - Web APIs
html
5 introduced the pushstate() and replacestate() methods for add and modifying history entries, respectively.
... note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) through gecko
5.0 (firefox
5.0 / thunderbird
5.0 / seamonkey 2.2), the passed object is serialized using json.
... note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) through gecko
5.0 (firefox
5.0 / thunderbird
5.0 / seamonkey 2.2), the passed object is serialized using json.
IDBCursor.key - Web APIs
full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 1
5safari full support 7webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full...
... support 8samsung internet android full support yesbinary keyschrome full support
58edge full support ≤79firefox full support
51ie ?
... opera full support 4
5safari full support 10.1webview android full support
58chrome android full support
58firefox android ?
IDBDatabase.createObjectStore() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 117616
5.) constrainterror an object store with the given name (based on case-sensitive comparison) already exists in the connected database.
... full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 1
5safari full support 7webview android full support yeschrome android full support 2
5firefox android full support 22opera android full support 14safari ios full ...
...support 8samsung internet android full support 1.
5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBDatabase.deleteObjectStore() - Web APIs
has been deleted or removed.) in firefox previous to version 41, an invalidstateerror was raised in this case as well, which was misleading; this has now been fixed (see bug 117616
5.) notfounderror you are trying to delete an object store that does not exist.
... full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 1
5safari full support 7webview android full support yeschrome android full support 2
5firefox android full support 22opera android full support 14safari ios full ...
...support 8samsung internet android full support 1.
5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBObjectStore.add() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.autoIncrement - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.clear() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.count() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.delete() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.get() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.index() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.indexNames - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.keyPath - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitrenaming throu...
IDBObjectStore.openCursor() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursorchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.put() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetputchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBObjectStore.transaction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBOpenDBRequest.onblocked - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblockedchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneededchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBOpenDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="1
51" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="2
51,2
5 261,20 261,30 2
51,2
5" stroke="#d4dde4" fill="none"/><line x1="261" y1="2
5" x2="291" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,an...
...dale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
IDBTransaction.db - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBVersionChangeEvent.newVersion - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnewversionchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IDBVersionChangeEvent.oldVersion - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support 24 full support 24 no support 23 —
57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support ...
... 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... —
57prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5 full support 2
5 no support 2
5 —
57prefixed prefixed implemented with the vendor prefix: webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5 full support 1.
5 no support 1.
5 — 7.0prefixed prefixed implemented with the vendor prefix: webkitlegend ...
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.00040
59
599, 0.00020298]; let feedbackward = [1.0126964
558, -1.9991880801, 0.987303
5442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirf...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetiirfilternode() constructorchrome full support
55notes full support
55notes notes before version
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42...
... webview android full support
55notes full support
55notes notes before version
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before version
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="8...
...6" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline...
...="middle">inputevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor inputevent() creates an inputevent object.
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="1
5,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using.
... let shipsize = { width: 30, height: 30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate =
5; let angle = 0; let spaceship = document.getelementbyid("spaceship"); next comes the function updateposition().
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 1
5 1
5) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.
KeyframeEffectOptions - Web APIs
accumulate is similar but a little smarter: blur(2) and blur(
5) become blur(7), not blur(2) blur(
5).
...accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.
58, 1)".
...0.
5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration.
MediaRecorder() - Web APIs
if bits per second values are not specified for video and/or audio, the default adopted for video is 2.
5mbps, while the audio default is adaptive, depending upon the sample rate and the number of channels.
... example this example shows how to create a media recorder for a specified stream, whose audio bit rate is set to 128 kbit/sec and whose video bit rate is set to 2.
5 mbit/sec.
...if (navigator.mediadevices.getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 128000, videobitspersecond : 2
500000, mimetype : 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; ...
MediaRecorder.ignoreMutedMedia - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standardchrome no support 49 —
57edge no support nofirefox ?
... ie no support noopera no support 36 — 44safari no support nowebview android no support 49 —
57chrome android no support 49 —
57firefox android ?
... opera android no support 36 — 44safari ios no support nosamsung internet android no support
5.0 — 7.0legend no support no support compatibility unknown compatibility unknownnon-standard.
MediaStream.getTracks() - Web APIs
example navigator.mediadevices.getusermedia({audio: false, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the stream after
5 seconds settimeout(() => { const tracks = mediastream.gettracks() tracks[0].stop() },
5000) }) specifications specification status comment media capture and streamsthe definition of 'gettracks()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettracks experimentalchrome full support 4
5edge full support 12firefox full support yesie no support noopera full support yessafari full support yeswebview android full support ...
... 4
5chrome android full support 4
5firefox android full support yesopera android no support nosafari ios full support yessamsung internet android full support
5.0legend full support full support no support no supportexperimental.
MediaStream.id - Web APIs
—
54edge no support 12 — 79firefox full support 41ie no support noopera no support ?
...—
54chrome android no support ?
... —
54firefox android full support 41opera android no support ?
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="...
...#4d4e
53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object.
NodeList.prototype.forEach() - Web APIs
= node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es
5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototype.foreach; } th...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support
51edge full support 16firefox full support
50ie no support noopera full support 38safari full support 10webview android full support ...
...
51chrome android full support
51firefox android full support
50opera android full support 41safari ios full support 10samsung internet android full support
5.0legend full support full support no support no support ...
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="1
51" y="1" width="120" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,2
5 281,20 281,30 271,2
5" stroke="#d4dde4" fill="none"/><line x1="281" y1="2
5" x2="311" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,mo...
...naco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
PannerNode.coneInnerAngle - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.coneOuterAngle - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.coneOuterGain - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.distanceModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode.maxDistance - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode.orientationX - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.orientationY - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.orientationZ - Web APIs
nst osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 1
5 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 4
5 and coneinnerangle == 30, it means that when the sound is rotated // by between 1
5 (30/2) and 22.
5 (4
5/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 4...
...
5; // this value determines the volume of the sound outside of both inner and outer cone // setting it to 0 means there is no sound, so we can clearly hear when we leave the cone // 0 is also the default panner.coneoutergain = 0; // increase the z position to ensure the cone has an effect // (otherwise the sound is located at the same position as the listener) panner.positionz.setvalueattime(1, context.currenttime); having set up the pannernode, we can now schedule some updates to its y-axis rotation: // calculate the vector for no rotation // this means the sound will play at full volume const [x1, y1, z1] = yrotationtovector(0); // schedule the no-rotation vector immediately panner.orientationx.setvalueattime(x1, context.currenttime); panner.orientationy.setvalueattime(y1, context.curre...
...nttime); panner.orientationz.setvalueattime(z1, context.currenttime); // calculate the vector for -22.4 degrees // since our coneouterangle is 4
5, this will just about make the sound audible // if we set it to +/-22.
5, the sound volume will be 0, as the threshold is exclusive const [x2, y2, z2] = yrotationtovector(-22.4); panner.orientationx.setvalueattime(x2, context.currenttime + 2); panner.orientationy.setvalueattime(y2, context.currenttime + 2); panner.orientationz.setvalueattime(z2, context.currenttime + 2); finally, let's connect all our nodes and start the oscillator!
PannerNode.panningModel - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode.setOrientation() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode.setPosition() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode.setVelocity() - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PannerNode - Web APIs
to see a complete implementation, check out our panner-node example (view the source code) — this demo transports you to the 2.
5d "room of metal", where you can play a track on a boom box and then walk around the boom box to see how the sound changes!
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 29
5; // 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...
...stener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselector('.listener-data'); var pannerdata = document.queryselector('.panner-data'); leftbound = (-xpos) +
50; rightbound = xpos -
50; xiterator = width/1
50; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner...
PaymentRequest.prototype.id - Web APIs
const details = { id: "super-store-order-123-12312", total: { label: "total due", amount: { currency: "usd", value: "6
5.00" }, }, }; const request = new paymentrequest(methoddata, details); console.log(request.id); // super-store-order-123-12312 the id is then also available in the paymentresponse returned from the show() method, but under the requestid attribute.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidchrome full support 61edge full support 16firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... no support noopera no support nosafari full support 11.1webview android no support nochrome android full support 60firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.onshippingoptionchange - Web APIs
ewith(((details, addr) => { var shippingoption = { id: '', label: '', amount: { currency: 'usd', value: '0.00' }, selected: true }; // shipping to us is supported if (addr.country === 'us') { shippingoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '0.00'; details.total.amount.value = '
55.00'; // shipping to jp is supported } else if (addr.country === 'jp') { shippingoption.id = 'jp'; shippingoption.label = 'international shipping'; shippingoption.amount.value = '10.00'; details.total.amount.value = '6
5.00'; // shipping to elsewhere is unsupported } else { // empty array indicates rejection of the address details.shippingoptions...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingoptionchangechrome full support 61edge full support 1
5firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
53firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.complete() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcomplete()chrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
56 full support
56 no support
53 —
56disabled disabled from version
53 until version
56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.details - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdetailschrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
56 full support
56 no support
53 —
56disabled disabled from version
53 until version
56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.payerEmail - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayeremailchrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
56 full support
56 no support
53 —
56disabled disabled from version
53 until version
56 (exclusive): this feature is behind the #web-payments preference (needs to be set to enabled).
... to change preferences in chrome, visit chrome://flags.firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PerformancePaintTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
...nce.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 278
5.91
5 milliseconds.
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospa...
...ce" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,2
5 406,20 406,30 396,2
5" stroke="#d4dde4" fill="none"/><line x1="406" y1="2
5" x2="436" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification sp...
PushEvent.data - Web APIs
ned"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/201
5/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdata experimentalchrome full support
57edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
...refox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support nowebview android no support nochrome android full support
57firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android full support 43safari ios no support nosamsung internet andro...
PushEvent - Web APIs
var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/201
5/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
... full support 48notes notes push enabled by default.opera android full support 37safari ios no support nosamsung internet android full support 4.0data experimentalchrome full support
57edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.
...refox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support nowebview android no support nochrome android full support
57firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android full support 43safari ios no support nosamsung internet andro...
RTCDataChannel.id - Web APIs
the read-only rtcdatachannel property id returns an id number (between 0 and 6
5,
534) which uniquely identifies the rtcdatachannel.
... each rtcpeerconnection can therefore have up to a theoretical maximum of 6
5,
534 data channels on it, although the actual maximum may vary from browser to browser.
... syntax var id = adatachannel.id; value an unsigned short value (that is, an integer between 0 and 6
5,
53
5) which uniquely identifies the data channel.
RTCDataChannel - Web APIs
every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 6
5,
534 data channels (the actual limit may vary from browser to browser).
...property bufferedamount returns the number of bytes of data currently queued to be sent over the data channel.bufferedamountlowthreshold the rtcdatachannel property bufferedamountlowthreshold is used to specify the number of 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 6
5,
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.
...rns an enum of type rtcdatachannelstate which indicates the state of the data channel's underlying data connection.reliable read only the read-only rtcdatachannel property reliable indicates whether or not the data channel is reliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 6
5,
53
5) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
RTCIceCandidate.candidate - Web APIs
the syntax of the candidate string is described in rfc
524
5, section 1
5.1.
... for an a-line (attribute line) that looks like this: a=candidate:423499732
5 1 udp 2043278322 192.168.0.
56 44323 typ host the corresponding candidate string's value will be "candidate:423499732
5 1 udp 2043278322 192.168.0.
56 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 423499732
5 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.
56" port = 44323 type = "host" example in this example, we see a function which receives as input an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidateInit.candidate - Web APIs
the syntax of the candidate string is described in rfc
524
5, section 1
5.1.
... for an a-line (attribute line) that looks like this: a=candidate:423499732
5 1 udp 2043278322 192.168.0.
56 44323 typ host the corresponding candidate string's value will be "candidate:423499732
5 1 udp 2043278322 192.168.0.
56 44323 typ host".
...the complete list of attributes for this example candidate is: foundation = 423499732
5 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.
56" port = 44323 type = "host" example when a new ice candidate is received by your signaling code from the remote peer, you need to construct the rtcicecandidate object that encapsulates it.
RTCRtcpParameters - Web APIs
this is used, for example, in sdes (sdp security descriptions) messages, described in rfc 4
568.
...if this value is true, reduced size rtcp (described in rfc
5506) is in effect.
... if false, compund rtcp is in use, as found in rfc 3
550.
Request.cache - Web APIs
if there is no match, the browser will respond with a
504 gateway timeout status.
... ({status:
504}) : // workaround for chrome; which simply fails with a typeerror promise.reject(e)) .then(res => { if (res.status ===
504) { controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal}) } const date = res.headers.get("date"), dt = date ?
... new date(date).gettime() : 0 if (dt < (date.now() - 86400000)) { // if older than 24 hours controller.abort() controller = new abortcontroller(); return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal}) } // other possible conditions if (dt < (date.now() - 300000)) // if it's older than
5 minutes fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
RsaHashedImportParams - Web APIs
the rsahashedimportparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.importkey() or subtlecrypto.unwrapkey(), when importing any rsa-based key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep.
...this should be set to rsassa-pkcs1-v1_
5, rsa-pss, or rsa-oaep, depending on the algorithm you want to use.
...this can be one of sha-2
56, sha-384, or sha-
512.
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 11...
...1,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" te...
...xt-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,2
5 3
51,20 3
51,30 341,2
5" stroke="#d4dde4" fill="none"/><line x1="3
51" y1="2
5" x2="381" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread...
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hov...
...er text { fill: #009
5dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
... rendering_intent_absolute_colorimetric
5 corresponds to the value absolute-colorimetric.
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.1428
571428
57142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 8
5" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,mona...
...co,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="1
51" y="1" width="170" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,2
5 331,20 331,30 321,2
5" stroke="#d4dde4" fill="none"/><line x1="331" y1="2
5" x2="361" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect...
... x="361" y="1" width="240" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
SpeechSynthesisUtterance.rate - Web APIs
syntax var myrate = speechsynthesisutteranceinstance.rate; speechsynthesisutteranceinstance.rate = 1.
5; value a float representing the rate value.
...other values act as a percentage relative to this, so for example 2 is twice as fast, 0.
5 is half as fast, etc.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.
5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'rate' in that specification.
StorageManager.persist() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpersistchrome full support
52 full support
52 no support 48 —
52alternate name alternate name uses the non-standard name: requestpersistentedge full support ≤79firefox full support
55ie ?
... webview android full support
52 full support
52 no support 48 —
52alternate name alternate name uses the non-standard name: requestpersistentchrome android full support
52 full support
52 no support 48 —
52alternate name alternate name uses the non-standard name: requestpersistentfirefox android full support
55opera android full support yessafari ios ...
... samsung internet android full support 6.0 full support 6.0 no support
5.0 — 6.0alternate name alternate name uses the non-standard name: requestpersistentlegend full support full support compatibility unknown compatibility unknownuses a non-standard name.uses a non-standard name.
SubtleCrypto.deriveKey() - Web APIs
hkdf is specified in rfc
5869.
... /* derive an aes key, given: - our ecdh private key - their ecdh public key */ function derivesecretkey(privatekey, publickey) { return window.crypto.subtle.derivekey( { name: "ecdh", public: publickey }, privatekey, { name: "aes-gcm", length: 2
56 }, false, ["encrypt", "decrypt"] ); } async function agreesharedsecretkey() { // generate 2 ecdh key pairs: one for alice and one for bob // in more normal usage, they would generate their key pairs // separately and exchange public keys securely let aliceskeypair = await window.crypto.subtle.generatekey( { name: "ecdh", namedcurve: "p-384" }, false...
...= new textencoder(); return window.crypto.subtle.importkey( "raw", enc.encode(password), "pbkdf2", false, ["derivebits", "derivekey"] ); } async function encrypt(plaintext, salt, iv) { let keymaterial = await getkeymaterial(); let key = await window.crypto.subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-2
56" }, keymaterial, { "name": "aes-gcm", "length": 2
56}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications specification status comment web cryptography apithe definition of 'subtlecrypto.derivekey()' in that specification.
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "aes-gcm", length: 2
56, }, true, ["encrypt", "decrypt"] ).then((key) => { const exportbutton = document.queryselector(".raw"); exportbutton.addeventlistener("click", () => { exportcryptokey(key); }); }); pkcs #8 export this example exports an rsa private signing key as a pkcs #8 object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-pss", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-2
56", }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".pkcs8"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); subjectpublickeyinfo export this example exports an rsa public encryption key as a pem-encoded subjectpublickeyinfo object.
...*/ window.crypto.subtle.generatekey( { name: "rsa-oaep", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-2
56", }, true, ["encrypt", "decrypt"] ).then((keypair) => { const exportbutton = document.queryselector(".spki"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.publickey); }); }); json web key import this code exports an ecdsa private signing key as a json web key object.
SubtleCrypto.verify() - Web APIs
to use rsassa-pkcs1-v1_
5, pass the string "rsassa-pkcs1-v1_
5" or an object of the form { "name": "rsassa-pkcs1-v1_
5" }.
... rsassa-pkcs1-v1_
5 this code uses a public key to verify a signature.
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_
5", publickey, signature, encoded ); signaturevalue.classlist.add(result ?
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text><...
.../a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="1
50" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,2
5 276,20 276,30 266,2
5" stroke="#d4dde4" fill="none"/><line x1="276" y1="2
5" x2="306" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="3
51" y="30" font-size="12px" fon...
...t-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospa...
...ce" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,2
5 406,20 406,30 396,2
5" stroke="#d4dde4" fill="none"/><line x1="406" y1="2
5" x2="436" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
TextMetrics - Web APIs
html <canvas id="canvas" width="
550" height="
500"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const baselinesabovealphabetic = ['fontboundingboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingboxdescent', 'font...
...boundingboxdescent']; const baselines = [...baselinesabovealphabetic, ...baselinesbelowalphabetic]; ctx.font = '2
5px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { let text = 'abcdefghijklmnop (' + baseline + ')'; let textmetrics = ctx.measuretext(text); let y =
50 + index *
50; ctx.beginpath(); ctx.filltext(text, 0, y); let liney = y - math.abs(textmetrics[baseline]); if (baselinesbelowalphabetic.includes(baseline)) { liney = y + math.abs(textmetrics[baseline]); } ctx.moveto(0, liney); ctx.lineto(
550, liney); ctx.stroke(); }); result measuring text width when measuring the x-direction of a piece of text, the sum of actualboundingboxleft and actualboundingboxright can be wider than the width of the inline box (width), due to...
... it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to get the absolute text width: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic
50px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 4
59.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462.8833333333333 specifications specification html living standardthe definition of 'textmetrics' in that specification.
validityState.badInput - Web APIs
living standard live standard html
5.1the definition of 'validitystate.badinput' in that specification.
... recommendation no change from the previous snapshot html
5.
... html
5the definition of 'validitystate.badinput' in that specification.
ValidityState.patternMismatch - Web APIs
examples given the following: <p> <label>enter your phone number in the format (123)4
56-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north americ...
... living standard html
5.1the definition of 'validitystate.patternmismatch' in that specification.
... recommendation html
5the definition of 'validitystate.patternmismatch' in that specification.
ValidityState - Web APIs
living standard living standard html
5.1the definition of 'validitystate' in that specification.
... recommendation no change from the previous snapshot html
5.
... html
5the definition of 'validitystate' in that specification.
WEBGL_draw_buffers - Web APIs
ext.color_attachment0_webgl ext.color_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment
5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment1
5_webgl a glenum specifying a color buffer.
... ext.draw_buffer0_webgl ext.draw_buffer1_webgl ext.draw_buffer2_webgl ext.draw_buffer3_webgl ext.draw_buffer4_webgl ext.draw_buffer
5_webgl ext.draw_buffer6_webgl ext.draw_buffer7_webgl ext.draw_buffer8_webgl ext.draw_buffer9_webgl ext.draw_buffer10_webgl ext.draw_buffer11_webgl ext.draw_buffer12_webgl ext.draw_buffer13_webgl ext.draw_buffer14_webgl ext.draw_buffer1
5_webgl a glenum returning a draw buffer.
...gl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec4(0.2
5); gl_fragdata[1] = vec4(0.
5); gl_fragdata[2] = vec4(0.7
5); gl_fragdata[3] = vec4(1.0); } </script> specifications specification status comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WebGLRenderingContext.readPixels() - Web APIs
possible values: gl.unsigned_byte gl.unsigned_short_
5_6_
5 gl.unsigned_short_4_4_4_4 gl.unsigned_short_
5_
5_
5_1 gl.float webgl2 adds gl.byte gl.unsigned_int_2_10_10_10_rev gl.half_float gl.short gl.unsigned_short gl.int gl.unsigned_int gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_
5_9_9_9_rev pixels an arraybufferview object to read data into.
... uint16array for gl.unsigned_short_
5_6_
5, gl.unsigned_short_4_4_4_4, or gl.unsigned_short_
5_
5_
5_1.
... a gl.invalid_operation error is thrown if type is gl.unsigned_short_
5_6_
5 and format is not gl.rgb.
WebGLRenderingContext.renderbufferStorage() - Web APIs
gl.rgb
56
5:
5 red bits, 6 green bits,
5 blue bits.
... gl.rgb
5_a1:
5 red bits,
5 green bits,
5 blue bits, 1 alpha bit.
... examples gl.renderbufferstorage(gl.renderbuffer, gl.rgba4, 2
56, 2
56); specifications specification status comment webgl 1.0the definition of 'renderbufferstorage' in that specification.
Adding 2D content to a WebGL context - Web APIs
// our field of view is 4
5 degrees, with a width/height // ratio that matches the display size of the canvas // and we only want to see objects between 0.1 units // and 100 units away from the camera.
... const fieldofview = 4
5 * math.pi / 180; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the result.
...we set a field of view of 4
5°, with a width to height ratio that matches the display dimensions of our canvas.
Movement, orientation, and motion: A WebXR example - Web APIs
the code looks like this: const xrotationdegreespersecond = 2
5; const yrotationdegreespersecond = 1
5; const zrotationdegreespersecond = 3
5; const enablerotation = true; const allowmouserotation = true; const allowkeyboardmotion = true; const enableforcepolyfill = false; //const session_type = "immersive-vr"; const session_type = "inline"; const mouse_speed = 0.003; xrotationdegreespersecond the number of degrees of rotation to apply around the x axis pe...
...onmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'), modelviewmatrix: gl.getuniformlocation(shaderprogram, 'umodelviewmatrix'), normalmatrix: gl.getuniformlocation(shaderprogram, 'unormalmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler') }, }; buffers = initbuffers(gl); texture = loadtexture(gl, 'https://cdn.glitch.com/a9381af1-18a9-49
5e-ad01-afddfd1
5d000%2ffirefox-logo-solid.png?v=1
57
56
593
51244'); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartorientation); xrsession.requestrefe...
... function handlepointermove(event) { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } } calculating the new pitch and yaw values is handled by the function rotateviewby(): function rotateviewby(dx, dy) { mouseyaw -= dx * mouse_speed; mousepitch -= dy * mouse_speed; if (mousepitch < -math.pi * 0.
5) { mousepitch = -math.pi * 0.
5; } else if (mousepitch > math.pi * 0.
5) { mousepitch = math.pi * 0.
5; } } given as input the mouse deltas, dx and dy, the new yaw value is computed by subtracting from the current value of mouseyaw the product of dx and the mouse_speed scaling constant.
Rendering and the WebXR frame animation callback - Web APIs
this is due to early displays using the ac electrical grid's current flow waveform, which cycles 60 times per second in the united states (
50 in europe), for timing purposes.
... the typical human's pupillary distance—the distance between the centers of the pupils—is between
54 and 74 millimeters (0.0
54 to 0.074 meters).
... for example, to reduce the frame rate by
50%, just skip every other frame: let tick = 0; function drawframe(time, frame) { animationframerequestid = frame.session.requestanimationframe(drawframe); if (!(tick % 2)) { /* draw the scene */ } tick++; } this version of the frame callback maintains a tick counter.
Migrating from webkitAudioContext - Web APIs
for example, if you have code like the below: var osc = context.createoscillator(); osc.noteon(1); osc.noteoff(1.
5); var src = context.createbuffersource(); src.notegrainon(1, 0.2
5); src.noteoff(2); you can simply change it like this in order to port it to the standard audiocontext api: var osc = context.createoscillator(); osc.start(1); osc.stop(1.
5); var src = context.createbuffersource(); src.start(1, 0.2
5); src.stop(2); remove synchronous buffer creation in the old webkit implementation of web audi...
... see the following example: // old webkitaudiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; src.gain.value = 0.
5; src.connect(context.destination); src.noteon(0); // new standard audiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; var gain = context.creategain(); src.connect(gain); gain.gain.value = 0.
5; gain.connect(context.destination); src.start(0); audiobuffer the gain attribute of audiobuffer has been removed.
... see the following example: // old webkitaudiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; src.buffer.gain = 0.
5; src.connect(context.destination); src.noteon(0); // new standard audiocontext code: var src = context.createbuffersource(); src.buffer = somebuffer; var gain = context.creategain(); src.connect(gain); gain.gain.value = 0.
5; gain.connect(context.destination); src.start(0); removal of audiobuffersourcenode.looping the looping attribute of audiobuffersourcenode has been removed.
Background audio processing using AudioWorklet - Web APIs
the first defines gain as a value between 0 and 1, with a default value of 0.
5.
... the second parameter is named frequency and defaults to 440.0, with a range from 27
5 to 4186.009, inclusively.
... static get parameterdescriptors() { return [ { name: "gain", defaultvalue: 0.
5, minvalue: 0, maxvalue: 1 }, { name: "frequency", defaultvalue: 440.0; minvalue: 27.
5, maxvalue: 4186.009 } ]; } accessing your processor node's parameters is as simple as looking them up in the parameters object passed into your implementation of process().
Using IIR filters - Web APIs
if you want to play with the iir filter node and need some values to help along the way, there's a table of already calculated values here; on pages 4 &
5 of the linked pdf the an values refer to the feedforward values and the bn values refer to the feedback.
...something like this is acceptable: let feedforward = [0.00020298, 0.00040
59
599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964
558, -1.9991880801, 0.987303
5442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
... and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on size const spacing = width/16; const fontsize = math.floor(spacing/1.
5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-...
WheelEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="1
53.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,2
5 201,20 201,30 191,2
5" stroke="#d4dde4" fill="none"/><line x1="201" y1="2
5" x2="231" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d...
...4e
53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,2
5 341,20 341,30 331,2
5" stroke="#d4dde4" fill="none"/><line x1="341" y1="2
5" x2="371" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
window.cancelIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelidlecallback experimentalchrome full support 47edge full support 79firefox full support
55 full support
55 full support
53disabled disabled from version
53: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
... no support noopera full support yessafari no support nowebview android full support 47chrome android full support 47firefox android full support
55 full support
55 full support
53disabled disabled from version
53: this feature is behind the dom.requestidlecallback.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support yessafari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
window.location - Web APIs
lert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #
5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
... living standard no change from html
5.
... html
5the definition of 'window.location' in that specification.
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/
5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/
5.0 (linux; android 9; samsung sm-g9
55f build/ppr1.180610.011) applewebkit/
537.36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/
537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1)...
... { sbrowser = "opera"; // "mozilla/
5.0 (macintosh; intel mac os x 10_14_0) applewebkit/
537.36 (khtml, like gecko) chrome/70.0.3
538.102 safari/
537.36 opr/
57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/
5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/
5.0 (windows nt 10.0; win64; x64) applewebkit/
537.36 (khtml, like gecko) chrome/
58.0.3029.110 safari/
537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/
5.0 (x11; linux x86_64) applewebkit/
537.36 (khtml, like gecko) ubuntu chromium/66.0.33
59.181 chrome/66.0.33
59.
...181 safari/
537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/
5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/60
5.1.1
5 (khtml, like gecko) version/11.0 mobile/1
5e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
window.requestIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidlecallback experimentalchrome full support 47edge full support 79firefox full support
55notes full support
55notes notes enabled by default.
... no support
53 —
55notes notes implemented but disabled by default.ie no support noopera full support 34safari no support nowebview android full support 47chrome android full support 47firefox android full support
55notes full support
55notes notes enabled by default.
... no support
53 —
55notes notes implemented but disabled by default.opera android full support 34safari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
Window.window - Web APIs
prefix: settimeout("alert('hi!')",
50); // equivalent to using window.settimeout.
... living standard no difference from the latest snapshot html
5.1 html
5.1the definition of 'window.window' in that specification.
... recommendation no difference from the html
5 html
5the definition of 'window.window' in that specification.
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fi...
...ll: #009
5dd; pointer-events: all;} constructors see also the dom interfaces.
...since firefox
57 (initially nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
WindowEventHandlers.onbeforeunload - Web APIs
specifications the event was originally introduced by microsoft in internet explorer 4 and standardized in the html
5 specification.
... living standard html
5.1the definition of 'globaleventhandlers' in that specification.
... recommendation html
5the definition of 'globaleventhandlers' in that specification.
WindowEventHandlers.onhashchange - Web APIs
function changehash() { location.hash = (math.random() > 0.
5) ?
... living standard html
5.1the definition of 'globaleventhandlers' in that specification.
... recommendation html
5the definition of 'globaleventhandlers' in that specification.
WindowOrWorkerGlobalScope.atob() - Web APIs
example const encodeddata = window.btoa('hello, world'); // encode a string const decodeddata = window.atob(encodeddata); // decode the string polyfill you can use a polifill from https://github.com/maxart2
501/base64-js/blob/master/base64.js for browsers that don't support it.
... html
5.1the definition of 'windowbase64.atob()' in that specification.
... html
5the definition of 'windowbase64.atob()' in that specification.
WindowOrWorkerGlobalScope.fetch() - Web APIs
(this behavior was corrected in firefox 6
5 — see bug 1
508661).
...starting with chrome
50, this property also takes a federatedcredential instance or a passwordcredential instance.
... integrity contains the subresource integrity value of the request (e.g., sha2
56-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=).
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="1
51" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,2
5 236,20 236,30 226,2
5" stroke="#d4dde4" fill="none"/><line x1="236" y1="2
5" x2="266" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fi...
...ll="#4d4e
53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,2
5 3
56,20 3
56,30 346,2
5" stroke="#d4dde4" fill="none"/><line x1="3
56" y1="2
5" x2="386" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
Sending and Receiving Binary Data - Web APIs
function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('get', url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line
5, which overrides the mime type, forcing the browser to treat it as plain text, using a user-defined character set.
... var myarray = new arraybuffer(
512); var longint8view = new uint8array(myarray); // generate some data for (var i=0; i< longint8view.length; i++) { longint8view[i] = i % 2
56; } var xhr = new xmlhttprequest; xhr.open("post", url, false); xhr.send(myarray); this is building a
512-byte array of 8-bit integers and sending it; you can use any binary data you'd like, of course.
... line
5 uses the sendasbinary() method to initiate the request.
XMLHttpRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 6
50 1
50" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 1...
...21,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="1
51" y="1" width="2
50" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,2
5 411,20 411,30 401,2
5" stroke="#d4dde4" fill="none"/><line x1="411" y1="2
5" x2="441" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="
511" y="30" font-size="12px" fo...
...nt-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.
5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xrwebgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { ...
... session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -1.
5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
...however, for inline sesions, we know we're in a space not automatically adjusted for floor level, so we request an offset reference space to shift the viewer's height to 1.
5 meters above the presumed floor level of 0 meters.
Generating HTML - Web APIs
<xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 1
55px 0
50px; border: 1px dotted #639ace; padding:0
5px 0
5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> </br> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class="mybox"> <xsl:apply-...
... figure
5 : final 3 templates xsl stylesheet(example2.xsl): ...
... xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 1
55px 0
50px; border: 1px dotted #639ace; padding:0
5px 0
5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> ...
XSL Transformations in Mozilla FAQ - Web APIs
a known workaround is to add a sufficiently long xml comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first
512 bytes, which is analyzed by firefox to determine if it's a feed or not.
...sadly, current builds don't error, but just give unexpected results, like crashes (bug 20276
5).
... original document information author(s): axel hecht last updated date: february 2, 200
5 copyright information: portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a creative commons license ...
ARIA Test Cases - Accessibility
results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 al: tested 2 and 4 with jaws 10.0.
512u on nov 21, 2008 2.
...fail - jaws says it has
5 landmarks, when page first loads, pressing ; only moves between 2 of the landmarks.
...if two changes occur almost at the same time (say within .0
5 seconds for example), the screen reader should make sure to read the entire region only once.
ARIA: gridcell role - Accessibility
<div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">496-619-
5098</div> … </div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...ex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <div role="grid" aria-colcount="6"> <div role="rowgroup"> <div role="row"> <div role="columnheader" aria-colindex="1">first name</div> <div role="columnheader" aria-colindex="2">last name</div> <div role="columnheader" aria-colindex="
5">city</div> <div role="columnheader" aria-colindex="6">zip</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell" aria-colindex="1">debra</div> <div role="gridcell" aria-colindex="2">burks</div> <div role="gridcell" aria-colindex="
5">new york</div> <div role="gridcell" aria-colindex="6">14127</div> </div> </div> … </div>...
...div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">jupiter</div> <div role="gridcell">142,984</div> <div role="gridcell">9.9</div> <div role="gridcell">778.6</div> <div role="gridcell">67</div> </div> </div> <div role="rowgroup"> <div role="row"> <div role="gridcell">saturn</div> <div role="gridcell">120,
536</div> <div role="gridcell">10.7</div> <div role="gridcell">1433.
5</div> <div role="gridcell">62</div> </div> </div> </div> accessibility concerns support for gridcell and certain gridcell-related aria roles and properties have poor support with assistive technologies.
ARIA: row role - Accessibility
<div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </div> </div> <div role="rowgroup"> <div role="row"> <span role="cell">finland</span> <span role="cell">
5.
5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
...for example, in a table with 1
5 columns, and columns 4,
5, and 6 are in the dom, aria-colindex="4" could be set on every row.
...for example, if a table has 1,
500 rows, but only the header and rows 47 and
52 are in the dom, aria-rowindex="1" would be set on the header row, and aria-rowindex="47" and aria-rowindex="
52" would be set on the 47th and
52nd row, respectively.
ARIA - Accessibility
many of these widgets were later incorporated into html
5, and developers should prefer using the correct semantic html element over using aria, if such an element exists.
... here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="7
5" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
... in html
5, all aria attributes validate.
Accessibility and Spacial Patterns - Accessibility
in 200
5, arnold wilkins, john emmett, and graham harding evaluated the guidelines for characterizing patterned images that could precipitate seizures.
... if so, do they last longer than 0.
5 s?
... see also mdn accessibiltity: what users can do to browse more safely web accessibiltity for seizures and physical reactions web accessibility: understanding colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaster (4 of
5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them arnold wilki...
-moz-image-rect - CSS: Cascading Style Sheets
#box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/120
53/firefox.png), 0%,
50%,
50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image.
... #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/120
53/firefox.png), 0%, 100%,
50%,
50%); width:133px; height:136px; position:absolute; } this defines the top-right corner of the image.
... the other corners follow a similar pattern: #box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/120
53/firefox.png),
50%,
50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/120
53/firefox.png),
50%, 100%, 100%,
50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box g...
-moz-outline-radius - CSS: Cascading Style Sheets
/* one value */ -moz-outline-radius: 2
5px; /* two values */ -moz-outline-radius: 2
5px 1em; /* three values */ -moz-outline-radius: 2
5px 1em 12%; /* four values */ -moz-outline-radius: 2
5px 1em 12% 4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius.
... html <p>this element has a rounded outline!</p> css p { margin:
5px; border: 1px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 2
5px; } result notes dotted or dashed radiused corners were rendered as solid until firefox
50, bug 382721 future versions of gecko/firefox may drop this property completely.
... see bug
593717.
-webkit-mask-position-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: center; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -
50%; /* <length> values */ -webkit-mask-position-x:
50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x:
50px, 2
5%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <le...
... center equivalent to
50%.
...> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 2
5%; } specifications not part of any standard.
-webkit-mask-position-y - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -
50%; /* <length> values */ -webkit-mask-position-y:
50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y:
50px, 2
5%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <leng...
... center equivalent to
50%.
...h> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 2
5%; } specifications not part of any standard.
::before (:before) - CSS: Cascading Style Sheets
html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #
5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
... html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.
5em 0.
5em 0.
5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.2
5em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(4
5deg); width: 0.
5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.t...
...rack eggs into bowl</li> <li>add milk</li> <li>add flour</li> <li aria-current='step'>mix thoroughly into a smooth batter</li> <li>pour a ladleful of batter onto a hot, greased, flat frying pan</li> <li>fry until the top of the pancake loses its gloss</li> <li>flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> css li { padding:0.
5em; } li[aria-current='step'] { font-weight:bold; } li[aria-current='step']::after { content: " \21e6"; /* hexadecimal for unicode leftwards white arrow*/ display: inline; } result specifications specification status comment css pseudo-elements level 4the definition of '::before' in that specification.
::slotted() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet::slottedchrome full support
50edge full support 79firefox full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 37safari full support 10webview android full support
50chrome android full support
50firefox android full support 63 full support 63 no support
59 — 63disabled disabled from version
59 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.opera android full support 37safari ios full support 10samsung internet android full support
5.0legend full support full support no support no supportuser must explicitly enable this feature.user must explicitly enable this feature.
:host() - CSS: Cascading Style Sheets
= 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px
5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <footer> a special color.
... browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host()chrome full support
54edge full support 79firefox full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
... noopera full support 41safari full support 10notes full support 10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.webview android full support
54chrome android full support
54firefox android full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (n...
:host-context() - CSS: Cascading Style Sheets
= 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px
5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host-context()chrome full support
54edge full support 79firefox no support nonotes no support nonotes notes see bug 1082060.ie no support noopera full support 41safari no support ...
... nowebview android full support
54chrome android full support
54firefox android no support nonotes no support nonotes notes see bug 1082060.opera android full support 41safari ios no support nosamsung internet android full support 6.0legend full support full support no support no supportsee implementation notes.see implementation notes.
:host - CSS: Cascading Style Sheets
= 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px
5px; }'; the :host { background: rgba(0,0,0,0.1); padding: 2px
5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:hostchrome full support
54edge full support 79firefox full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 41safari full support 10webview android full support
54chrome android full support
54firefox android full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true).
:nth-last-child() - CSS: Cascading Style Sheets
keyword values odd represents elements whose numeric position in a series of siblings is odd: 1, 3,
5, etc., counting from the end.
...'='<attr-modifier> = i | s examples example selectors tr:nth-last-child(odd) or tr:nth-last-child(2n+1) represents the odd rows of an html table: 1, 3,
5, etc., counting from the end.
... :nth-last-child(
5n) represents elements
5, 10, 1
5, etc., counting from the end.
:visited - CSS: Cascading Style Sheets
dfirefox for androidopera for androidsafari on iossamsung internet:visitedchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support 3.
5safari full support 1webview android full support 4.4chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full...
... full support 1notes notes chromium has never matched <link> elements with link pseudo-classes.edge full support 12firefox full support 70ie no support noopera full support 1
5notes full support 1
5notes notes chromium has never matched <link> elements with link pseudo-classes.safari full support 12webview android full support 4.4notes full support 4.4notes notes chromium has never matched <l...
...s.restrict css properties allowed in a statement using :visited for privacychrome full support 6edge full support 12firefox full support 4ie full support 8opera full support 1
5safari full support
5webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full su...
range - CSS: Cascading Style Sheets
syntax /* keyword value */ range: auto; /* range values */ range: 2
5; range: infinite 10; range: 6 infinite; range: infinite infinite; /* multiple range values */ range: 2
5, 8 10; range: infinite 6, 10 infinite; values auto the range depends on the counter system: for cyclic, numeric, and fixed systems, the range is negative infinity to positive infinity.
...initial valueautocomputed valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\2
5a0" "\2
5a1"; range: 2 4, 7 9; } .list { list-style: range-multi-example; } the above list will display as follows: 1.
...four
5.
system - CSS: Cascading Style Sheets
er supports it, this example will render a list like this: ◉ one ◉ two ◉ three css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; } result fixed counter if your browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three 4 four
5 five css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; } result symbolic counter if your browser supports it, this example will render a list like this: a.
... css <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style numbers { system: numeric; symbols: 0 1 2 3 4
5 6 7 8 9; suffix: ": "; } ul { list-style: numbers; } result additive counter this example renders a list using roman numerals.
... html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style upper-roman { system: additive; range: 1 3999; additive-symbols: 1000 m, 900 cm,
500 d, 400 cd, 100 c, 90 xc,
50 l, 40 xl, 10 x, 9 ix,
5 v, 4 iv, 1 i; } ul { list-style: upper-roman; } result extends example this example will use the algorithm, symbols, and other properties of the lower-alpha counter style, but will remove the period ('.') after the counter representation, and enclose the characters in paranthesis; like (a), (b), etc.
@keyframes - CSS: Cascading Style Sheets
for example: @keyframes identifier { 0% { top: 0; left: 0; } 30% { top:
50px; } 68%, 72% { left:
50px; } 100% { top: 100px; left: 100%; } } here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes.
...for example: @keyframes identifier { 0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; } 100% { top: 0; } } in this example, at the
50% keyframe, the values used are top: 10px and left: 20px.
... @keyframes important1 { from { margin-top:
50px; }
50% { margin-top: 1
50px !important; } /* ignored */ to { margin-top: 100px; } } @keyframes important2 { from { margin-top:
50px; margin-bottom: 100px; } to { margin-top: 1
50px !important; /* ignored */ margin-bottom:
50px; } } formal syntax @keyframes <keyframes-name> { <keyframe-block-list> }where <keyframes-name> = <custom-ident> | <string><keyframe-block-list> = <keyframe-block>+where <keyframe-block> = <keyframe-selector># { <declaration-list> }where <keyframe-selector> = from | to | <percentage> examples css animation examples see using css...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
tabindex html
5).
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></div> <...
...div class="box box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> <div class="box box
5"><a href="">five</a></div> </div> the specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout.
Consistent list indentation - CSS: Cascading Style Sheets
if we apply a background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in figure
5.
... gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce figure
5, loading the example into a gecko-based browser gives us figure 6.
...set both to 1.2
5em, if you like -- there's no reason why you have to stick with pixel-based indentation.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
in a horizontal writing mode this css would apply a
5px margin to the top of the box and a 10px margin to the bottom.
... .box { margin-block:
5px 10px; } note: the shorthand properties margin-inline and margin-block shipped in firefox 66.
... in a horizontal writing-mode this css would apply
5px of padding to the top of the box and 10px of padding to the bottom: .box { padding-block:
5px 10px; } note: the shorthand properties padding-inline and padding-block shipped in firefox 66.
Using z-index - CSS: Cascading Style Sheets
the z-index of element #
5 has no effect since it is not a positioned element.
... source code for the example html <div id="abs1"> <b>div #1</b> <br />position: absolute; <br />z-index:
5; </div> <div id="rel1"> <b>div #2</b> <br />position: relative; <br />z-index: 3; </div> <div id="rel2"> <b>div #3</b> <br />position: relative; <br />z-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #
5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index:
5; position: absolute; width: 1
50px; height: 3
50px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; ...
...top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px
50px 0px
50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 1
5px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px
50px 0px
50px; } #abs2 { z-index: 1; position: absolute; width: 1
50px; height: 3
50px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-color: #ffc; margin: 0px
50px 0px
50px; } ...
Stacking without the z-index property - CSS: Cascading Style Sheets
element #
5 is static, and so is drawn below the other four elements, even though it comes later in the html markup.
... source code for the example html <div id="abs1" class="absolute"> <b>div #1</b><br />position: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #
5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 1
50px; height: 3
50px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: ...
...relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px
50px 0px
50px; } #rel2 { top: 1
5px; left: 20px; margin: 0px
50px 0px
50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-color: #ffc; margin: 0px
50px 0px
50px; } ...
Mozilla CSS extensions - CSS: Cascading Style Sheets
9.2 p -moz-padding-end [superseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko
53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted]...
...ield-multiline toolbar toolbarbutton-dropdown toolbox tooltip treeheadercell treeheadersortarrow treeitem treetwisty treetwistyopen treeview window background-image gradients -moz-linear-gradient -moz-radial-gradient elements -moz-element sub-images -moz-image-rect() border-color -moz-use-text-colorobsolete since gecko
52 (removed in bug 1306214); use currentcolor instead.
...handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko
51 ::-moz-placeholderdeprecated since gecko
51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-moz-table ::-moz-table...
Specificity - CSS: Cascading Style Sheets
some examples with a higher specificity: table td { height:
50px !important; } .mytable td { height:
50px !important; } #mytable td { height:
50px !important; } b) or add the same selector after the existing one: td { height:
50px !important; } c) or, preferably, rewrite the original rule to avoid the use of !important altogether.
... for more information, visit: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/924
53
53/what-does-important-in-css-mean https://stackoverflow.com/questions/
5701149/when-to-use-important-property-in-css https://stackoverflow.com/questions/11178673/how-to-override-important https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css the :is() and :not() exceptions the matches-any pseudo-class :is() and the negation pseudo-class :n...
... div:where(.outer) p { color: orange; } div p { color: blueviolet; } #no-where-support { margin: 0.
5em; border: 1px solid red; } #no-where-support:where(*) { display: none !important; } ...
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value: element { background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white; background-color: brown; margin: 10px; width:
50px; height:
50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 1
50px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 7
5px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it t...
...o this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">
5 - more text</span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...by declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a css author can reduce the need for repetition: :root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width:
50px; height:
50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 1
50px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 7
5px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-colo...
background-color - CSS: Cascading Style Sheets
/* hexadecimal value */ background-color: #bbff00; /* fully opaque */ background-color: #bf0; /* fully opaque shorthand */ background-color: #11ffee00; /* fully transparent */ background-color: #1fe0; /* fully transparent shorthand */ background-color: #11ffeeff; /* fully opaque */ background-color: #1fef; /* fully opaque shorthand */ /* rgb value */ background-color: rgb(2
55, 2
55, 128); /* fully opaque */ background-color: rgba(117, 190, 218, 0.
5); /*
50% transparent */ /* hsl value */ background-color: hsl(
50, 33%, 2
5%); /* fully opaque */ background-color: hsla(
50, 33%, 2
5%, 0.7
5); /* 7
5% transparent */ /* special keyword values */ background-color: currentcolor; background-color: transparent; /* global values */ background-color: inherit; back...
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.
5:1 is required for text content and 3:1 for larger text such as headings.
...<number> | <percentage><hue> = <number> | <angle> examples html <div class="exampleone"> lorem ipsum dolor sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(1
53,102,1
53); color: rgb(2
55,2
55,204); } .examplethree { background-color: #777799; color: #ffffff; } result specifications specification comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
background-repeat - CSS: Cascading Style Sheets
they will then compress to 22
5px.
... <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/1200
5/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.
...org/files/1200
5/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
border-image-outset - CSS: Cascading Style Sheets
syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.
5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30px 2 4
5px; /* top | right | bottom | left */ border-image-outset: 7px 12px 14px
5px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values.
...for example, if an element has border-width: 1em 2px 0 1.
5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem.
...heritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #
55f) 40; border-image-outset: 1.
5; /* 1.
5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
box-sizing - CSS: Cascading Style Sheets
for example, if you have four boxes with width: 2
5%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.
...for example, .box {width: 3
50px; border: 10px solid black;} renders a box that is 370px wide.
...for example, .box {width: 3
50px; border: 10px solid black;} renders a box that is 3
50px wide, with the area for content being 330px wide.
color - CSS: Cascading Style Sheets
values */ color: red; color: orange; color: tan; color: rebeccapurple; /* <hex-color> values */ color: #090; color: #009900; color: #090a; color: #009900aa; /* <rgb()> values */ color: rgb(34, 12, 64, 0.6); color: rgba(34, 12, 64, 0.6); color: rgb(34 12 64 / 0.6); color: rgba(34 12 64 / 0.3); color: rgb(34.0 12 64 / 60%); color: rgba(34.6 12 64 / 30%); /* <hsl()> values */ color: hsl(30, 100%,
50%, 0.6); color: hsla(30, 100%,
50%, 0.6); color: hsl(30 100%
50% / 0.6); color: hsla(30 100%
50% / 0.6); color: hsl(30.0 100%
50% / 60%); color: hsla(30.2 100%
50% / 60%); /* global values */ color: inherit; color: initial; color: unset; the color property is specified as a single <color> value.
...in order to meet current web content accessibility guidelines (wcag), a ratio of 4.
5:1 is required for text content and 3:1 for larger text such as headings.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples making text red the following are all ways to make a paragraph's text red: p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(2
55,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%,
50%); } /*
50% translucent */ p { color: #ff000080; } p { color: rgba(2
55, 0, 0, 0.
5); } p { color: hsla(0, 100%,
50%, 0.
5); } specifications specification status comment css color module level 4the definition of 'color' in that specification.
cursor - CSS: Cascading Style Sheets
for example, this specifies two images using <url> values, providing <x><y> coordinates for the second one, and falling back to the progress keyword value if neither image can be loaded: cursor: url(one.svg), url(two.svg)
5 5, progress; values <url> a url(…) or a comma separated list url(…), url(…), …, pointing to an image file.
... bug 27
5173: on windows and mac os x, no-drop is the same as not-allowed.
... bug 27
5174: on windows, all-scroll is the same as move.
flex-basis - CSS: Cascading Style Sheets
(bug 110
5111 covers adding that keyword).
...erted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex
5">
5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10px; margin-bottom:
50px; border: 3px solid #2e86bb; color: white; font-size: 14px; text-al...
...00%; 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'; } .flex
5 { flex-basis: content; } .flex
5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status comment css flexible box layout modulethe definition of 'flex-basis' in that specification.
font-variant - CSS: Cascading Style Sheets
efox for androidopera for androidsafari on iossamsung internetfont-variantchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support 3.
5safari full support 1webview android full support 1chrome android full support 18firefox android full support 4opera android full support 11safari ios full sup...
...port 1samsung internet android full support 1.0css fonts module level 3 shorthandchrome full support
52edge full support 79firefox full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 39safari full support 9.1webview android full support
52chrome android full support
52firefox android full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
gap (grid-gap) - CSS: Cascading Style Sheets
syntax /* one <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.
5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20px 10px; gap: 1em 0.
5em; gap: 3vmin 2vmax; gap: 0.
5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% -
5px); /* global values */ gap: inherit; gap: initial; gap: unset; this property is specified as a value ...
... examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px
5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height:
50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px
5px; } #grid { display: grid; height: 200px; grid...
...-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px
5px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
grid-column-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end:
5 somegridarea span; /* global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box
5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end:
5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; backgroun...
...d-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius:
5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: somegridarea; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; grid-column-start: span somegridarea
5; /* global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting column start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box
5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end:
5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; backgroun...
...d-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius:
5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-start' in that specification.
grid-row-end - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-end: auto; /* <custom-ident> values */ grid-row-end: somegridarea; /* <integer> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end:
5 somegridarea span; /* global values */ grid-row-end: inherit; grid-row-end: initial; grid-row-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row end for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box
5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end:
5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; backgroun...
...d-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius:
5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
syntax /* keyword value */ grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start:
5 somegridarea span; /* global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value.
...] | [ span && [ <integer> | <custom-ident> ] ] examples setting row start for a grid item html <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> <div class="box
5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end:
5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius:
5px; backgroun...
...d-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius:
5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius:
5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-start' in that specification.
height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 7
5%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value.
... 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 2
5 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
... </div> </div> css div { width: 2
50px; margin-bottom:
5px; border: 2px solid blue; } #taller { height:
50px; } #shorter { height: 2
5px; } #parent { height: 100px; } #child { height:
50%; width: 7
5%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
image-set() - CSS: Cascading Style Sheets
full support 79prefixed prefixed implemented with the vendor prefix: -webkit-firefox no support nonotes no support nonotes notes see bug 1107646.ie no support noopera full support 1
5prefixed full support 1
5prefixed prefixed implemented with the vendor prefix: -webkit-safari partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -webkit-notes support for url images only and x is the only supported resolution unit.
... see bug 160934.webview android full support 4.4prefixed full support 4.4prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 2
5prefixed full support 2
5prefixed prefixed implemented with the vendor prefix: -webkit-firefox android no support nonotes no support nonotes notes see bug 1107646.opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -we...
...see bug 160934.samsung internet android full support 1.
5prefixed full support 1.
5prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full support partial support partial support no support no supportsee imple...
letter-spacing - CSS: Cascading Style Sheets
normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.0
5em; } .px-wide { letter-spacing: 6px; } result specifications specification status comment css text module level 3the definition of 'letter-spacing' in that specification.
...ox for androidopera for androidsafari on iossamsung internetletter-spacingchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support 3.
5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 10.1safari ios fu...
...g supportchrome full support 1edge full support 12firefox full support 72ie full support 9opera full support 7safari full support
5.1webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 10.1safari ios full support
5.1samsung internet andro...
line-height - CSS: Cascading Style Sheets
syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height: 3.
5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal.
... accessibility concerns use a minimum value of 1.
5 for line-height for main paragraph content.
...</div> <!-- the first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px --> <!-- the second <h1> line-height results from the red div's font-size (1
5px × 1.1) = 16.
5px, probably not what you want --> css .green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size: 30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 1
5px; } result specifications specification status comment css level 2 (revision 1)th...
margin - CSS: Cascading Style Sheets
syntax /* apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin:
5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values.
... formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin:
5%; /* all sides:
5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px margin */ /* left and right: 3% margin */ /* bottom: ...
... -1em margin */ margin: 10px 3px 30px
5px; /* top: 10px margin */ /* right: 3px margin */ /* bottom: 30px margin */ /* left:
5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally centered */ notes horizontal centering to center something horizontally in modern browsers, you can use display: flex; justify-content: center; .
minmax() - CSS: Cascading Style Sheets
syntax /* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px,
50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* <fixed-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px,
50%) minmax(
50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px,
50%) minm...
...nmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 1
50px; grid-gap:
5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding:
5px; } html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
... </div> <div> inflexible item of 1
50 pixels width.
offset - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10px 30px; offset: none; /* offset path */ offset: ray(4
5deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg)
50px 20deg; /* including offset anchor */ offset: ray(4
5deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.
5cm 3cm; offset: url(arc.svg)...
... 30deg /
50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:o...
... examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width:
50px; height:
50px; background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status comment motion path module level 1the definition of 'offset' in that specification.
opacity - CSS: Cascading Style Sheets
in order to meet current web content accessibility guidelines (wcag), a ratio of 4.
5:1 is required for text content and 3:1 for larger text such as headings.
...l syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.
5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; ...
.../* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.
5; filter: alpha(opacity=
50); zoom: 1; } result specifications specification status comment css color module level 4the definition of 'opacity' in that specification.
orphans - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 1
50px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetorphanschrome full support 2
5edge full support 12firefox no support noie full support 8opera full support 9.2safari full support 1.3webview android full support ...
... ≤37chrome android full support 2
5firefox android no support noopera android full support 14safari ios full support 1samsung internet android full support 1.
5legend full support full support no support no support see also widows paged media ...
outline-style - CSS: Cascading Style Sheets
html <div> <p class="auto">outline demo</p> </div> css .auto { outline-style: auto; /* same result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; padding: 1
5px; } result setting outline style to dashed and dotted html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div> css .dotted { outline-style: dotted; /* same result as "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; padding: 1
5px; } result setting outline style to solid and double ...
... html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; padding: 1
5px; } result setting outline style to groove and ridge html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 1
5px; } result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outli...
...ne-width: 10px; padding: 1
5px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in that specification.
padding - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: padding-bottom padding-left padding-right padding-top syntax /* apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding:
5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding:
5px 1em 0 2em; /* global values */ padding: inherit; padding: initial; padding: unset; the padding property may be specified using one, two, three, or four values.
...ute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px
50px; } h3 { background-color: cyan; padding: 110px
50px
50px 110px; } result setting padding with pixels and percentages padding:
5%; /* all sides:
5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and right: 20px padding */ padding: 10px 3% 20px; ...
... /* top: 10px padding */ /* left and right: 3% padding */ /* bottom: 20px padding */ padding: 1em 3px 30px
5px; /* top: 1em padding */ /* right: 3px padding */ /* bottom: 30px padding */ /* left:
5px padding */ specifications specification status comment css basic box modelthe definition of 'padding' in that specification.
place-items - CSS: Cascading Style Sheets
examples placing items in a flex container div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width:
50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height:
50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item
5 { background-color: #ff8cff; min-height: 70px; } #item6 { backgroun...
...d-color: #8cffff; min-height:
50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item
5">
5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">place-items: </label> <select id="values"> <option value="start">start</option> <option value="center">center</option> <option value="end">end</option> <option value="left">left</option> <option value="right">right</option> <opti...
...; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill,
50px); } result specifications specification status comment css box alignment module level 3the definition of 'place-items' in that specification.
repeating-conic-gradient() - CSS: Cascading Style Sheets
syntax /* starburst: a a blue on blue starburst: the gradient is a starburst of lighter and darker blue, centered in the upper left quandrant, offset by 3degrees so there is no up/down straight line */ background: repeating-conic-gradient( from 3deg at 2
5% 2
5%, hsl(200, 100%,
50%) 0deg 1
5deg, hsl(200, 100%, 60%) 10deg 30deg); ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...the following two gradients are equivalent repeating-conic-gradient(red, orange, yellow, green, blue
50%); repeating-conic-gradient(from -4
5deg, red 4
5deg, orange, yellow, green, blue 22
5deg) by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
... div { width: 200px; height: 200px; } <div></div> div { background: repeating-conic-gradient( from 3deg at 2
5% 2
5%, green, blue 2deg
5deg, green, yellow 1
5deg 18deg, green 20deg); } more repeating-conic-gradient examples please see using css gradients for more examples.
<resolution> - CSS: Cascading Style Sheets
as 1 inch is 2.
54 cm, 1dpi ≈ 0.39dpcm.
...as 1 inch is 2.
54 cm, 1dpcm ≈ 2.
54dpi.
...} valid resolutions 96dpi
50.82dpcm 3dppx invalid resolutions 72 dpi spaces are not allowed between the number and the unit.
scroll-margin-inline - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-inline-end scroll-margin-inline-start syntax /* <length> values */ scroll-margin-inline: 10px; scroll-margin-inline: 1em .
5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container.
...the outer container is styled like this: .scroller { text-align: left; width: 2
50px; height: 2
50px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the sc...
... the child elements are styled as follows: .scroller > div { flex: 0 0 2
50px; width: 2
50px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10px; scroll-margin: 1em .
5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge of the scroll container.
...the outer container is styled like this: .scroller { text-align: left; width: 2
50px; height: 2
50px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the sc...
... the child elements are styled as follows: .scroller > div { flex: 0 0 2
50px; width: 2
50px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-coordinate - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate:
50px
50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.
...left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap coordinates html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer coordinate0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (2
5, 0)</p> <div class="scrollcontainer coordinate2
5"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (
50, 0)</p> <div class="scrollcontainer coordinate
50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20p...
...x; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size:
50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate2
5 > div { scroll-snap-coordinate: 2
5px 0; } .coordinate
50 > div { scroll-snap-coordinate:
50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
shape-outside - CSS: Cascading Style Sheets
syntax /* keyword values */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function values */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); shape-outside: path('m0.
5,1 c0.
5,1,0,0.7,0,0.3 a0.2
5,0.2
5,1,1,1,0.
5,0.3 a0.2
5,0.2
5,1,1,1,1,0.3 c1,0.7,0.
5,1,0.
5,1 z'); /* <url> value */ shape-outside: url(image.png); /* <gradient> value */ shape-outside: linear-gradient(4
5deg, rgba(2
55, 2
55, 2
55, 0) 1
50px, red 1
50px); /* global values */ shape-outside: initial; shape-outside: inherit; shape-outside: unset; the shape-outside property is specified using the values fr...
... note: user agents must use the potentially cors-enabled fetch method defined by the html
5 specification for all urls in a shape-outside value.
... </p> </div> css .main { width:
530px; } .left, .right { width: 40%; height: 12ex; background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape...
<shape> - CSS: Cascading Style Sheets
ernet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<shape> deprecatedchrome full support 1edge full support 12firefox full support 1ie full support
5.
5opera full support 9.
5safari full support 1.3webview android full support 37chrome android full support 18firefox android full support 4opera android full su...
...support 1samsung internet android full support 1.0rect() deprecatedchrome full support 1edge full support 12firefox full support 1ie full support
5.
5notes full support
5.
5notes notes for internet explorer versions
5.
5 through 7, the rect() function uses spaces (instead of commas) to separate parameters.
... for internet explorer 8 and later versions, only the standard comma-separated syntax is supported.opera full support 9.
5safari full support 1.3webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full supportdeprecated...
<time> - CSS: Cascading Style Sheets
examples: 0s, 1.
5s, -60s.
...examples: 0ms, 1
50.2
5ms, -60000ms.
... examples valid times 12s positive integer -4
56ms negative integer 4.3ms non-integer 14ms the unit is case-insensitive, although capital letters are not recommended.
translateZ() - CSS: Cascading Style Sheets
in the above interactive examples, perspective:
550px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.
... html <div>static</div> <div class="moved">moved</div> css div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(
500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
...a value of
500px means the user is
500 pixels "in front of" the imagery located at z=0.
zoom - CSS: Cascading Style Sheets
/* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom:
50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size.
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 7
5%; } p.normal { zoom: normal; } p.big { zoom: 2.
5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 2
5px; height: 2
5px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; z...
...oom: 1.
5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue; zoom: 2.9; } result specifications not part of any standard.
Media buffering, seeking, and time ranges - Developer guides
this represents two buffered time ranges — one spanning 0 to
5 seconds and the second spanning 1
5 to 19 seconds.
... ------------------------------------------------------ |=============| |===========| | ------------------------------------------------------ 0
5 1
5 19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns
5 myaudio.buffered.start(1); // returns 1
5 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little b...
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #
555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #
59
5; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudi...
Block formatting context - Developer guides
uto"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:1
50px; } .box { background-color: rgb(224, 206, 247); border:
5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border:
5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(2
55, 2
55, 2
55, .
5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are...
... html <section> <div class="float">try to resize this outer float</div> <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:1
50px; } .box { background-color: rgb(224, 206, 247); border:
5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border:
5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:2
5px; width: 200px; height: 100px; background-color: rgba(2
55, 2
55, 2
55, .7
5); ...
... margin collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height:
50px; margin: 10px 0; } .blue { background: blue; } .red-outer { overflow: hidden; background: red; } specifications specification status comment css display module level 3the definition of 'block formatting context' in that specification.
HTML attribute: minlength - HTML: Hypertext Markup Language
examples by adding minlength="
5", the value must either be empty or five characters or longer to be valid.
... <label for="fruit">enter a fruit name that is at least
5 letters long</label> <input type="text" minlength="
5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid.
... living standard html
5.1the definition of 'minlength attribute' in that specification.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 1
5em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.
... css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 1
5em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating t...
... living standard html
5.1the definition of '<details>' in that specification.
<dl>: The Description List element - HTML: Hypertext Markup Language
<dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>19
52</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <div> element.
... <dl> <div> <dt>name</dt> <dd>godzilla</dd> </div> <div> <dt>born</dt> <dd>19
52</dd> </div> <div> <dt>birthplace</dt> <dd>japan</dd> </div> <div> <dt>color</dt> <dd>green</dd> </div> </dl> notes do not use this element (nor <ul> elements) to merely create indentation on a page.
... living standard html
5the definition of '<dl>' in that specification.
<hgroup> - HTML: Hypertext Markup Language
permitted content one or more <h1>, <h2>, <h3>, <h4>, <h
5>, and/or <h6>.
... usage notes the <hgroup> element has been removed from the html
5 (w3c) specification, but it still is in the whatwg version of html.
... so the html
5 (w3c) specification provides advice on how to mark up subheadings, subtitles, alternative titles and taglines without using <hgroup>.
<input type="color"> - HTML: Hypertext Markup Language
because users can write colors in many different ways (such as rgb(2
55, 2
55, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input, such as #ff0000.
...for example, in safari 10.1, you would see something that looks looks like this: the same content looks like this in firefox
55: in this case, clicking on the color well presents the platform's color picker for you to choose a color from (in this case, the macos picker): validation a color input's value is considered to be invalid if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation.
... result the final result looks like this: specifications specification status comment html living standard living standard initial definition html
5 recommendation initial definition ...
<input type="radio"> - HTML: Hypertext Markup Language
the css involved is a bit more significant: html { font-family: sans-serif; } div:first-of-type { display: flex; align-items: flex-start; margin-bottom:
5px; } label { margin-right: 1
5px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius:
50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right:
5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; backgr...
...ound-color: black; padding:
5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers).
... living standard html
5the definition of '<input type="radio">' in that specification.
<main> - HTML: Hypertext Markup Language
living standard html
5.1the definition of '<main>' in that specification.
... recommendation no change from html
5.
... html
5the definition of '<main>' in that specification.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
the default value is 8
5.
... examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="2
50" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of '<marquee>' in that specification.
... html
5the definition of '<marquee>' in that specification.
<menu> - HTML: Hypertext Markup Language
this element was deprecated in html4, but reintroduced in html
5.1 and the html living standard.
...type 'list' is likely to change to 'toolbar' according to html
5.1.
... living standard no change from latest snapshot, unknown html
5.1the definition of '<menu>' in that specification.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
examples <div class="info"> <ruby> <rbc> <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt> </rbc> <rtc>san francisco</rtc> </ruby> </div> .info { padding-top: 10px; font-size: 36px; } specifications specification status comment html
5.2the definition of '<rtc>' in that specification.
... recommendation html
5.1the definition of '<rtc>' in that specification.
... recommendation html
5the definition of '<rtc>' in that specification.
<strike> - HTML: Hypertext Markup Language
obsolete since html
5this feature is obsolete.
... usage note: this element is deprecated in html 4 and xhtml 1, and obsoleted in html
5.
... example <strike>: <strike>today's special: salmon</strike> sold out<br /> <s>: <s>today's special: salmon</s> sold out the result of this code is: specifications specification status comment html
5the definition of '<strike>' in that specification.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
it may help to realize that both are valid and semantic elements in html
5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>).
...<strong> adding to the confusion is the fact that while html 4 defined <strong> as simply indicating a stronger emphasis, html
5 defines <strong> as representing "strong importance for its contents." this is an important distinction to make.
... living standard html
5the definition of '<strong>' in that specification.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
basic example a simple example showing the use of <summary> in a <details> element: <details open> <summary>overview</summary> <ol> <li>cash on hand: $
500.00</li> <li>current invoice: $7
5.30</li> <li>due date:
5/6/19</li> </ol> </details> summaries as headings you can use heading elements in <summary>, like this: <details open> <summary><h4>overview</h4></summary> <ol> <li>cash on hand: $
500.00</li> <li>current invoice: $7
5.30</li> <li>due date:
5/6/19</li> </ol> </details> this currently has some spacing iss...
... html in summaries this example adds some semantics to the <summary> element to indicate the label as important: <details open> <summary><strong>overview</strong></summary> <ol> <li>cash on hand: $
500.00</li> <li>current invoice: $7
5.30</li> <li>due date:
5/6/19</li> </ol> </details> specifications specification status comment html living standardthe definition of '<summary>' in that specification.
... living standard html
5.1the definition of '<summary>' in that specification.
<sup>: The Superscript element - HTML: Hypertext Markup Language
this would be done using, for example, vertical-align: super or, to shift the baseline up
50%, vertical-align:
50%.
...in abbreviations in french: <p>robert a présenté son rapport à m<sup>lle</sup> bernard.</p> the resulting output: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english:
5<sup>th</sup></li> <li>french:
5<sup>ème</sup></li> </ul> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
... living standard html
5the definition of '<sub> and <sup>;' in that specification.
<table>: The Table element - HTML: Hypertext Markup Language
<col span="2"> </colgroup> <tr> <th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow</td> <td>orange</td> </tr> </table> <p>simple table with caption</p> <table> <caption>awesome caption</caption> <tr> <td>awesome data</td> </tr> </table> table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding:
5px; border: 1px solid black; } accessibility concerns captions by supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
... example <table> <caption>color names and values</caption> <tbody> <tr> <th scope="col">name</th> <th scope="col">hex</th> <th scope="col">hsla</th> <th scope="col">rgba</th> </tr> <tr> <th scope="row">teal</th> <td><code>#
51f6f6</code></td> <td><code>hsla(180, 90%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 1)</code></td> </tr> <tr> <th scope="row">goldenrod</th> <td><code>#f6bc
57</code></td> <td><code>hsla(38, 90%, 6
5%, 1)</code></td> <td><code>rgba(246, 188, 87, 1)</code></td> </tr> </tbody> </table> providing a declaration of scope="col" on a <th> element ...
... living standard html
5the definition of 'table element' in that specification.
<var>: The Variable element - HTML: Hypertext Markup Language
this can be overridden in css, like this: var { font: bold 1
5px "courier", "courier new", monospace; } examples basic example here's a simple example, using <var> to denote variable names in a mathematical equation.
... css var { font: bold 1
5px "courier", "courier new", monospace; } html <p>the variables <var>minspeed</var> and <var>maxspeed</var> control the minimum and maximum speed of the apparatus in revolutions per minute (rpm).</p> this html uses <var> to enclose the names of two variables.
... living standard html
5the definition of '<var>' in that specification.
<wbr> - HTML: Hypertext Markup Language
in particular, it behaves like a unicode bidi bn code point, meaning it has no effect on bidi-ordering: <div dir=rtl>123,<wbr>4
56</div> displays, when not broken on two lines, 123,4
56 and not 4
56,123.
... this element was first implemented in internet explorer
5.
5 and was officially defined in html
5.
... living standard html
5the definition of '<wbr>' in that specification.
contenteditable - HTML: Hypertext Markup Language
living standard no change from latest snapshot, html
5.2 html
5.2the definition of 'contenteditable' in that specification.
... recommendation snapshot of html living standard, no change from html
5.1 html
5.1the definition of 'contenteditable' in that specification.
... recommendation snapshot of html living standard, no change from html
5 html
5the definition of 'contenteditable' in that specification.
data-* - HTML: Hypertext Markup Language
for example, a space-ship "sprite" in a game could be a simple <img> element with a class attribute and several data-* attributes: <img class="spaceship cruiserx3" src="shipx3.png" data-ship-id="324" data-weapons="laseri laserii" data-shields="72%" data-x="4143
54" data-y="8
5160" data-z="31940" onclick="spaceships[this.dataset.shipid].blasted()"> for a more in-depth tutorial about using html data attributes, see using data attributes.
... living standard no change from latest snapshot, html
5.1 html
5.1the definition of 'data-*' in that specification.
... recommendation snapshot of html living standard, no change from html
5 html
5the definition of 'data-*' in that specification.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
in quirks mode, layout emulates nonstandard behavior in navigator 4 and internet explorer
5.
...to ensure that your page uses full standards mode, make sure that your page has a doctype like in this example: <!doctype html> <html lang="en"> <head> <meta charset=utf-8> <title>hello world!</title> </head> <body> </body> </html> the doctype shown in the example, <!doctype html>, is the simplest possible, and the one recommended by html
5.
... in html
5, the only purpose of the doctype is to activate full standards mode.
Data URLs - HTTP
for example, the opera 11 browser limited urls to 6
553
5 characters long which limits data urls to 6
5529 characters (6
5529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime type).
...to mitigate such issues, top-level navigation to data:// urls has been blocked in firefox
59+ (release version, nightly/beta from
58), and we hope to see other browsers follow suit soon.
... see blocking top-level navigations to data urls for firefox
58 for more details.
CSP: style-src - HTTP
'<hash-algorithm>-<base64-value>' a sha2
56, sha384 or sha
512 hash of scripts or styles.
...csp supports sha2
56, sha384 and sha
512.
... content-security-policy: style-src 'sha2
56-a330698cbe9dc4ef1fb12e2ee9fc06d
5d14300262fa4dc
5878103ab7347e1
58f' when generating the hash, don't include the <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace.
Date - HTTP
"04" or "
59".
..."04" or "
59".
... examples date: wed, 21 oct 201
5 07:28:00 gmt new date().toutcstring() // "mon, 09 mar 2020 08:13:24 gmt" specifications specification title rfc 7231, section 7.1.1.2: date hypertext transfer protocol (http/1.1): semantics and content ...
If-Modified-Since - HTTP
"04" or "
59".
..."04" or "
59".
... examples if-modified-since: wed, 21 oct 201
5 07:28:00 gmt specifications specification title rfc 7232, section 3.3: if-modified-since hypertext transfer protocol (http/1.1): conditional requests ...
If-Unmodified-Since - HTTP
"04" or "
59".
..."04" or "
59".
... examples if-unmodified-since: wed, 21 oct 201
5 07:28:00 gmt specifications specification title rfc 7232, section 3.4: if-unmodified-since hypertext transfer protocol (http/1.1): conditional requests ...
Last-Modified - HTTP
"04" or "
59".
..."04" or "
59".
... examples last-modified: wed, 21 oct 201
5 07:28:00 gmt specifications specification title rfc 7232, section 2.2: last-modified hypertext transfer protocol (http/1.1): conditional requests ...
Origin - HTTP
note: the origin header is not set on fetch requests with a method of head or get (this behavior was corrected in firefox 6
5 — see bug 1
508661).
... examples origin: https://developer.mozilla.org specifications specification comment rfc 64
54, section 7: origin the web origin concept fetchthe definition of 'origin header' in that specification.
... supplants the origin header as defined in rfc64
54.
Retry-After - HTTP
there are three main cases this header is used: when sent with a
503 (service unavailable) response, this indicates how long the service is expected to be unavailable.
...it is useful to send it along with a
503 (service unavailable) response, so that search engines will keep indexing your site when the downtime is over.
... retry-after: wed, 21 oct 201
5 07:28:00 gmt retry-after: 120 specifications specification title rfc 7231, section 7.1.3: retry-after hypertext transfer protocol (http/1.1): semantics and content ...
Set-Cookie - HTTP
(however, confidential information should never be stored in http cookies, as the entire mechanism is inherently insecure and doesn't encrypt any information.) note: insecure sites (http:) can't set cookies with the secure attribute (since chrome
52 and firefox
52).
... set-cookie: id=a3fwa; expires=wed, 21 oct 201
5 07:28:00 gmt set-cookie: id=a3fwa; max-age=2
592000 invalid domains a cookie for a domain that does not include the server that set it should be rejected by the user agent.
...ure-id=123; secure; domain=example.com set-cookie: __host-id=123; secure; path=/ // rejected due to missing secure attribute set-cookie: __secure-id=1 // rejected due to the missing path=/ attribute set-cookie: __host-id=1; secure // rejected due to setting a domain set-cookie: __host-id=1; secure; path=/; domain=example.com specifications specification title rfc 626
5, section 4.1: set-cookie http state management mechanism draft-ietf-httpbis-rfc626
5bis-0
5 cookie prefixes, same-site cookies, and strict secure cookies ...
HTTP headers - HTTP
accept-ch servers can advertise support for client hints using the accept-ch header field or an equivalent html <meta> element with http-equiv attribute ([html
5]).
... accept-ch-lifetime servers can ask the client to remember the set of client hints that the server supports for a specified period of time, to enable delivery of client hints on subsequent requests to the server’s origin ([rfc64
54]).
... dpr a number that indicates the client’s current device pixel ratio (dpr), which is the ratio of physical pixels over css pixels (section
5.2 of [cssval]) of the layout viewport (section 9.1.1 of [css2]) on the device.
Link prefetching FAQ - HTTP
starting in gecko 1.9.1 (firefox 3.
5), https content can be prefetched.
...an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc
5988 section
5.
... standardization of this technique is part of the scope of html
5, see the current working draft, section §
5.11.3.13.
OPTIONS - HTTP
xamples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-age=604800 date: thu, 13 oct 2016 11:4
5:00 gmt server: eos (lax004/2813) preflighted requests in cors in cors, a preflight request is sent with the options method so that the server can respond if it is acceptable to send the request.
... options /resources/post-here/ http/1.1 host: bar.example accept: 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 connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances.
... http/1.1 204 no content date: mon, 01 dec 2008 01:1
5:39 gmt server: apache/2.0.61 (unix) 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 specifications specification title rfc 7231, section 4.3.7: options ...
A typical HTTP session - HTTP
example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length:
55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b
53a2996dfd46
53c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie age: 7 <!doctype html> <html lang="en"> ...
...<head> <meta charset="utf-8"> <title>a simple webpage</title> </head> <body> <h1>simple html
5 webpage</h1> <p>hello, world!</p> </body> </html> notification that the requested resource has permanently moved: http/1.1 301 moved permanently server: apache/2.4.37 (red hat) content-type: text/html; charset=utf-8 date: thu, 06 dec 2018 17:33:08 gmt location: https://developer.mozilla.org/ (this is the new link to the resource; it is expected that the user-agent will fetch it) keep-alive: timeout=1
5, max=98 accept-ranges: bytes via: moz-cache-zlb0
5 connection: keep-alive content-length: 32
5 (the content contains a default page to display if the user-agent is not able to follow the link) <!doctype html...
... (contains a site-customized page helping the user to find the missing resource) notification that the requested resource doesn't exist: http/1.1 404 not found content-type: text/html; charset=utf-8 content-length: 38217 connection: keep-alive cache-control: no-cache, no-store, must-revalidate, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:3
5:13 gmt expires: thu, 06 dec 2018 17:3
5:13 gmt server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie x-cache: error from cloudfront <!doctype html...
206 Partial Content - HTTP
status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 1
5 nov 201
5 06:2
5:24 gmt last-modified: wed, 1
5 nov 201
5 04:
58:08 gmt content-range: bytes 21010-47021/47022 content-length: 26012 content-type: image/gif ...
... a response containing several ranges: http/1.1 206 partial content date: wed, 1
5 nov 201
5 06:2
5:24 gmt last-modified: wed, 1
5 nov 201
5 04:
58:08 gmt content-length: 1741 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 234-639/8000 ...the first range...
... --string_separator content-type: application/pdf content-range: bytes 4
590-7999/8000 ...the second range --string_separator-- specifications specification title rfc 7233, section 4.1: 206 partial content hypertext transfer protocol (http/1.1): range requests ...
412 Precondition Failed - HTTP
status 412 precondition failed examples etag: "33a64df
55142
5fcc
55e4d42a14879
5d9f2
5f89d4" etag: w/"081
5" avoiding mid-air collisions with the help of the etag and the if-match headers, you can detect mid-air edit collisions.
... for example, when editing mdn, the current wiki content is hashed and put into an etag in the response: etag: "33a64df
55142
5fcc
55e4d42a14879
5d9f2
5f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
... if-match: "33a64df
55142
5fcc
55e4d42a14879
5d9f2
5f89d4" if the hashes don't match, it means that the document has been edited in-between and a 412 precondition failed error is thrown.
About JavaScript - JavaScript
the first ever javascript was created by brendan eich at netscape, and has since been updated to conform to ecma-262 edition
5 and later versions.
...like spidermonkey, rhino is ecma-262 edition
5 compliant.
... several major runtime optimizations such as tracemonkey (firefox 3.
5), jägermonkey (firefox 4) and ionmonkey were added to the spidermonkey javascript engine over time.
Details of the object model - JavaScript
note that ecmascript 201
5 introduces a class declaration: javascript classes, introduced in ecmascript 201
5, are primarily syntactical sugar over javascript's existing prototype-based inheritance.
...see bug 6341
50 if you want the nitty-gritty details.
...in this case, by the time the mac object is created, mac.id is
5.
Meta programming - JavaScript
« previousnext » starting with ecmascript 201
5, javascript gains support for the proxy and reflect objects allowing you to intercept and define custom behavior for fundamental language operations (e.g.
... with reflect.has() for example, you get the in operator as a function: reflect.has(object, 'assign') // true a better apply function in es
5, you typically use the function.prototype.apply() method to call a function with a given this value and arguments provided as an array (or an array-like object).
... function.prototype.apply.call(math.floor, undefined, [1.7
5]) with reflect.apply this becomes less verbose and easier to understand: reflect.apply(math.floor, undefined, [1.7
5]) // 1 reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" checking if property definition has been successful with object.defineproperty, which returns an object if successful, or throws a typeerror otherwise, you would use a try...catch block to catch any error that occurred while defining a property.
Classes - JavaScript
classes in js are built on prototypes but also have some syntax and semantics that are not shared with es
5 classalike semantics.
... class point { constructor(x, y) { this.x = x; this.y = y; } static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y; return math.hypot(dx, dy); } } const p1 = new point(
5,
5); const p2 = new point(10, 10); p1.distance; //undefined p2.distance; //undefined console.log(point.distance(p1, p2)); // 7.07106781186
547
55 binding this with prototype and static methods when a static or prototype method is called without a value for this, such as by assigning a variable to the method and then calling it, the this value will be undefined inside the method.
... (in non-strict mode) instance properties instance properties must be defined inside of class methods: class rectangle { constructor(height, width) { this.height = height; this.width = width; } } static (class-side) data properties and prototype data properties must be defined outside of the classbody declaration: rectangle.staticwidth = 20; rectangle.prototype.prototypewidth = 2
5; field declarations public and private field declarations are an experimental feature (stage 3) proposed at tc39, the javascript standards committee.
The legacy Iterator protocol - JavaScript
the legacy iterator protocol was a spidermonkey-specific feature, which is removed in firefox
58+.
... the deprecated firefox-only iterator protocol firefox, prior to version 26 implemented another iterator protocol that is similar to the standard es201
5 iterator protocol.
... difference between legacy and es201
5 iterator protocols the value was returned directly as a return value of calls to next, instead of the value property of a placeholder object iteration termination was expressed by throwing a stopiteration object.
Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
in object) { console.log(x); // 10 // 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var x = object[key]; console.log(x); // 10 // 20 } or, using for...of (es201
5) and object.values (es2017), you can get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var x of object.values(object)) { console.log(x); // 10 // 20 } array iteration for each...in has been used to iterate over specified array elements.
... deprecated syntax var array = [10, 20, 30]; for each (var x in array) { console.log(x); // 10 // 20 // 30 } alternative standard syntax this is now possible with for...of (es201
5) loops as well.
...ue); // "a", 10 // "b", 20 } alternative standard syntax you can now use the standard for...in loop to iterate over specified object keys, and get each value inside the loop: var object = { a: 10, b: 20 }; for (var key in object) { var value = object[key]; console.log(key, value); // "a", 10 // "b", 20 } or, using for...of (es201
5) and object.entries (es2017), you can get an array of the specified object values and iterate over the array like this: var object = { a: 10, b: 20 }; for (var [key, value] of object.entries(object)) { console.log(key, value); // "a", 10 // "b", 20 } ...
SyntaxError: a declaration in the head of a for-of loop can't have an initializer - JavaScript
examples invalid for-of loop let iterable = [10, 20, 30]; for (let value =
50 of iterable) { console.log(value); } // syntaxerror: a declaration in the head of a for-of loop can't // have an initializer valid for-of loop you need to remove the initializer (value =
50) in the head of the for-of loop.
... maybe you intended to make
50 an offset value, in that case you could add it to the loop body, for example.
... let iterable = [10, 20, 30]; for (let value of iterable) { value +=
50; console.log(value); } // 60 // 70 // 80 ...
RangeError: argument is not a valid code point - JavaScript
the javascript exception "invalid code point" occurs when nan values, negative integers (-1), non-integers (
5.4), or values larger than 0x10ffff (1114111) are used with string.fromcodepoint().
... string.fromcodepoint() throws this error when passed nan values, negative integers (-1), non-integers (
5.4), or values larger than 0x10ffff (1114111).
... examples invalid cases string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror valid cases string.fromcodepoint(42); // "*" string.fromcodepoint(6
5, 90); // "az" string.fromcodepoint(0x404); // "\u0404" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194
564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307) // "\ud834\udf06a\ud834\udf07" ...
setter - JavaScript
expression starting with ecmascript 201
5, you can also use expressions for a computed property name to bind to the given function.
... note the following when working with the set syntax: it can have an identifier which is either a number or a string; it must have exactly one parameter (see incompatible es
5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another set or with a data entry for the same property.
... const o = {a: 0}; object.defineproperty(o, 'b', { set: function(x) { this.a = x / 2; } }); o.b = 10; // runs the setter, which assigns 10 / 2 (
5) to the 'a' property console.log(o.a) //
5 using a computed property name const expr = 'foo'; const obj = { baz: 'bar', set [expr](v) { this.baz = v; } }; console.log(obj.baz); // "bar" obj.foo = 'baz'; // run the setter console.log(obj.baz); // "baz" specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specificat...
Array.prototype[@@unscopables] - JavaScript
the @@unscopable symbol property contains property names that were not included in the ecmascript standard prior to the es201
5 version.
... property attributes of array.prototype[@@unscopables] writable no enumerable no configurable yes examples use in with environments the following code works fine in es
5 and below.
... however, in ecmascript 201
5 and later, the array.prototype.keys() method was introduced.
Date.prototype.getMinutes() - JavaScript
syntax dateobj.getminutes() return value an integer number, between 0 and
59, representing the minutes in the given date according to local time.
... examples using getminutes() the second statement below assigns the value 1
5 to the variable minutes, based on the value of the date object xmas9
5.
... var xmas9
5 = new date('december 2
5, 199
5 23:1
5:30'); var minutes = xmas9
5.getminutes(); console.log(minutes); // 1
5 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getminutes' in that specification.
Date.prototype.getMonth() - JavaScript
examples using getmonth() the second statement below assigns the value 11 to the variable month, based on the value of the date object xmas9
5.
... var xmas9
5 = new date('december 2
5, 199
5 23:1
5:30'); var month = xmas9
5.getmonth(); console.log(month); // 11 note: if needed, the full name of a month ("january" for example) can be obtained by using intl.datetimeformat() with an options parameter.
... using this method, internationalization is made easier: var options = { month: 'long'}; console.log(new intl.datetimeformat('en-us', options).format(xmas9
5)); // december console.log(new intl.datetimeformat('de-de', options).format(xmas9
5)); // dezember specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getmonth' in that specification.
Date.prototype.getSeconds() - JavaScript
syntax dateobj.getseconds() return value an integer number, between 0 and
59, representing the seconds in the given date according to local time.
... examples using getseconds() the second statement below assigns the value 30 to the variable seconds, based on the value of the date object xmas9
5.
... var xmas9
5 = new date('december 2
5, 199
5 23:1
5:30'); var seconds = xmas9
5.getseconds(); console.log(seconds); // 30 specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getseconds' in that specification.
Date.prototype.setMinutes() - JavaScript
syntax dateobj.setminutes(minutesvalue[, secondsvalue[, msvalue]]) versions prior to javascript 1.3 dateobj.setminutes(minutesvalue) parameters minutesvalue an integer between 0 and
59, representing the minutes.
...an integer between 0 and
59, representing the seconds.
... examples using setminutes() var thebigday = new date(); thebigday.setminutes(4
5); specifications specification ecmascript (ecma-262)the definition of 'date.prototype.setminutes' in that specification.
Math.ceil() - JavaScript
math.ceil(.9
5); // 1 math.ceil(4); // 4 math.ceil(7.004); // 8 math.ceil(-0.9
5); // -0 math.ceil(-4); // -4 math.ceil(-7.004); // -7 decimal adjustment // closure (function() { /** * decimal adjustment of a number.
...0 = function(value, exp) { return decimaladjust('round', value, exp); }; } // decimal floor if (!math.floor10) { math.floor10 = function(value, exp) { return decimaladjust('floor', value, exp); }; } // decimal ceil if (!math.ceil10) { math.ceil10 = function(value, exp) { return decimaladjust('ceil', value, exp); }; } })(); // round math.round10(
55.
55, -1); //
55.6 math.round10(
55.
549, -1); //
55.
5 math.round10(
55, 1); // 60 math.round10(
54.9, 1); //
50 math.round10(-
55.
55, -1); // -
55.
5 math.round10(-
55.
551, -1); // -
55.6 math.round10(-
55, 1); // -
50 math.round10(-
55.1, 1); // -60 // floor math.floor10(
55.
59, -1); //
55.
5 math.floor10(
59, 1); //
50 math.floor10(-
55.
51, -1); // -
55.6 math.floor10(-
51, 1); ...
... // -60 // ceil math.ceil10(
55.
51, -1); //
55.6 math.ceil10(
51, 1); // 60 math.ceil10(-
55.
59, -1); // -
55.
5 math.ceil10(-
59, 1); // -
50 specifications specification ecmascript (ecma-262)the definition of 'math.ceil' in that specification.
Math.floor() - JavaScript
examples using math.floor() math.floor( 4
5.9
5); // 4
5 math.floor( 4
5.0
5); // 4
5 math.floor( 4 ); // 4 math.floor(-4
5.0
5); // -46 math.floor(-4
5.9
5); // -46 decimal adjustment /** * decimal adjustment of a number.
...(+value[1] + exp) : exp)); } // decimal round const round10 = (value, exp) => decimaladjust('round', value, exp); // decimal floor const floor10 = (value, exp) => decimaladjust('floor', value, exp); // decimal ceil const ceil10 = (value, exp) => decimaladjust('ceil', value, exp); // round round10(
55.
55, -1); //
55.6 round10(
55.
549, -1); //
55.
5 round10(
55, 1); // 60 round10(
54.9, 1); //
50 round10(-
55.
55, -1); // -
55.
5 round10(-
55.
551, -1); // -
55.6 round10(-
55, 1); // -
50 round10(-
55.1, 1); // -60 // floor floor10(
55.
59, -1); //
55.
5 floor10(
59, 1); //
50 floor10(-
55.
51, -1); // -
55.6 floor10(-
51, 1); // -60 // ceil ceil10(
55.
51, -1); //
55.6 ceil10(
5...
...1, 1); // 60 ceil10(-
55.
59, -1); // -
55.
5 ceil10(-
59, 1); // -
50 specifications specification ecmascript (ecma-262)the definition of 'math.floor' in that specification.
Object.prototype.__lookupGetter__() - JavaScript
examples standard-compliant and non-standard ways to get a property getter var obj = { get foo() { return math.random() > 0.
5 ?
... 'foo' : 'bar'; } }; // non-standard and deprecated way obj.__lookupgetter__('foo'); // (function() { return math.random() > 0.
5 ?
... 'foo' : 'bar'; }) // standard-compliant way object.getownpropertydescriptor(obj, "foo").get; // (function() { return math.random() > 0.
5 ?
Object.create() - JavaScript
note that while the setting of null as [[prototype]] is supported in the real es
5 object.create, this polyfill cannot support it due to a limitation inherent in versions of ecmascript lower than
5.
...object.assign() was introduced with es201
5 and can be polyfilled.
...s to *property descriptors*.) o = object.create(object.prototype, { // foo is a regular 'value property' foo: { writable: true, configurable: true, value: 'hello' }, // bar is a getter-and-setter (accessor) property bar: { configurable: false, get: function() { return 10; }, set: function(value) { console.log('setting `o.bar` to', value); } /* with es201
5 accessors our code can look like this get() { return 10; }, set(value) { console.log('setting `o.bar` to', value); } */ } }); function constructor() {} o = new constructor(); // is equivalent to: o = object.create(constructor.prototype); // of course, if there is actual initialization code // in the constructor function, // the object.create() cannot reflect it // create a...
Object.freeze() - JavaScript
in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it were a frozen ordinary object, and be simply returned.
... > object.freeze(1) typeerror: 1 is not an object // es
5 code > object.freeze(1) 1 // es201
5 code an arraybufferview with elements will cause a typeerror, as they are views over memory and will definitely cause other possible issues: > object.freeze(new uint8array(0)) // no elements uint8array [] > object.freeze(new uint8array(1)) // has elements typeerror: cannot freeze array buffer views with elements > object.freeze(new dataview(new arraybuffer(32))) // no elements dataview {} > object.freeze(new float64array(new arraybuffer(64), 63, 0)) // no elements float64array [] > object.freeze(new float64array(new arraybuffer(64), 32, 2)) // has elements typeerror: cannot freeze array buffer views with elements note that; as the standard three properties (buf...
Object.getOwnPropertyDescriptor() - JavaScript
: 42 }; d = object.getownpropertydescriptor(o, 'bar'); // d is { // configurable: true, // enumerable: true, // value: 42, // writable: true // } o = { [symbol.for('baz')]: 73 } d = object.getownpropertydescriptor(o, symbol.for('baz')); // d is { // configurable: true, // enumerable: true, // value: 73, // writable: true // } o = {}; object.defineproperty(o, 'qux', { value: 867
5309, writable: false, enumerable: false }); d = object.getownpropertydescriptor(o, 'qux'); // d is { // value: 867
5309, // writable: false, // enumerable: false, // configurable: false // } non-object coercion in es
5, if the first argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object first argument will be coerced to an object at first.
... object.getownpropertydescriptor('foo', 0); // typeerror: "foo" is not an object // es
5 code object.getownpropertydescriptor('foo', 0); // object returned by es201
5 code: { // configurable: false, // enumerable: true, // value: "f", // writable: false // } specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertydescriptor' in that specification.
Object.getPrototypeOf() - JavaScript
examples using getprototypeof var proto = {}; var obj = object.create(proto); object.getprototypeof(obj) === proto; // true non-object coercion in es
5, it will throw a typeerror exception if the obj parameter isn't an object.
... in es201
5, the parameter will be coerced to an object.
... object.getprototypeof('foo'); // typeerror: "foo" is not an object (es
5 code) object.getprototypeof('foo'); // string.prototype (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.getprototypeof' in that specification.
Object.isExtensible() - JavaScript
var frozen = object.freeze({}); object.isextensible(frozen); // === false non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it was a non-extensible ordinary object, simply return false.
... object.isextensible(1); // typeerror: 1 is not an object (es
5 code) object.isextensible(1); // false (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.isextensible' in that specification.
Object.isFrozen() - JavaScript
object.issealed(frozen); // === true non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it was a frozen ordinary object, simply return true.
... object.isfrozen(1); // typeerror: 1 is not an object (es
5 code) object.isfrozen(1); // true (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.isfrozen' in that specification.
Object.isSealed() - JavaScript
object.isfrozen(sealed); // === true // (all properties also non-writable) var s2 = object.seal({ p: 3 }); object.isfrozen(s2); // === false // ('p' is still writable) var s3 = object.seal({ get p() { return 0; } }); object.isfrozen(s3); // === true // (only configurability matters for accessor properties) non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it was a sealed ordinary object, simply return true.
... object.issealed(1); // typeerror: 1 is not an object (es
5 code) object.issealed(1); // true (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.issealed' in that specification.
Object.keys() - JavaScript
non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... from es201
5 onwards, a non-object argument will be coerced to an object.
... // in es
5 object.keys('foo'); // typeerror: "foo" is not an object // in es201
5+ object.keys('foo'); // ["0", "1", "2"] specifications specification ecmascript (ecma-262)the definition of 'object.keys' in that specification.
Object.seal() - JavaScript
object.defineproperty(obj, 'ohai', { value: 17 }); // throws a typeerror object.defineproperty(obj, 'foo', { value: 'eit' }); // changes existing property value non-object coercion in es
5, if the argument to this method is not an object (a primitive), then it will cause a typeerror.
... in es201
5, a non-object argument will be treated as if it was a sealed ordinary object by simply returning it.
... object.seal(1); // typeerror: 1 is not an object (es
5 code) object.seal(1); // 1 (es201
5 code) specifications specification ecmascript (ecma-262)the definition of 'object.seal' in that specification.
Object.prototype.toString() - JavaScript
the following code illustrates this: const o = new object(); o.tostring(); // returns [object object] note: starting in javascript 1.8.
5, tostring() called on null returns [object null], and undefined returns [object undefined], as defined in the
5th edition of ecmascript and subsequent errata.
... by using radix you can also convert base 10 numbers (like 1,2,3,4,
5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected output is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected output is "10100" some common radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for hexadecimal numbers.
... const tostring = object.prototype.tostring; tostring.call(new date); // [object date] tostring.call(new string); // [object string] tostring.call(math); // [object math] // since javascript 1.8.
5 tostring.call(undefined); // [object undefined] tostring.call(null); // [object null] using tostring() in this way is unreliable; objects can change the behavior of object.prototype.tostring() by defining a symbol.tostringtag property, leading to unexpected results.
Promise.all() - JavaScript
note, google chrome
58 returns an already resolved promise in this case.
...s fulfilled): // this will be counted as if the iterable passed is empty, so it gets fulfilled var p = promise.all([1,2,3]); // this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled var p2 = promise.all([1,2,3, promise.resolve(444)]); // this will be counted as if the iterable passed contains only the rejected promise with value "
555", so it gets rejected var p3 = promise.all([1,2,3, promise.reject(
555)]); // using settimeout we can execute code after the stack is empty settimeout(function() { console.log(p); console.log(p2); console.log(p3); }); // logs // promise { <state>: "fulfilled", <value>: array[3] } // promise { <state>: "fulfilled", <value>: array[4] } // promise { <state>: "rejected", <reason>:
555 ...
... var p1 = new promise((resolve, reject) => { settimeout(() => resolve('one'), 1000); }); var p2 = new promise((resolve, reject) => { settimeout(() => resolve('two'), 2000); }); var p3 = new promise((resolve, reject) => { settimeout(() => resolve('three'), 3000); }); var p4 = new promise((resolve, reject) => { settimeout(() => resolve('four'), 4000); }); var p
5 = new promise((resolve, reject) => { reject(new error('reject')); }); // using .catch: promise.all([p1, p2, p3, p4, p
5]) .then(values => { console.log(values); }) .catch(error => { console.error(error.message) }); //from console: //"reject" it is possible to change this behaviour by handling possible rejections: var p1 = new promise((resolve, reject) => { settimeout(() => resolve('...
Promise - JavaScript
// in reality, you will probably be using something like xhr or an html
5 api.
... }, 2
50) }) myfirstpromise.then((successmessage) => { // successmessage is whatever we passed in the resolve(...) function above.
...tion tetheredgetnumber(resolve, reject) { try { settimeout( function() { const randomint = date.now(); const value = randomint % 10; try { if(value >= threshold_a) { throw new error(`too large: ${value}`); } } catch(msg) { reject(`error in callback ${msg}`); } resolve(value); return; },
500); // to experiment with error at set-up, uncomment the following 'throw'.
Reflect.apply() - JavaScript
description in es
5, you typically use the function.prototype.apply() method to call a function with a given this value and arguments provided as an array (or an array-like object).
... function.prototype.apply.call(math.floor, undefined, [1.7
5]); with reflect.apply() this becomes less verbose and easier to understand.
... examples using reflect.apply() reflect.apply(math.floor, undefined, [1.7
5]); // 1; reflect.apply(string.fromcharcode, undefined, [104, 101, 108, 108, 111]) // "hello" reflect.apply(regexp.prototype.exec, /ab/, ['confabulation']).index // 4 reflect.apply(''.charat, 'ponies', [3]) // "i" specifications specification ecmascript (ecma-262)the definition of 'reflect.apply' in that specification.
RegExp.prototype.sticky - JavaScript
examples using a regular expression with the sticky flag var str = '#foo#'; var regex = /foo/y; regex.lastindex = 1; regex.test(str); // true regex.lastindex =
5; regex.test(str); // false (lastindex is taken into account with sticky flag) regex.lastindex; // 0 (reset after match failure) anchored sticky flag for several versions, firefox's spidermonkey engine had a bug with regard to the ^ assertion and the sticky flag which allowed expressions starting with the ^ assertion and using the sticky flag to match when they shouldn't.
... the bug was introduced some time after firefox 3.6 (which had the sticky flag but not the bug) and fixed in 201
5.
... perhaps because of the bug, the es201
5 specification specifically calls out the fact that: when the y flag is used with a pattern, ^ always matches only at the beginning of the input, or (if multiline is true) at the beginning of a line.
RegExp - JavaScript
let str = '#foo#' let regex = /foo/y regex.lastindex = 1 regex.test(str) // true regex.lastindex =
5 regex.test(str) // false (lastindex is taken into account with sticky flag) regex.lastindex // 0 (reset after match failure) the difference between the sticky flag and the global flag with the sticky flag y, the next match has to happen at the lastindex position, while with the global flag g, the match can happen at the lastindex position or later: re = /\d/y; while (r = re.exec("123...
... 4
56")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, input: '123 4
56', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, input: '123 4
56', groups: undefined ] and re.lastindex 2 // [ '3', index: 2, input: '123 4
56', groups: undefined ] and re.lastindex 3 // ...
... let text = 'Образец text на русском языке' let regex = /[\u0400-\u04ff]+/g let match = regex.exec(text) console.log(match[0]) // logs 'Образец' console.log(regex.lastindex) // logs '7' let match2 = regex.exec(text) console.log(match2[0]) // logs 'на' [did not log 'text'] console.log(regex.lastindex) // logs '1
5' // and so on the unicode property escapes feature introduces a solution, by allowing for a statement as simple as \p{scx=cyrl}.
String.fromCodePoint() - JavaScript
polyfill the string.fromcodepoint() method has been added to ecmascript 201
5 and may not be supported in all web browsers or environments yet.
...// ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); examples using fromcodepoint() valid input: string.fromcodepoint(42); // "*" string.fromcodepoint(6
5, 90); // "az" string.fromcodepoint(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194
564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307); // "\ud834\udf06a\ud834\udf07" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerro...
...instead, it requires the utf-16 surrogate pair in order to return a supplementary character: string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(
553
56,
57091); // stars" == "\ud83c\udf03" string.fromcodepoint(), on the other hand, can return 4-byte supplementary characters, as well as the more common 2-byte bmp characters, by specifying their code point (which is equivalent to the utf-32 code unit): string.fromcodepoint(0x1f303); // or 127747 in decimal specifications specification ecmascript (ecma-262)the def...
WebAssembly.Memory() constructor - JavaScript
note: a webassembly page has a constant size of 6
5,
536 bytes, i.e., 64kib.
... desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0shared flagchrome full support ...
Iteration protocols - JavaScript
as a couple of additions to ecmascript 201
5, iteration protocols aren't new built-ins or syntax, but protocols.
... with es201
5 class class simpleclass { constructor(data) { this.data = data; } [symbol.iterator]() { // use a new index for each iterator.
... let index = 0; return { next: () => { if (index < this.data.length) { return {value: this.data[index++], done: false} } else { return {done: true} } } } } } const simple = new simpleclass([1,2,3,4,
5]); for (const val of simple) { console.log(val); // '1' '2' '3' '4' '
5' } is a generator object an iterator or an iterable?
yield* - JavaScript
function* g1() { yield 2; yield 3; yield 4; } function* g2() { yield 1; yield* g1(); yield
5; } const iterator = g2(); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} console.log(iterator.next()); // {value: 4, done: false} console.log(iterator.next()); // {value:
5, done: false} console.log(iterator.next()); // {value: undefined, done: true} other iterable objec...
... function* g3() { yield* [1, 2]; yield* '34'; yield* array.from(arguments); } const iterator = g3(
5, 6); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: "3", done: false} console.log(iterator.next()); // {value: "4", done: false} console.log(iterator.next()); // {value:
5, done: false} console.log(iterator.next()); // {value: 6, done: false} console.log(iterator.next()); // {value: undefined, done: true} the value of yield* expression itself yield* is an expression, not a statement—so it evaluates to a value.
... function* g4() { yield* [1, 2, 3]; return 'foo'; } function* g
5() { const g4returnvalue = yield* g4(); console.log(g4returnvalue) // 'foo' return g4returnvalue; } const iterator = g
5(); console.log(iterator.next()); // {value: 1, done: false} console.log(iterator.next()); // {value: 2, done: false} console.log(iterator.next()); // {value: 3, done: false} done is false because g
5 generator isn't finished, only g4 console.log(iterator.next()); // {value: 'foo', done: true} specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
yield - JavaScript
function* countapplesales () { let salelist = [3, 7,
5] for (let i = 0; i < salelist.length; i++) { yield salelist[i] } } once a generator function is defined, it can be used by constructing an iterator as shown.
... let applestore = countapplesales() // generator { } console.log(applestore.next()) // { value: 3, done: false } console.log(applestore.next()) // { value: 7, done: false } console.log(applestore.next()) // { value:
5, done: false } console.log(applestore.next()) // { value: undefined, done: true } you can also send a value with next(value) into the generator.
...unction* counter(value) { let step; while (true) { step = yield ++value; if (step) { value += step; } } } const generatorfunc = counter(0); console.log(generatorfunc.next().value); // 1 console.log(generatorfunc.next().value); // 2 console.log(generatorfunc.next().value); // 3 console.log(generatorfunc.next(10).value); // 14 console.log(generatorfunc.next().value); // 1
5 console.log(generatorfunc.next(10).value); // 26 specifications specification ecmascript (ecma-262)the definition of 'yield' in that specification.
continue - JavaScript
var i = 0; var n = 0; while (i <
5) { i++; if (i === 3) { continue; } n += i; } using continue with a label in the following example, a statement labeled checkiandj contains a statement labeled checkj.
...j: 7 j: 6
5 is odd.
... j:
5 // end checkj i = 1 j = 4 i: 1 i = 2 j = 4 i: 2 i = 3 j = 4 i: 3 i = 4 j = 4 specifications specification ecmascript (ecma-262)the definition of 'continue statement' in that specification.
JavaScript
as of 2012, all modern browsers fully support ecmascript
5.1.
...on june 17, 201
5, ecma international published the sixth major version of ecmascript, which is officially called ecmascript 201
5, and was initially referred to as ecmascript 6 or es6.
...it is a restricted variant of ecmascript
5, for faster performance and easier debugging.
Values - MathML
(the "x"-height of the element, 1ex ≈ 0.
5em in many fonts) px pixels in inches (1 inch = 2.
54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value.
... constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.0
5555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace => 0.16666666666666666em mediummathspace => 0.2222222222222222em thickmathspace => 0.2777777777777778em verythickmathspace => 0.3333333333333333em veryverythickmathspace => 0.3888888888888889em constant value veryverythinmathspace 1/18em verythinmathspace 2/18em thinmathspace 3/18em mediummathspace 4/18em thickmathspace
5/18em verythickmathspace 6/18em veryverythickmathspace 7/18em negative contstants are introduced in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonke...
...y 2.4) (bug 6
50
530) negativeveryverythinmathspace -1/18em negativeverythinmathspace -2/18em negativethinmathspace -3/18em negativemediummathspace -4/18em negativethickmathspace -
5/18em negativeverythickmathspace -6/18em negativeveryverythickmathspace -7/18em note: namedspace binding is deprecated in mathml3 and has been removed in gecko 1
5.0 (firefox 1
5.0 / thunderbird 1
5.0 / seamonkey 2.12) (bug 6737
59).
<mo> - MathML
the constant thickmathspace (
5/18em) is the default value.
...the constant thickmathspace (
5/18em) is the default value.
... examples <math> <mrow> <mn>
5</mn> <mo>+</mo> <mn>
5</mn> </mrow> <mrow> <mo> [ </mo> <!-- default form value: prefix --> <mrow> <mn> 0 </mn> <mo> ; </mo> <!-- default form value: infix --> <mn> 1 </mn> </mrow> <mo> ) </mo> <!-- default form value: postfix --> </mrow> </math> specifications specification status comment mathml 3.0the definition of 'mo' in that specificati...
Media - Progressive web apps (PWAs)
(in html
5, this can be marked up with the <nav> element instead of <div> with an id attribute.) when printing the document, the navigation area has no purpose.
... example these rules specify styles for a button that changes dynamically as the user interacts with it: .green-button { background-color:#cec; color:#black; border:2px outset #cec; padding:
5px 10px; } .green-button[disabled] { background-color:#cdc; color:#777; } .green-button:active, .green-button.active { border-style: inset; } <table> <tbody> <tr> <td><button class="green-button" disabled>click me</button></td> <td><button class="green-button">click me</button></td> <td><button class="green-button active">click me</button></td> </tr> <tr style="line...
...-height:2
5%;"> <td> </td> </tr> <tr style="font-style:italic;"> <td>disabled</td> <td>normal</td> <td>active</td> </tr> </tbody> </table> live sample a fully functional button also has a dark outline around the entire button when it is the default, and a dotted outline on the face of the button when it has keyboard focus.
cx - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="2
5%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="
50" cy="
50" r="4
5"/> <ellipse cx="1
50" cy="
50" rx="4
5" ry="2
5" /> <rect x="20
5" y="
5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value
50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="
50%" id="mygra...
...dient0
50"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient0
50)" stroke="black" /> <rect x="2
5" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cx'...
cy - SVG: Scalable Vector Graphics
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="2
5%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="
50" cx="
50" r="4
5"/> <ellipse cy="1
50" cx="
50" rx="4
5" ry="2
5" /> <rect x="
5" y="20
5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value
50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="
50%" id="mygra...
...dient0
50"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="100%" id="mygradient100"> <stop offset="0%" stop-color="gold" /> <stop offset="
50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient0
50)" stroke="black" /> <rect x="2
5" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'cy'...
dx - SVG: Scalable Vector Graphics
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="
50%" y2="
50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="
50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="
50%" x="10%" y="
50%">svg</text> </svg> line { stroke: red; stroke-width: .
5px; stroke-dasharray: 3px; } altglyph warning: as of s...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="2
5%" y2="2
5%" /> <line x1="0" x2="100%" y1="
50%" y2="
50%" /> <line x1="0" x2="100%" y1="7
5%" y2="7
5%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="30%" x2="30%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- behaviors change based on the number of values in the attributes --> <text dx="20%" x="10%" y="2
5%">svg</text> <text dx="...
...0 10%" x="10%" y="
50%">svg</text> <text dx="0 10% 20%" x="10%" y="7
5%">svg</text> </svg> line { stroke: red; stroke-width: .
5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
dy - SVG: Scalable Vector Graphics
0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="
50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .
5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 1
50 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="
50" y2="
50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="
50" x2="
50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y2="100...
...%" /> <!-- behaviors change based on the number of values in the attributes --> <text dy="20" x="10" y="30">svg</text> <text dy="0 10" x="
50" y="30">svg</text> <text dy="0 10 20" x="90" y="30">svg</text> </svg> line { stroke: red; stroke-width: .
5px; stroke-dasharray: 3px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used.
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.
5" cy="0.
5" r="0.
5" fx="0.7
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="1
5" ry="1
5" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="
50" fill="transparent" stroke="white" stroke-width="2"/> <circle ...
...cx="3
5" cy="3
5" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fx' in that specification.
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.7
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100"...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="1
5" ry="1
5" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="
50" fill="transparent" stroke="white" stroke-width="2"/> <circle ...
...cx="3
5" cy="3
5" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'fy' in that specification.
orient - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="
5" refy="
5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10
5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="
5" refy="
5" markerwidth="6" markerheight="6" orient="-6
5deg"> <path d="m 0 0 l 10
5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> ...
... <polyline points="1
5,80 29,
50 43,60
57,30 71,40 8
5,1
5" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its positive x-axis is pointing in a direction relative to the path at the position the marker is placed.
... note: for example, if a value of 4
5 is given, then the marker's positive x-axis would be pointing down and right in the shape's coordinate system.
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="
50,0 21,90 98,3
5 2,3
5 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="
50,0 21,90 98,3
5 2,3
5 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="
50,0 21,90 98,3
5 2,3
5 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="
50,0 21,90 98,3
5 2,3
5 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
r - SVG: Scalable Vector Graphics
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="
50%" id="mygradient0
50"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="
50" cy="
50" r="0"/> <circle cx="1
50" cy="
50" r="2
5"/> <circle cx="2
50" cy="
50" r="
50"/> ...
... <rect x="20" y="120" width="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#mygradient0
50)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size.
... value <length> | <percentage> default value
50% animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification.
rotate - SVG: Scalable Vector Graphics
examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -4
5 0,1 110 10 a120,120 -4
5 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-
5,-
5 l10,0 -
5,
5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g tr...
...ansform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-
5,-
5 l10,0 -
5,
5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-
5,-
5 l10,0 -
5,
5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <u...
...se href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-
5,-
5 l10,0 -
5,
5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' in that specification.
viewBox - SVG: Scalable Vector Graphics
ox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="
50%" cy="
50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved aga...
...inst 10 as set in the viewbox --> <circle cx="
50%" cy="
50%" r="4" fill="white"/> </svg> <svg viewbox="-
5 -
5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the center of the viewport the value
50% is resolve to
5 which means the center of the circle is in the bottom/right corner of the viewport.
... --> <circle cx="
50%" cy="
50%" r="4" fill="white"/> </svg> the exact effect of this attribute is influenced by the preserveaspectratio attribute.
x - SVG: Scalable Vector Graphics
age>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="2
5%" y1="0" x2="2
5%" y2="100%" /> <line x1="
50%" y1="0" x2="
50%" y2="100%" /> <line x1="7
5%" y1="0" x2="7
5%" y2="100%" /> <!-- x with a single value --> <text y="40%" x="
50%">svg</text> <!-- x with multiple values --> <text y="90%" x="2
5%,
50%, 7
5%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .
5px; stroke-dasharray: 2px; }...
...>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="2
5%" y1="0" x2="2
5%" y2="100%" /> <line x1="
50%" y1="0" x2="
50%" y2="100%" /> <line x1="7
5%" y1="0" x2="7
5%" y2="100%" /> <text> <!-- x with a single value --> <tspan y="40%" x="
50%">svg</tspan> <!-- x with multiple values --> <tspan y="90%" x="2
5%,
50%, 7
5%">svg</tspan> </text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .
...
5px; stroke-dasharray: 2px; } use for <use>, x defines the x coordinate of the uper left corner of the referenced element.
<clipPath> - SVG: Scalable Vector Graphics
--> <circle cx="40" cy="3
5" r="3
5" /> </clippath> <!-- the original black heart, for reference --> <path id="heart" d="m10,30 a20,20,0,0,1,
50,30 a20,20,0,0,1,90,30 q90,60,
50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible.
...*/ @keyframes openyourheart {from {r: 0} to {r: 60px}} #myclip circle { animation: openyourheart 1
5s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element.
...for example, a circle with a radius of 10 which is clipped to a circle with a radius of
5 will not receive "click" events outside the smaller radius.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="
50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fepointlight x="1
50" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="ar...
...ithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="
50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="
50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> ...
... <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" y="
5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="
50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '<fediffuselighting>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
example svg <svg width="100%" height="100%" viewbox="0 0
500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
... --> <path id="path1" d="m100,2
50 c 100,
50 400,
50 400,2
50" fill="none" stroke="blue" stroke-width="7.06" /> <circle cx="100" cy="2
50" r="17.64" fill="blue" /> <circle cx="2
50" cy="100" r="17.64" fill="blue" /> <circle cx="400" cy="2
50" r="17.64" fill="blue" /> <!-- here is a triangle which will be moved about the motion path.
...--> <path d="m-2
5,-12.
5 l2
5,-12.
5 l 0,-87.
5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification.
Clipping and masking - SVG: Scalable Vector Graphics
it's the opacity attribute: <rect x="0" y="0" width="100" height="100" opacity=".
5" /> the above rectangle will be painted half-transparent.
...hence, if you set a stroke opacity on an element, that also has a fill, the fill will shine through on half of the stroke, while on the other half the background will appear: <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0" y="0" width="200" height="200" fill="blue" /> <circle cx="100" cy="100" r="
50" stroke="yellow" stroke-width="40" stroke-opacity=".
5" fill="red" /> </svg> screenshotlive sample you see in this example the red circle on blue background.
... the yellow stroke is set to
50% opacity, which leads effectively to a double-color stroke.
Tutorials
creating a simple web page with html an html guide for beginners that includes explanations of common tags, including html
5 tags.
... html
5 doctor articles about using html
5 right now.
... exploring es6 reliable and in-depth information on ecmascript 201
5.
Using custom elements - Web Components
a custom element's class object is written using standard es 201
5 class syntax.
...classes please note that es201
5 classes cannot reliably be transpiled in babel 6 or typescript targeting legacy browsers.
... you can either use babel 7 or the babel-plugin-transform-builtin-classes for babel 6, and target es201
5 in typescript instead of legacy.
Cross-domain Content Scripts - Archive of obsolete content
the "main.js": creates a panel whose content is supplied by "panel.html" and adds a content script "panel-script.js" to it sends the panel a "show" message when it is shown adds a button which shows the panel when it is clicked // main.js var data = require("sdk/self").data; var forecast_panel = require("sdk/panel").panel({ height:
50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <div> blo...
...ck for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <div id="forecast_summary"></div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/
500?key=your-api-key"; self.port.on("show", function () { var request = new xmlhttprequest(); request.open("get", url, true); request.onload = function () { var jsonresponse = json.parse(request.responsetext); var summary = getsummary(jsonresponse); var element = document.getelementbyid("forecast_summary"); element.textcontent = summary; }; request.send(); }); function getsummary(forecast) { return forecast.regionalfcst.fcstperiods.peri...
clipboard - Archive of obsolete content
var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n
5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru
5erkjggg%3d%3d"); if the clipboard contains an image, open it in a new tab.
... var clipboard = require("sdk/clipboard"); clipboard.set("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcaya" + "aabzenr0aaaasuleqvryhe3o0qkaiawd0eyqe3q993aq3cbsukpygfsnty" + "n
5ugbqpk0baadgp0brdwxwlweaaaaagpsa3rzdaaaaahgpcgrpganzq2fg" + "bwrr9aaaaabjru
5erkjggg%3d%3d", "text"); globals functions set(data, datatype) replace the contents of the user's clipboard with the provided data.
panel - Archive of obsolete content
you can't embed flash (bug 9
52
578).
... security warning pages (the "this connection is untrusted" warning) does not work, so panels which trigger it will be broken (bug 1031
554).
XML in Mozilla - Archive of obsolete content
mathml p3p (no longer supported) w3c recommendation p3p wsdl (no longer supported) w3c note web services xbl mozilla's xbl reference xul mozilla's xul reference roadmap next big tasks would include support for xpointer xpointer() scheme (bug 32832), xinclude (bug 2017
54), xml catalogs (bug 98413), xforms (bug 97806; work being done on implementing this as an extension), validating parser (bug 1963
55) and xml schemas.
... see also e4x xquery code snippets for queryselector - useful techniques for navigating dom using css selectors on xml dom documents (firefox 3.
5 only) identifying xml elements and documents parsing and serializing xml ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { performinstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the main installation block, is on lines 24 to 41; the registration part of the main installation block is on lines 42-
58; and the execution at the end of the main block is on lines
59 to 71.
... in lines 42-
58, registerchrome is called as many times as there are different directories that contain content that needs to be registered with the chrome registry.
Getting File Information - Archive of obsolete content
for instance, the following line will set the length of a file to
5000 bytes.
... file.filesize =
5000; modified time the time that a file was last changed may be retrieved using the lastmodifiedtime (nsifile.attributes) attribute.
How to implement a custom XUL query processor component - Archive of obsolete content
return this._index < this._array.length; }, getnext: function() { return new templateresult(this._array[this._index++]); } }; // the query processor class - implements nsixultemplatequeryprocessor function templatequeryprocessor() { // our basic list of data this._data = [ {name: "mark", age: 36, hair: "brown", eye: "brown"}, {name: "bill", age: 2
5, hair: "red", eye: "black"}, {name: "joe", age: 1
5, hair: "blond", eye: "blue"}, {name: "jimmy", age: 6
5, hair: "gray", eye: "dull"} ]; } templatequeryprocessor.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplatequeryprocessor]), classdescription: "sample xul template query processor", classid: components.
...id("{282cc4ea-a49c-44fc-81f4-1f03cbb782
5f}"), contractid: "@mozilla.org/xul/xul-query-processor;1?name=simpledata", getdatasource: function(adatasources, arootnode, aistrusted, abuilder, ashoulddelaybuilding) { // todo: parse the adatasources variable // for now, ignore everything and let's just signal that we have data return this._data; }, initializeforbuilding: function(adatasource, abuilder, arootnode) { // perform any initialization that can be delayed until the content builder // is ready for us to start }, done: function() { // called when the builder is destroyed to clean up state }, compilequery: function(abuilder, aquery, arefvariable, amembervariable) { // outputs a query object.
accessibleType - Archive of obsolete content
possible values are: constant value xulalert 1001 xulbutton 1002 xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 100
5 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xullisthead 1024 xullist...
...header 102
5 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 xulpane 1011 xulprogressmeter 1012 xulscale 1013 xulstatusbar 1014 xulradiobutton 101
5 xulradiogroup 1016 xultab 1017 xultabbox 1018 xultabs 1019 xultext 101a xultextbox 101b xulthumb ...
Providing Command-Line Options - Archive of obsolete content
using the example to use this sample code, save the commandline.js file into the components directory and add the following lines to your chrome.manifest file: component {2991c31
5-b871-42cd-b33f-bfee4fcbf682} components/commandline.js contract @mozilla.org/commandlinehandler/general-startup;1?type=myapp {2991c31
5-b871-42cd-b33f-bfee4fcbf682} category command-line-handler m-myapp @mozilla.org/commandlinehandler/general-startup;1?type=myapp the javascript code const cc = components.classes; const ci = components.interfaces; components.utils.import("resource://gre/modules...
...ion openwindow(achromeurispec, aargument) { services.ww.openwindow(null, achromeurispec, "_blank", "chrome,menubar,toolbar,status,resizable,dialog=no", aargument); } // command line handler function commandlinehandler() { }; commandlinehandler.prototype = { classdescription: "myapphandler", // changeme: generate a unique id classid: components.id('{2991c31
5-b871-42cd-b33f-bfee4fcbf682}'), // changeme: change the type in the contractid to be unique to your application contractid: "@mozilla.org/commandlinehandler/general-startup;1?type=myapp", _xpcom_categories: [{ category: "command-line-handler", // changeme: // category names are sorted alphabetically.
Additional Template Attributes - Archive of obsolete content
<listbox datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
... <hbox datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable).
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos
5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elem...
...the resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 200
5-04-30t14:
55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototitle = palace from above) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?phototitle = canal) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/imag...
Multiple Rules - Archive of obsolete content
adding to the previous example, here we check for people with a space in their name, and a total number of letters less than 1
5.
... <rule> <where subject="?name" rel="contains" value=" "/> <where subject="?letters" rel="less" value="1
5"/> <action> <label uri="?" value="?name has two names for a total length of ?letters"/> </action> </rule> negating a condition you can reverse a where clause by using the negate attribute.
Result Generation - Archive of obsolete content
for instance, a result would look something like the following: (?name = fred, ?age =
5) this result has two variables, ?name with the value 'fred' and ?age with the value
5.
...if we had two results, they might look like this: (?name = fred, ?age =
5) (?name = mary, ?age = 12) this is how we'll represent the potential results in this and the following discussions.
The Joy of XUL - Archive of obsolete content
applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.
5, including ecma-262 edition 3 (ecmascript); xml 1.0.
...libical is an open source implementation of the ietf's icalendar calendaring and scheduling protocols (rfc 244
5, rfc 2446, and rfc 2447).
Things I've tried to do with XUL - Archive of obsolete content
(to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-
50% ratio to the height of the parent vbox.
... <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="
50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height:
50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="
5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
Tree Widget Changes - Archive of obsolete content
to get a column in javascript: tree.columns.getcolumnfor(treecolelement); tree.columns.getnamedcolumn(treecolid); tree.columns.getcolumnat(index); you can also just use array syntax to get a column: tree.columns["lastname"]; tree.columns[
5]; once you have a column, you can get various properties of it: column.index - the index of the column in displayed order column.id - the id attribute of the column column.element - the treecol element column.x - the x position in the tree of the left edge of the column column.width - the width of the column in c++ code, you can also get the atom attribute of nsitreecolumn which return...
...for instance: var col = tree.columns.getprimarycolumn(); treecell.setcelltext(
5, col, "banana"); this will change the label of the cell in row
5 and the primary column to banana.
Adding Methods to XBL-defined Elements - Archive of obsolete content
you can call the method by using code such as element.getmaximum(
5, 10) where element is a reference to an element defined by the xbl containing the getmaximum method.
... xul: <box id="num" class="labeledbutton" title="number of things:" value="
52"/> <button label="show" oncommand="document.getelementbyid('num').showtitle(true)"/> <button label="hide" oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> ...
2006-11-03 - Archive of obsolete content
discussions html
5 @ w3c discussion of the official announcement from w3c on the development of html
5 and how mathml should be included in it.
... perf question (reflow branch) a look into bug #3
52367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a table.
2006-10-13 - Archive of obsolete content
discussions wxmozilla and ff1.
5 xpcom problems updating wxmozilla to use it with firefox 1.
5.7 browser elements, opening links in a new window using javascript to open window in new window.
... fedora security blocking xpcom registration fedora core
5.0 security settings impeding xpcom registration.
2006-12-01 - Archive of obsolete content
summary: mozilla.dev.apps.calendar - november 24 - december 01, 2006 announcements december
5th test day coming up!
... test day for sunbird and lightning on tuesday december
5th.
Logging Multi-Process Plugins - Archive of obsolete content
from within a command prompt: c:\> set nspr_log_modules=ipcplugins:
5 c:\> set nspr_log_file=c:\plugins.log c:\> cd c:\program files\mozilla firefox c:\> firefox.exe the log file will be saved to c:\plugins.log (or wherever nspr_log_file is set).
...from within a bash shell: $ export nspr_log_modules=ipcplugins:
5 $ export nspr_log_file=~/plugins.log $ /usr/bin/firefox the file will be saved to ~/plugins.log (or wherever nspr_log_file is set).
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
one of the new features that is available in firefox 1.
5 is the ability to place browser plugins in a toolkit bundle.
...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>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.
5</em:minversion> <em:maxversion>4.0.*</em:maxversion> </description> </em:targetapplication> <em:unpack>true</em:unpack> </description> </rdf> this contains
5 required pieces of information.
Plugins - Archive of obsolete content
important: since firefox
52, all plugin support except flash has been dropped (see plug-in support has been dropped other than flash for more details).
... supporting private browsing in plugins firefox 3.
5 introduced support for private browsing; learn how to make your plugin respect the user's privacy wishes.
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
an example using the most popular element of the rss content module is shown below: <?xml version="1.0"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 1
5 may 200
5 13:02:08 -0
500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/114</guid> <pubdate>sun, 1
5 may 200
5 13:02:08 -0
500</pubdate> <link>http://www.example.com/blog/200
5/0
5/1
5/114</link> <content:encoded...
...><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/113</guid> <pubdate>sun, 1
5 may 200
5 10:
55:12 -0
500</pubdate> <link>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </item> <item> <title>some bold html</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/112</guid> <pubdate>sun, 1
5 may 200
5 08:14:11 -0
500</pubdate> <link>http://www.example.com/blog/200
5/0
5/1
5/112</link> <conten...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 1
5 may 200
5 13:02:08 -0
500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/114</guid> <pubdate>sun, 1
5 may 200
5 13:02:08 -0
500</lastbuilddate></pubdate> <link>http://www.example.com/blog/200
5/0
5/1
5/114</link> ...
... <slash:comments>43</slash:comments> </item> <item> <title>what is the 3
571st prime number</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/113</guid> <pubdate>sun, 1
5 may 200
5 10:
55:12 -0
500</lastbuilddate></pubdate> <link>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/113</link> <slash:comments>72</slash:comments> </item> <item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:200
5/0
5/1
5/112</guid> <pubdate>sun, 1
5 may 200
5 08:14:11 -0
500</lastbuilddate></pubdate> <link>http://www.example.com/blog/200
5/0
5/1
5/112</link> <slash:comments>118</slash:comments> ...
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 1
5 may 200
5 13:02:08 -0
500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:article:
54321</guid> <pubdate>sun, 1
5 may 200
5 13:02:08 -0
500</pubdate> <link>http://www.example.com/article/
54321</link> <wfw:commentrss>http://www.example.com/feed/rss/
54321/comments</wfw:commentrss> </item> <item>...
... <title>rain is wet</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:article:
54320</guid> <pubdate>sun, 1
5 may 200
5 10:
55:12 -0
500</pubdate> <link>http://www.example.com/article/
54320</link> <wfw:commentrss>http://www.example.com/feed/rss/
54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a3
5d-a93f12a0ff7d:article:
54319</guid> <pubdate>sun, 1
5 may 200
5 08:14:11 -0
500</pubdate> <link>http://www.example.com/article/
54319</link> <wfw:commentrss>http://www.example.com/feed/rss/
54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
.htaccess ( hypertext access ) - Archive of obsolete content
deny from 146.0.74.20
5 # blocks all access from 146.0.74.20
5 to the directory ssi or server side include : include external files to each file requested by the user without the need to write include statements in the file; you can have them automatically attached to all the files, whether at top or bottom, automatically through your .htaccess file.
... errordocument 404 /notfound.html # redirects traffic to notfound.html in case of a 404 error errordocument
500 /serverr.html # redirects traffic to serverr.html in case of a
500 internal server error for further information see this external article: redirect your traffic for error handling.
Vulnerabilities - Archive of obsolete content
the arp protocol was standardized over 2
5 years ago, and threats have changed a great deal since then, so the trust assumptions inherent in its design then are unlikely to still be reasonable today.
...insecure direct object references - dom (document object model)
5.
Solaris 10 Build Prerequisites - Archive of obsolete content
--- env.sh.orig tue jul 1 02:38:3
5 2008 +++ env.sh tue jun 24 01:08:01 2008 @@ -9
5,7 +9
5,8 @@ echo setting ld=$ld export ld -path="$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/sbin:/bin:/usr /sfw/bin:$ccdir" +path="/opt/sfw/bin:$cbe_prefix/bin:/usr/ccs/bin:/usr/gnu/bin:/usr/bin:/usr/s bin:/bin:/usr/sfw/bin:$ccdir" test "x$jds_cbe_env_quiet" != x1 && \ echo setting path=$path export path +export...
...% svn co svn+ssh://anon at svn dot opensolaris dot org/svn/jds/spec-files/branches/gnome-2-20
5.
Table Reflow Internals - Archive of obsolete content
reflow gives instructions for turning this on: tblo 030176cc r=0 a=8940,uc c=0,0 cnt=429 tbl 030178c4 r=0 a=8940,uc c=4470,uc cnt=430 rowg 03017a7c r=0 a=uc,uc c=uc,uc cnt=431 row 03017c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 03017da8 r=0 a=uc,uc c=uc,uc cnt=433 block 03017e08 r=0 a=uc,uc c=uc,uc cnt=434 block 03017e08 d=870,300 me=480 cell 03017da8 d=930,360 me=
540 cell 0301a8cc r=0 a=uc,uc c=uc,uc cnt=436 block 0301a92c r=0 a=uc,uc c=uc,uc cnt=437 block 0301a92c d=133
5,300 me=46
5 cell 0301a8cc d=139
5,360 me=
52
5 row 03017c08 d=uc,360 rowg 03017a7c d=uc,360 rowg 03017a7c r=2 a=4470,uc c=4470,uc cnt=442 row 03017c08 r=2 a=4470,uc c=4470,uc cnt=443 cell 03017da8 r=2 a=17
55,uc c=169
5,uc cnt=444 block 03...
...017e08 r=2 a=169
5,uc c=169
5,uc cnt=44
5 block 03017e08 d=169
5,300 cell 03017da8 d=17
55,360 cell 0301a8cc r=2 a=262
5,uc c=2
56
5,uc cnt=446 block 0301a92c r=2 a=2
56
5,uc c=2
56
5,uc cnt=447 block 0301a92c d=2
56
5,300 cell 0301a8cc d=262
5,360 row 03017c08 d=4470,360 rowg 03017a7c d=4470,360 tbl 030178c4 d=4
500,4
50 tblo 030176cc d=4
500,4
50 table reflow optimizations if the table is already balanced, pass 1 constrains the width (like a normal pass 2) based on the current column widths.
Updating an extension to support multiple Mozilla applications - Archive of obsolete content
this is done by adding new <targetapplication> tags to the install.rdf file, like this: <!-- describe the thunderbird versions we support --> <em:targetapplication> <description> <em:id>{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}</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-e2
5a4
5638b28}</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.
Using Firebug and jQuery (Screencast) - Archive of obsolete content
click the video link to begin (14:39 minutes long,
59mb): http://developer.mozilla.org/presentations/screencasts/jresig-digg-firebug-jquery.mp4 download: right-click this link and select save as...
...(
59mb) bookmarklets: in the presentation, i refer to a bookmarklet that you can use to introduce jquery into a web page.
Sizing items in CSS - Learn web development
in the example below you can see two boxes, both with a defined height of 1
50 pixels.
... the box on the left is 1
50 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 1
50 pixels.
Test your skills: backgrounds and borders - Learn web development
backgrounds and borders 1 in this task we want you to add a background, border, and some simple styling to a page header: give the box a
5px black solid border, with rounded corners of 10px.
... backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a
5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right.
Test your skills: Multicol - Learn web development
multicol one in this task you need to create three columns, with a
50px gap between each column.
... then, add a
5px, grey rule between each column, ensuring there is 10px of space between the edge of the rule and the column content.
Responsive design - Learn web development
.col { width: 6.2
5%; /* 60 / 960 = 0.062
5 */ } this approach will be found in many places across the web today, and it is documented here in the layout section of our legacy layout methods article.
...essentially, the vw unit adds on top of that zoomed value: h1 { font-size: calc(1.
5rem + 3vw); } this means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries.
How CSS works - Learn web development
i might give a fallback width for a box in pixels, then go on to give a width with a calc() value of 100% -
50px.
... .box { width:
500px; width: calc(100% -
50px); } we will look at many more ways to support varying browsers in later lessons.
CSS FAQ - Learn web development
this is a list of the most commonly used doctype declarations that will trigger standards or almost standards mode: <!doctype html> /* this is the html
5 doctype.
... given that each modern browser uses an html
5 parser, this is the recommended doctype */ <!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> when at all possible, you should just use the html
5 doctype.
What text editors are available? - Learn web development
, mac, linux forum, irc github wiki yes coda closed source $99 mac twitter, forum, e-mail ebook yes codelobster closed source free windows, mac, linux forum, e-mail no end user doc yes emacs gpl 3 free windows, mac, linux faq, mailing list, news group online manual yes espresso closed source $7
5 mac faq, e-mail no end user doc, but plug-in doc yes gedit gpl free windows, mac, linux mailing list, irc online manual yes kate lgpl, gpl free windows, mac, linux mailing list, irc online manual yes komodo edit mpl free windows, mac, linux forum online manual yes notepad++ gpl free ...
...windows forum wiki yes pspad closed source free windows faq, forum online help yes sublime text closed source $70 windows, mac, linux forum official, unofficial yes textmate closed source $
50 mac twitter, irc, mailing list, e-mail online manual, wiki yes textwrangler closed source free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or instal...
How can we design for all types of users? - Learn web development
for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.
5:1) and should enable many visually-impaired people to read this page.
...> </head> <body> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> </body> </html> a percent-based css will look like this: body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:
50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */ the same problem expressed with ems: body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:2em; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:0.
5em; } /* half the size of the h1, thus 16 pixels to...
How does the Internet work? - Learn web development
active learning how the internet works in
5 minutes: a
5 minute video to understand the very basics of internet by aaron titus.
...if you're trying to connect, say, ten computers, you need 4
5 cables, with nine plugs per computer!
What is a Domain Name? - Learn web development
alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409
563-lror creation date: 1998-01-24t0
5:00:00z updated date: 2013-12-08t01:16:
57z registry expiry date: 201
5-01-23t0
5:00:00z sponsoring registrar:markmonitor inc.
... (r37-lror) sponsoring registrar iana id: 292 whois server: referral url: domain status: clientdeleteprohibited domain status: clienttransferprohibited domain status: clientupdateprohibited registrant id:mmr-33684 registrant name:dns admin registrant organization:mozilla foundation registrant street: 6
50 castro st ste 300 registrant city:mountain view registrant state/province:ca registrant postal code:94041 registrant country:us registrant phone:+1.6
509030800 as you can see, i can't register mozilla.org because the mozilla foundation has already registered it.
Example 3 - Learn web development
lass="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -
5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #2277
55; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidd...
...en; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.62
5em; /* 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 2
5px 2px
5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.4
5); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:af...
Example 4 - Learn web development
ct> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -
5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #2277
55; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidd...
...en; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.62
5em; /* 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 2
5px 2px
5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.4
5); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc
50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:af...
Example - Learn web development
form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 2
50px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height:
5em; resize: vertical; } fieldset { width: 2
50px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { ...
... margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right:
5px; top: 20px; } result ...
How to structure a web form - Learn web development
these newer input types are reintroduced in the html
5 input types.
... see also a list apart: sensible forms: a form usability checklist previous overview: forms next in this module your first form how to structure a web form basic native form controls the html
5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Example - Learn web development
zing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height:
5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ m...
...argin-left: .
5em; } result ...
Your first form - Learn web development
: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height:
5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: .
5em; } save and reload, and you'll see that your form should look much less ugly.
... overview: forms next in this module your first form how to structure a web form basic native form controls the html
5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Add a hitmap on top of an image - Learn web development
the map of the world at
50languages.com (as of time of writing) illustrates the problem perfectly.
... <map name="example-map-1"> <area shape="circle" coords="200,2
50,2
5" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10,
5, 20, 1
5" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices.
Using data attributes - Learn web development
html
5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
...in the above case setting article.dataset.columns =
5 would change that attribute to "
5".
Responsive images - Learn web development
the 800px picture is 128kb on disk, whereas the 480px version is only 63kb — a saving of 6
5kb.
...you can find an example of what this looks like in srcset-resolutions.html (see also the source code): <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.
5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="elva dressed as a fairy"> in this example, the following css is applied to the image so that it will have a width of 320 pixels on the screen (also called css pixels): img { width: 320px; } in this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on...
Image gallery - Learn web development
you need to: put the section of code below the "looping through images" comment inside a loop that loops through all
5 images — you just need to loop through five numbers, one representing each image.
... if the class name is "dark", changes the <button> class to "light" (using setattribute()), its text content to "lighten", and the background-color of the overlay <div> to "rgba(0,0,0,0.
5)".
Function return values - Learn web development
our draw() function draws 100 random circles somewhere on an html <canvas>: function draw() { ctx.clearrect(0, 0, width, height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(2
55,0,0,0.
5)'; ctx.arc(random(width), random(height), random(
50), 0, 2 * math.pi); ctx.fill(); } } inside each loop iteration, three calls are made to the random() function, to generate a random value for the current circle's x-coordinate, y-coordinate, and radius, respectively.
... so when you execute the following: ctx.arc(random(width), random(height), random(
50), 0, 2 * math.pi); if the three random() calls returned the values
500, 200, and 3
5, respectively, the line would actually be run as if it were this: ctx.arc(
500, 200, 3
5, 0, 2 * math.pi); the function calls on the line are run first, and their return values substituted for the function calls, before the line itself is then executed.
Test your skills: Loops - Learn web development
loops 3 in this final task, you are provided with the following: i — starts off with a value of
500; intended to be used as an iterator.
... you need to use a loop to go through the numbers 2 to
500 backwards (1 is not counted as a prime number), and run the provided isprime() function on them.
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [
53.4807
59, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
...add the following code to your example, again inside window.onload: l.marker([
53.4807
59, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b
5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property...
Adding features to our bouncing balls demo - Learn web development
) constructor call — the exists parameter should be the
5th parameter, and should be given a value of true.
... in your css file, add the following rule at the bottom: p { position: absolute; margin: 0; top: 3
5px; right:
5px; color: #aaa; } in your javascript, make the following updates: create a variable that stores a reference to the paragraph.
JavaScript object basics - Learn web development
setting object members so far we've only looked at retrieving (or getting) object members — you can also set (update) the value of object members by simply declaring the member you want to set (using dot or bracket notation), like this: person.age = 4
5; person['name']['last'] = 'cratchit'; try entering the above lines, and then getting the members again to see how they've changed, like so: person.age person['name']['last'] setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members.
...we could get those values like this: let mydataname = nameinput.value; let mydatavalue = namevalue.value; we could then add this new member name and value to the person object like this: person[mydataname] = mydatavalue; to test this, try adding the following lines into your code, just below the closing curly brace of the person object: let mydataname = 'height'; let mydatavalue = '1.7
5m'; person[mydataname] = mydatavalue; now try saving and refreshing, and entering the following into your text input: person.height adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name, not a variable value pointing to a name.
Server-side web frameworks - Learn web development
urlpatterns = [ url(r'^$', views.index), # example: /best/myteamname/
5/ url(r'^best/(?p<team_name>\w.+?)/(?p<team_number>[0-9]+)/$', views.best), ] make it easy to access data in the request data can be encoded in an http request in a number of ways.
... a full-stack http and websocket client/server implementation with ipv6, tls, sni, idna, http/socks
5 proxy, unix domain socket, comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart, and gzip compression support.
Getting started with Ember - Learn web development
finally, find app.css, located at app/styles/app.css, and paste in the following: :focus, .view label:focus, .todo-list li .toggle:focus + label, .toggle-all:focus + label { /* !important needed because todomvc styles deliberately disable the outline */ outline: #d86f9
5 solid !important; } this css overrides some of the styles provided by the todomvc-app-css npm package, therefore allowing keyboard focus to be visible.
... starting the development server you may start the app in development mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >=
5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 3
5ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor styles/assets/vend...
TypeScript support in Svelte - Learn web development
from last year's github octoverse report we can see that typescript is the 7th most used and
5th fastest growing language used on github.
... now svelte-check tells us that we have to define the type of our action function parameters: ./07-next-steps/src/components/todo.svelte:4
5:24 warn: parameter 'node' implicitly has an 'any' type, but a better type may be inferred from usage.
NSS Sample Code Sample_1_Hashing
sample code 1 /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md
5", sec_oid_md
5 }, { "sha1", sec_oid_sha1 }, { "sha2
56", sec_oid_sha2
56 }, { "sha384", sec_oid_sha384 }, { "sha
512", sec_oid_sha
512 } }; /* * maps a hash name to a secoidtag.
... if (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 7...
NSS Sample Code sample4
* # create ca cert, self-signed, generates key-pair, prompts for key * # type, cert type etc * # answers for prompts:
5,9,n,y,-1,n,
5,6,7,9,n * $ certutil -s -s "cn=test ca, o=bogus inc, l=mtn view, st=ca, c=us" \ * -n testca -t ctu,ctu,ctu -v 60 -x -d .
... -1 -2 -
5 * * there are many ways to setup a public/private key to use - this * example shows one of them.
Hashing - sample 1
*/ /* nspr headers */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> #include <nss.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md
5", sec_oid_md
5 }, { "sha1", sec_oid_sha1 }, { "sha2
56", sec_oid_sha2
56 }, { "sha384", sec_oid_sha384 }, { "sha
512", sec_oid_sha
512 } }; /* * maps a hash name to a secoidtag.
...f (port_strcasecmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* * newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* * printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 7...
Utilities for nss samples
out, const unsigned char *data, unsigned int len) { char *b64data = null; b64data = btoa_datatoascii(data, len); pr_fprintf(out, "%s", b64data); pr_fprintf(out, "\n"); if (b64data) { port_free(b64data); } } /* * printashex */ void printashex(prfiledesc* out, const unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } if (column > 7...
...aselen = port_strlen(phrase); if (phraselen < (tokenlen+1)) continue; if (phrase[tokenlen] != ':') continue; phrase = &phrase[tokenlen+1]; break; } while (i<nb); phrase = port_strdup((char*)phrase); port_free(phrases); return phrase; } /* * getmodulepassword */ char* getmodulepassword(pk11slotinfo *slot, int retry, void *arg) { char prompt[2
55]; secupwdata *pwdata = (secupwdata *)arg; char *pw; if (pwdata == null) { return null; } if (retry && pwdata->source != pw_none) { pr_fprintf(pr_stderr, "incorrect password/pin entered.\n"); return null; } switch (pwdata->source) { case pw_none: sprintf(prompt, "enter password or pin for \"%s\":", pk11_gettokennam...
sample1
rs */ #include <prprf.h> #include <prtypes.h> #include <plgetopt.h> #include <prio.h> #include <prprf.h> /* nss headers */ #include <secoid.h> #include <secmodt.h> #include <sechash.h> typedef struct { const char *hashname; secoidtag oid; } nametagpair; /* the hash algorithms supported */ static const nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md
5", sec_oid_md
5 }, { "sha1", sec_oid_sha1 }, { "sha2
56", sec_oid_sha2
56 }, { "sha384", sec_oid_sha384 }, { "sha
512", sec_oid_sha
512 } }; /* maps a hash name to a secoidtag.
...cmp(hashname, hash_names[i].hashname) == 0) { hashtag = hash_names[i].oid; break; } } return hashtag; } /* newline */ static void newline(prfiledesc* out) { pr_fprintf(out, "\n"); } /* printashex */ void printashex(prfiledesc* out, unsigned char *data, unsigned int len) { unsigned i; int column; unsigned int limit = 1
5; unsigned int level = 1; column = level; if (!len) { pr_fprintf(out, "(empty)\n"); return; } for (i = 0; i < len; i++) { if (i != len - 1) { pr_fprintf(out, "%02x:", data[i]); column += 3; } else { pr_fprintf(out, "%02x", data[i]); column += 2; break; } ...
PKCS11 FAQ
what must an x.
509 certificate include to allow it to be recognized as an email certificate for use with s/mime?
...the subjectaltname extension is part of the x.
509 v3 and pkix specifications.
PKCS11 module installation
note: the information in this article is specific to firefox 3.
5 and newer.
... provisioning pkcs #11 modules using the pkcs11 api starting with firefox
58, extensions can use the pkcs11 browser extension api to enumerate pkcs #11 modules and make them accessible to the browser as sources of keys and certificates.
PKCS11 Implement
pkcs #11 functions required for different kinds of tokens external key distribution tokens signing tokens signing and decryption tokens multipurpose tokens c_encrypt c_decrypt ckm_rsa_pkcs ckm_rsa_x_
509 (ssl 2.0 server only) c_decrypt ckm_rsa_pkcs ckm_rsa_x_
509 (ssl 2.0 server only) c_decrypt c_sign ckm_rsa_pkcs ckm_dsa c_sign ckm_rsa_pkcs ckm_dsa c_sign ckm_rsa_pkcs ckm_dsa c_sign ckm_rsa_pkcs ckm_dsa c_verify ckm_rsa_pkcs ckm_dsa c_verifyrecover ckm_rsa_pkcs c_generatekey c_generatekeypair (if token is read/write)c_generatekeypair (if token is read/write)...
... random-number generation and simple digesting the nss requires that the following functions operate without authenticating to the token: c_seedrandom, c_generaterandom, and c_digest (for sha, md
5, and md2).
Download Rhino
binaries release release date change log download link rhino 1.7r4 2012-06-18 new in rhino 1.7r4 rhino1_7r4.zip rhino 1.7r
5 201
5-01-29 release notes rhino1_7r
5.zip rhino 1.7.6 201
5-04-1
5 release notes rhino1.7.6.zip rhino 1.7.7 201
5-06-17 release notes rhino1.7.7.zip rhino 1.7.7.1 2016-02-01 release notes rhino1.7.7.1.zip rhino 1.7.7.2 2017-08-24 release notes rhino1.7.7.2.zip rhino 1.7.8 2018-01-22 release notes rhino1.7.8.zip rhino 1.7.9 2018-03-1
5 release notes rhino1.7.9.zip rhino 1.7.10 2018-04-09 release notes rhino1.7.10.zip ...
... rhino 1.7.11 2019-0
5-30 release notes rhino1.7.11.zip rhino 1.7.12 2020-01-13 release notes rhino1.7.12.zip to download older rhino versions, see the rhino downloads archive.
Rhino serialization
beginning with rhino 1.
5 release 3 it is possible to serialize javascript objects, including functions and scripts.
... original document information author: norris boyd last updated date: november 1
5, 2006 copyright information: portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a creative commons license | details.
Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version
59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/
59/pre1/mozjs-
59.0a1.0.tar.bz2 tar xvf mozjs-
59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
... git clone https://github.com/mozilla/gecko-dev.git cd gecko-dev/js/src if you want a faster (about
5 times as of january 201
5) download, try doing a shallow clone (no version control history).
How to embed the JavaScript engine
::compileoptions opts(cx); opts.setfileandline(filename, lineno); bool ok = js::evaluate(cx, global, opts, script, strlen(script), &rval); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey 4
5 // following code might be needed in some case // #define __stdc_limit_macros // #include <stdint.h> #include "jsapi.h" #include "js/initialization.h" /* the class of the global object.
... js::compileoptions opts(cx); opts.setfileandline(filename, lineno); bool ok = js::evaluate(cx, opts, script, strlen(script), &rval); if (!ok) return 1; } jsstring *str = rval.tostring(); printf("%s\n", js_encodestring(cx, str)); } js_destroycontext(cx); js_destroyruntime(rt); js_shutdown(); return 0; } spidermonkey
52 #include "jsapi.h" #include "js/initialization.h" static jsclassops global_ops = { nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, nullptr, js_globalobjecttracehook }; /* the class of the global object.
Self-hosted builtins in SpiderMonkey
these docs describe the current state as of nightly 4
5.
... self-hosted functions by default are not constructors and do not have a prototype property, so that they meet the requirements for standard built-in functions as described in the ecmascript language specification
5.1, clause 1
5.
Introduction to the JavaScript shell
entered " + n1 + " and " + n2 + "\n"); } calling dissrc(dostuff) function would give this output: ;------------------------- 10: print("enter a number: "); 00000: 10 name "print" 00003: 10 pushobj 00004: 10 string "enter a number: " 00007: 10 call 1 00010: 10 pop ;------------------------- 11: var n1 = readline(); 00011: 11 name "readline" 00014: 11 pushobj 0001
5: 11 call 0 00018: 11 setvar 0 00021: 11 pop ;------------------------- 12: print("enter another one: "); 00022: 12 name "print" 0002
5: 12 pushobj 00026: 12 string "enter another one: " 00029: 12 call 1 00032: 12 pop ;------------------------- 13: var n2 = readline(); 00033: 13 name "readline" 00036: 13 pushobj 00037: 13 call 0 00040: 13 setvar 1 00043: 1...
...3 pop ;------------------------- 14: ;------------------------- 1
5: print("you entered " + n1 + " and " + n2 + "\n"); 00044: 1
5 name "print" 00047: 1
5 pushobj 00048: 1
5 string "you entered " 000
51: 1
5 getvar 0 000
54: 1
5 add 000
55: 1
5 string " and " 000
58: 1
5 add 000
59: 1
5 getvar 1 00062: 1
5 add 00063: 1
5 string "\\n" 00066: 1
5 add 00067: 1
5 call 1 00070: 1
5 pop 00071: 1
5 stop dumpheap(([filename[, start[, tofind[, maxdepth[, toignore]]]]]) dump gc information.
JIT Optimization Strategies
the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] elif obj.shape == shape2 then obj.slots[
5] elif obj.shape == shape3 then obj.slots[2] ...
...the following pseudocode describes the kind of machine code generated by this optimization: if obj.shape == shape1 then obj.slots[0] = val elif obj.shape == shape2 then obj.slots[
5] = val elif obj.shape == shape3 then obj.slots[2] = val ...
nsMsgSearchOp
96-6fcb-4eba-aaaf-6c806c4ee420)] interface nsmsgsearchop { const nsmsgsearchopvalue contains = 0; /* for text attributes */ const nsmsgsearchopvalue doesntcontain = 1; const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ const nsmsgsearchopvalue isnt = 3; const nsmsgsearchopvalue isempty = 4; const nsmsgsearchopvalue isbefore =
5; /* for date attributes */ const nsmsgsearchopvalue isafter = 6; const nsmsgsearchopvalue ishigherthan = 7; /* for priority.
...smsgsearchopvalue beginswith = 9; const nsmsgsearchopvalue endswith = 10; const nsmsgsearchopvalue soundslike = 11; /* for ldap phoenetic matching */ const nsmsgsearchopvalue ldapdwim = 12; /* do what i mean for simple search */ const nsmsgsearchopvalue isgreaterthan = 13; const nsmsgsearchopvalue islessthan = 14; const nsmsgsearchopvalue namecompletion = 1
5; /* name completion operator...as the name implies =) */ const nsmsgsearchopvalue isinab = 16; const nsmsgsearchopvalue isntinab = 17; const nsmsgsearchopvalue isntempty = 18; /* primarily for tags */ const nsmsgsearchopvalue matches = 19; /* generic term for use by custom terms */ const nsmsgsearchopvalue doesntmatch = 20; /* generic term for use by custom terms */ ...
nsMsgSearchScope
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl [scriptable, uuid(6e893e
59-af98-4f62-a326-0f00f32147cd)] interface nsmsgsearchscope { const nsmsgsearchscopevalue offlinemail = 0; const nsmsgsearchscopevalue offlinemailfilter = 1; const nsmsgsearchscopevalue onlinemail = 2; const nsmsgsearchscopevalue onlinemailfilter = 3; /// offline news, base table, no body or junk const nsmsgsearchscopevalue localnews = 4; const nsmsgsearchscopevalue news =
5; const nsmsgsearchscopevalue newsex = 6; const nsmsgsearchscopevalue ldap = 7; const nsmsgsearchscopevalue localab = 8; const nsmsgsearchscopevalue allsearchablegroups = 9; const nsmsgsearchscopevalue newsfilter = 10; const nsmsgsearchscopevalue localaband = 11; const nsmsgsearchscop...
...evalue ldapand = 12; // imap and news, searched using local headers const nsmsgsearchscopevalue onlinemanual = 13; /// local news + junk const nsmsgsearchscopevalue localnewsjunk = 14; /// local news + body const nsmsgsearchscopevalue localnewsbody = 1
5; /// local news + junk + body const nsmsgsearchscopevalue localnewsjunkbody = 16; }; ...
nsMsgNavigationType
togglethreadkilled
5 must match nsmsgviewcommandtype togglethreadkilled.
... nextunreadthread 10 nextunreadfolder 11 nextfolder 12 readmore 13 back 1
5 go back to the previous visited message forward 16 go forward to the previous visited message firstflagged 17 nextflagged 18 previousflagged 19 firstnew 20 editundo 21 editredo 22 togglesubthreadkilled 23 ...
nsMsgSearchOpValue
nsmsgsearchopvalue defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl 146 typedef long nsmsgsearchopvalue; 147 148 [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c806c4ee420)] 149 interface nsmsgsearchop { 1
50 const nsmsgsearchopvalue contains = 0; /* for text attributes */ 1
51 const nsmsgsearchopvalue doesntcontain = 1; 1
52 const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ 1
53 const nsmsgsearchopvalue isnt = 3; 1
54 const nsmsgsearchopvalue isempty = 4; 1
55 1
56 const nsmsgsearchopvalue isbefore =
5; /* for date attributes */ 1
57 const nsmsgsearchopvalue isafter = 6; 1
58 1
59 const nsmsgsearchopvalue ishigherthan = 7; /* for priority.
... is also applies */ 160 const nsmsgsearchopvalue islowerthan = 8; 161 162 const nsmsgsearchopvalue beginswith = 9; 163 const nsmsgsearchopvalue endswith = 10; 164 16
5 const nsmsgsearchopvalue soundslike = 11; /* for ldap phoenetic matching */ 166 const nsmsgsearchopvalue ldapdwim = 12; /* do what i mean for simple search */ 167 168 const nsmsgsearchopvalue isgreaterthan = 13; 169 const nsmsgsearchopvalue islessthan = 14; 170 171 const nsmsgsearchopvalue namecompletion = 1
5; /* name completion operator...as the name implies =) */ 172 const nsmsgsearchopvalue isinab = 16; 173 const nsmsgsearchopvalue isntinab = 17; 174 const nsmsgsearchopvalue isntempty = 18; /* primarily for tags */ 17
5 const nsmsgsearchopvalue matches = 19; /* generic te...
Troubleshooting XPCOM components registration
set nspr_log_modules=nsnativemoduleloader:
5 set nspr_log_file=c:\path\to\logfile "c:\program files\mozilla firefox\firefox.exe" examining this log for warning and errors may provide valuable clues why the component failed to load.
... if you compiled the component with msvc 8.0 (200
5) and are attempting to use it on a windows xp machine or later, it will need a manifest embedded to find the runtime.
XPCOM
here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.
5.
... add-ons can (and should) be identified with ids of the form extensionname@organization.tld since firefox 1.
5.generic factorymost xpcom factories can be very simple.
XPIDL Syntax
simplifications, conventions and notation the syntax is specified according to abnf as defined by rfc
5234, although a few productions use prose for clarity of understanding.
...] ("short" / "long" / "long" "long") type_spec /= "char" / "wchar" / "boolean" / "octet" type_spec /= scoped_name prop_list = "[" *(property ",") property "]" property = ident [parens] raise_list = "raises" "(" *(scoped_name) ",") scoped_name ")" scoped_name = *(ident "::") ident / "::" ident ; in regex: [a-za-z_][a-za-z0-9_]*; identifiers beginning with _ cause warnings ident = (%x41-
5a / %x61-7a / "_") *(%x41-
5a / %x61-7a / %x30-39 / "_") parens = "(" 1*(any char except ")") ")" functionality not used in xpidl the libidl parser we use is more powerful than xpidl itself can understand.
Thunderbird Binaries
you should see a string that looks something like this: comm-central-1.9.2 branch: mozilla/
5.0 (windows; u; windows nt
5.1; en-us; rv:1.9.2.2pre) gecko/20100308 lanikai/3.1b1pre comm-central-trunk: mozilla/
5.0 (windows; u; windows nt
5.1; en-us; rv:1.9.3a1pre) gecko/20090826 shredder/3.1a1pre the part that you want to note is the gecko revision number (rv) and the thunderbird version string.
... rv:1.8.0.x and thunderbird 1.
5.0.x = gecko 1.8.0 (thunderbird 1.
5) branch.
Activity Manager examples
tor is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent =
50; process.setprogress(percent, "junk processing 2
5 of
50 messages", 2
5,
50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); // localization is omitted, initiat...
...(this example seems to be outdated and not working, see bug
557467 comment 1.) //optional: define some convenience constants const nsactprocess = components.constructor("@mozilla.org/activity-process;1", "nsiactivityprocess", "init"); const nsactevent = components.constructor("@mozilla.org/activity-event;1", "nsiactivityevent", "init"); // step 1: implement nsiactivitycon...
Theme Packaging
sample install.rdf 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>{18b64b
56-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.
...en goodger</em:creator> <em:contributor>john doe</em:contributor> <em:homepageurl>http://www.bengoodger.com/</em:homepageurl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>newtheme1</em:internalname> </description> </rdf> the following are some common target application guids that you can use in your targetapplication properties: thunderbird {3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6} seamonkey {926
50c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} pale moon {8de7fcbb-c
55c-4fbe-bfc
5-fc
555c87dbc4} official references for toolkit api official references.
customDBHeaders Preference
/02/22-rdf-syntax-ns#' xmlns:em='http://www.mozilla.org/2004/em-rdf#'> <description about='urn:mozilla:install-manifest'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:type>2</em:type> <!-- 2 is type 'extension' --> <em:targetapplication> <description> <!-- this next line identifies tbird as target --> <em:id>{3
550f703-e
582-4d0
5-9a08-4
53d09bdfdc6}</em:id> <em:minversion>2*</em:minversion> <em:maxversion>3.0.0.*</em:maxversion> </description> </em:targetapplication> <em:name>superfluous</em:name> <em:description>test superfluous extension</em:description> <em:creator>garrett comeaux</em:creator> </description> </rdf> build process: [gcomeaux@kyle tbird-ext]...
...$ cd superfluous/ [gcomeaux@kyle superfluous]$ make zip superfluous.xpi chrome/ chrome.manifest chrome/content/ chrome/content/superfluous.js chrome/content/superfluous_overlay.xul install.rdf adding: chrome/ (stored 0%) adding: chrome.manifest (deflated 44%) adding: chrome/content/ (stored 0%) adding: chrome/content/superfluous.js (deflated
57%) adding: chrome/content/superfluous_overlay.xul (deflated 44%) adding: install.rdf (deflated
50%) end result ultimately, you want to be able to compose a message like this: and see the superfluous column displayed in your inbox like this: thanks many thanks go out to the thunderbird developers for the fine product that it is.
Thunderbird extensions
also see thunderbird
57-60 add-ons guide for changes introduced in thunderbird 60.
... an overview of thunderbird components developer reference docs: folder classes db views (message list) message summary database mailnews protocols mailnews filters error reporting tools steel library (obsolete as of thunderbird
52, use https://github.com/protz/thunderbird-stdlib) developing new account types useful newsgroup discussions (anything that's very old should be regarded suspiciously, because there has been significant api rewrite over the past years making most techniques considerably easier) thunderbird api docs (mostly a collection of out-of-date pages, relevance is rather dubi...
libmime content type handlers
text/vcard * * libmime will then use nscomponentmanager::contractidtoclsid() to * locate the appropriate content type handler */ #ifndef nsimimecontenttypehandler_h_ #define nsimimecontenttypehandler_h_ typedef struct { prbool force_inline_display; } contenttypehandlerinitstruct; #include "prtypes.h" #include "nsisupports.h" #include "mimecth.h" // {20dabd99-f8b
5-11d2-8ee0-00a024a7d144} #define ns_imime_content_type_handler_iid \ { 0x20dabd99, 0xf8b
5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa7, 0xd1, 0x44 } } class nsimimecontenttypehandler : public nsisupports { public: static const nsiid& getiid() { static nsiid iid = ns_imime_content_type_handler_iid; return iid; } ns_imethod getcontenttype(char **contenttype) = 0; ns_...
...the uuid for this component is: // {20dabda1-f8b
5-11d2-8ee0-00a024a7d144} #define ns_vcard_content_type_handler_cid \ { 0x20dabda1, 0xf8b
5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa7, 0xd1, 0x44 } } ...
Toolkit version format
this document is a reference for the version format, as used in firefox 1.
5 (xulrunner 1.8) and later.
... a few examples of valid version parts: 0 (as in 1.0): <number-a>=0
5a (as in 1.
5a): <number-a>=
5, <string-b>=a
5pre4 (as in 3.
5pre4): <number-a>=
5, <string-b>=pre, <number-c>=4 * (as in 1.0.*): <string-b>=* a few special parsing rules are applied for backwards compatibility and readability: if the version part is a single asterisk, it is interpreted as an infinitely-large number: 1.
5.0.* is the same as 1.
5.0.(infinity) if string-b is a plus sign, number-...
Using the Mozilla source server
the nightly debug builds are now also source indexed so that by following a couple of simple steps you can also have the source code served to you for debugging without a local build what you'll need windbg or visual studio (note: express editions will not work, but windbg is a free download) a nightly build that was created after april 1
5, 2008; go to the /pub/firefox/nightly/latest-mozilla-central/ folder and grab the installer for builds predating the switch to mercurial, you'll need cvs.exe, added to your path (the cvs.exe from mozillabuild has problems, use this one instead) note: do not use the cvs from mozillabuild, it will not work!
... using the source server in visual studio note: source server support does not work correctly out of the box in visual studio 200
5.
Declaring types
for example, to define a new 32-bit integer variable with the value
5: var i = ctypes.int32_t(
5); you can then pass a pointer to this value to a c function that requires a pointer to a 32-bit integer, like this: some_c_function(i.address()); declaring new primitive types there are times when you want to create new types that are simply new names for existing primitive types.
... const asctime = lib.declare("asctime", ctypes.default_abi, ctypes.char.ptr, struct_tm.ptr); var thetime = new struct_tm; thetime.tm_hour = 3; thetime.tm_min = 1
5; ...
ABI
http://en.wikipedia.org/wiki/application_binary_interface os specific windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b372w9
5.aspx details with respect to js-ctypes this explains how to use it in the js-ctypes scope.
... ctypes.thiscall_abi more information is available at bugzilla ::
552
533.
UInt64
uint64.lo(b); if (lo < 0) { hi -= 1; } return uint64.join(hi >>> 0, lo >>> 0); } function uint64_mul(a, b) { var valarr = [a, b]; ensureuint64(valarr); a = valarr[0]; b = valarr[1]; var ah = uint64.hi(a); var al = uint64.lo(a); var bh = uint64.hi(b); var bl = uint64.lo(b); var a
5 = ah >>> 20; var a4 = (ah >>> 7) & 0x1fff; var a3 = ((ah << 6) | (al >>> 26)) & 0x1fff; var a2 = (al >>> 13) & 0x1fff; var a1 = al & 0x1fff; var b
5 = bh >>> 20; var b4 = (bh >>> 7) & 0x1fff; var b3 = ((bh << 6) | (bl >>> 26)) & 0x1fff; var b2 = (bl >>> 13) & 0x1fff; var b1 = bl & 0x1fff; var c1 = a1 * b1; va...
...r c2 = a1 * b2 + a2 * b1; var c3 = a1 * b3 + a2 * b2 + a3 * b1; var c4 = a1 * b4 + a2 * b3 + a3 * b2 + a4 * b1; var c
5 = a1 * b
5 + a2 * b4 + a3 * b3 + a4 * b2 + a
5 * b1; c2 += c1 >>> 13; c1 &= 0x1fff; c3 += c2 >>> 13; c2 &= 0x1fff; c4 += c3 >>> 13; c3 &= 0x1fff; c
5 += c4 >>> 13; c4 &= 0x1fff; var ch = ((c
5 << 20) | (c4 << 7) | (c3 >>> 6)) >>> 0; var cl = ((c3 << 26) | (c2 << 13) | c1) >>> 0; return uint64.join(ch, cl); } function uint64_or(...uint64) { // bitwise or // if there are logical or and bitwise or, bitwise or may be named `bor` or `bitor`, but i don't think there could be logical or, so i think just `or` is the right name ensureuint64...
Constants - Plugins
nperr_out_of_memory_error
5 memory allocation failed.
... npvers_has_form_values 1
5 nppvformvalue nppvariables are supported.
UI Tour - Firefox Developer Tools
in the screenshot below there are three breakpoints: line 82 has a normal breakpoint and execution is paused here line 8
5 has a logpoint which logs the contents of tablerow to the console line 100 has a conditional breakpoint the third column shows more information about the breakpoints.
... for example, the logpoint at line 8
5 logs the value of the tablerow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todolist is undefined.
Debugger - Firefox Developer Tools
an html
5 windowproxy object (an “outer window”, in firefox terminology), which is treated as if the window object of the browsing context’s active document (the “inner window”) were passed.
... source metadata generated from file: js/src/doc/debugger/debugger.md watermark: sha2
56:03b3613288
5e046a
5f213130ba22b1139b473770f7324b842483c09ab766
5f7c changeset: e91b2c8
5aacd ...
Debugger.Object - Firefox Developer Tools
(this function behaves like the standard object.isextensible function, except that the object inspected is implicit and in a different compartment from the caller.) copy(value) apply the html
5 "structured cloning" algorithm to create a copy ofvalue in the referent's global object (and thus in the referent's compartment), and return a debugger.object instance referring to the copy.
... if the referent is an inner object (say, an html
5 window object), return the corresponding outer object (say, the html
5 windowproxy object).
JSON viewer - Firefox Developer Tools
before firefox
53, the json viewer is enabled by default only in firefox developer edition and firefox nightly.
... from firefox
53 onwards, the json viewer is also enabled by default in beta and the normal release version of firefox.
Edit fonts - Firefox Developer Tools
example: if the font is 20 pixels high and the line-height is 1.
5em, when you change the unit of measure from em to px, the value will become 30px.
...for example, to set font-weight using font-variation-settings, you could do something like this: font-variation-settings: "wght" 3
50; however, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b
5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.
5em; box-shadow: 1px 1px
5px #808080; margin: 1.
5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width:
50px; height:
50px; filter: grayscale(100%); transition: transform 7
50ms ease-in, filter 7
50ms ease-in-out; } .note { margin-left: 1em; font: 1.
5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity
500ms 1
50ms, width
500ms 1
50ms; } .icon#se...
...lected { filter: grayscale(0%); transform: scale(1.
5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b
5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.
5em; box-shadow: 1px 1px
5px #808080; margin: 1.
5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width:
50px; height:
50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.
5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(1...
...00%)', offset: 0.333}, { transform: 'scale(1.
5)', offset: 0.666 }, { transform: 'scale(1.
5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 7
50, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration:
500, fill: 'forwards', easing: 'ease-out', delay: 1
50 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var firsttime = true; function animatechannel(e) { if (e.button != 0) { return; } ...
AbstractRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></div> a:ho...
...ver text { fill: #009
5dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
AddressErrors - Web APIs
let supportedhandlers = [ { supportedmethods: "basic-card", data: { supportednetworks: ["visa", "mastercard", "amex", "discover"], supportedtypes: ["credit", "debit"] } } ]; let defaultpaymentdetails = { total: {label: 'donation', amount: {currency: 'usd', value: '6
5.00'}}, displayitems: [ { label: 'original donation amount', amount: {currency: 'usd', value: '6
5.00'} } ], shippingoptions: [ { id: 'standard', label: 'standard shipping', amount: {currency: 'usd', value: '0.00'}, selected: true } ] }; supportedhandlers describes the supported payment handlers and the details for those.
... <p>donate us $6
5 to our worthwhile cause and we will send you a totally not-useless gift as a token of our thanks!</p> <button id="pay">donate now</button> result the final product is below.
AnalyserNode.AnalyserNode() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanalysernode() constructorchrome full support
55edge full support ≤79firefox full support
53ie no support noopera full support 42safari full support 6webview android full support ...
...
55chrome android full support
55firefox android full support
53opera android full support 42safari ios full support 6samsung internet android full support 6.0legend full support full support no support no support ...
AnalyserNode.fftSize - Web APIs
must be a power of 2 between 2
52^
5 and 21
52^1
5, so one of: 32, 64, 128, 2
56,
512, 1024, 2048, 4096, 8192, 16384, and 32768.
...for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
AnalyserNode.getFloatFrequencyData() - Web APIs
microphone input const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 2
56; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(bufferlength); //set up audio node network audiosourcenode.connect(analysernode); analysernode.connect(audioctx.destination); //create 2d canvas const canvas = document.createelement('canvas'); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; canvas.width = window.innerwidth...
...canvasctx.clearrect(0, 0, canvas.width, canvas.height); function draw() { //schedule next redraw requestanimationframe(draw); //get spectrum data analysernode.getfloatfrequencydata(dataarray); //draw black background canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, canvas.width, canvas.height); //draw spectrum const barwidth = (canvas.width / bufferlength) * 2.
5; let posx = 0; for (let i = 0; i < bufferlength; i++) { const barheight = (dataarray[i] + 140) * 2; canvasctx.fillstyle = 'rgb(' + math.floor(barheight + 100) + ',
50,
50)'; canvasctx.fillrect(posx, canvas.height - barheight / 2, barwidth, barheight / 2); posx += barwidth + 1; } }; draw(); </script> </body> specifications specification status comment ...
AnalyserNode.minDecibels - Web APIs
for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–20
5 for relevant code).
... analyser.fftsize = 2
56; 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); var barwidth = (width / bufferlength) * 2.
5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',
50,
50)'; canvasctx.fillrect(x,...
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><l...
...ine x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
Attr.namespaceURI - Web APIs
in firefox 3.
5 and earlier, the namespace uri for html attributes in html documents is null.
... in later versions, in compliance with html
5, it is https://www.w3.org/1999/xhtml as in xhtml.
AudioBuffer() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffer() constructorchrome full support
55notes full support
55notes notes the context parameter was supported up until version
57, but has now been removed.edge full support ≤79firefox full support
53ie no support noopera full support ...
... webview android full support
55notes full support
55notes notes the context parameter was supported up until version
57, but has now been removed.chrome android full support
55notes full support
55notes notes the context parameter was supported up until version
57, but has now been removed.firefox android full support
53opera android ...
AudioBuffer - Web APIs
objects of these types are designed to hold small audio snippets, typically less than 4
5 s.
...the buffer contains data in the following format: non-interleaved ieee7
54 32-bit linear pcm with a nominal range between -1 and +1, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffersourcenode() constructorchrome full support
55notes full support
55notes notes before version
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42...
... webview android full support
55notes full support
55notes notes before version
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before version
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
AudioBufferSourceNode.loopEnd - Web APIs
for example, if you set their values to 20 and 2
5, respectively, then begin playback, the sound will play normally until it reaches the 2
5 second mark.
... then the current play position will loop back to the 20 second mark and continue playing until the 2
5 second mark, ad infinitum (or at least until stop() is called).
AudioBufferSourceNode.playbackRate - Web APIs
a playbackrate of 0.
5 plays the audio at half speed, or 22,0
50 hz.
... <input class="playback-rate-control" type="range" min="0.2
5" max="3" step="0.0
5" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { ...
AudioBufferSourceNode.start() - Web APIs
for example, to start playback halfway through a 10-second audio clip, offset should be
5.
...the computation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still
5.
AudioContext.createJavaScriptNode() - Web APIs
syntax var jsnode = audioctx.createjavascriptnode(buffersize, numinputchannels, numoutputchannels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 2
56,
512, 1024, 2048, 4096, 8192, or 16384.
...ewave.prototype.process = function(e) { var data = e.outputbuffer.getchanneldata(0); for (var i = 0; i < data.length; ++i) { data[i] = math.sin(this.x++); } } sinewave.prototype.play = function() { this.node.connect(this.context.destination); } sinewave.prototype.pause = function() { this.node.disconnect(); } see also generating tones with the web audio api exploring the html
5 web audio: visualizing sound ...
AudioContext.getOutputTimestamp() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetoutputtimestamp experimentalchrome full support
57edge full support ≤79firefox full support 70ie no support noopera full support 44safari no support nowebview android full support ...
...
57chrome android full support
57firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="1
51" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
AudioParam.maxValue - Web APIs
the default value of maxvalue is the maximum positive single-precision floating-point value (+340,282,346,638,
528,8
59,811,704,183,484,
516,92
5,440).
... example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.maxvalue); // 3.40282346638
52886e38 specifications specification status comment web audio apithe definition of 'maxvalue' in that specification.
AudioParam.minValue - Web APIs
the default value of minvalue is the minimum negative single-precision floating-point value (-340,282,346,638,
528,8
59,811,704,183,484,
516,92
5,440).
... example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.minvalue); // -3.40282346638
52886e38 specifications specification status comment web audio apithe definition of 'minvalue' in that specification.
AudioParam.setValueCurveAtTime() - Web APIs
ent.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve = document.queryselector('.value-curve'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.
5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.
5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set button to do something onclick var wavearray = new float32array(9); wavearray[0] = 0.
5; wavearray[1] = 1; wavearray[2] = 0.
5; wave...
...array[3] = 0; wavearray[4] = 0.
5; wavearray[
5] = 1; wavearray[6] = 0.
5; wavearray[7] = 0; wavearray[8] = 0.
5; valuecurve.onclick = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status comment web audio apithe definition of 'setvaluecurveattime' in that specification.
AudioParam.value - Web APIs
consider this example: const source = new audiobuffersourcenode(...); const rate =
5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log output will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to
5.3, which yields
5.300000190734863.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(
5.3); source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); in this case, the log output will be true.
AudioTrack.language - Web APIs
syntax var audiotracklanguage = audiotrack.language; value a domstring specifying the bcp 47 (rfc
5646) format language tag of the primary language used in the audio track, or an empty string ("") if the language is not specified or known, or if the track doesn't contain speech.
... living standard html
5the definition of 'audiotrack.language' in that specification.
AuthenticatorAssertionResponse.signature - Web APIs
the signature read-only property of the authenticatorassertionresponse interface is an arraybuffer object which is the signature of the authenticator for both authenticatorassertionresponse.authenticatordata and a sha-2
56 hash of the client data (authenticatorassertionresponse.clientdatajson).
... syntax signature = authenticatorassertionresponse.signature value an arraybuffer object which the signature of the authenticator (using its private key) for both authenticatorassertionresponse.authenticatordata and a sha-2
56 hash given by the client for its data (the challenge, the origin, etc.
BaseAudioContext.createBuffer() - Web APIs
examples first, a couple of simple trivial examples, to help explain how the parameters are used: var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(2, 220
50, 44100); if you use this call, you will get a stereo buffer (two channels), that, when played back on an audiocontext running at 44100hz (very common, most normal sound cards run at this rate), will last for 0.
5 seconds: 220
50 frames / 44100hz = 0.
5 seconds.
... var audioctx = new audiocontext(); var buffer = audioctx.createbuffer(1, 220
50, 220
50); if you use this call, you will get a mono buffer (one channel), that, when played back on an audiocontext running at 44100hz, will be automatically *resampled* to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100hz = 1 second.
BaseAudioContext.createConstantSource() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support
56edge full support ≤79firefox full support
53ie no support noopera full support 43safari no support nowebview android full support ...
...
56chrome android full support
56firefox android full support
53opera android full support 43safari ios no support nosamsung internet android full support 6.0legend full support full support no support no support ...
BaseAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="1
51" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio dat...
BasicCardRequest.supportedNetworks - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportednetworkschrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.billingAddress - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardNumber - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardSecurityCode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.cardholderName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.expiryMonth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirymonthchrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BasicCardResponse.expiryYear - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpiryyearchrome no support noedge no support ≤18 — 79firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... webview android no support nochrome android full support
57firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
BeforeInstallPromptEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignme...
...nt-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
... 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", f...
BiquadFilterNode.frequency - Web APIs
frequency's default value is 3
50 with a nominal range of 10 to the nyquist frequency — that is, half of the sample rate.
...onnect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 2
5; specifications specification status comment web audio apithe definition of 'frequency' in that specification.
BiquadFilterNode.gain - Web APIs
syntax var audioctx = new audiocontext(); var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.gain.value = 2
5; note: though the audioparam returned is read-only, the value it represents is not.
...onnect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 2
5; specifications specification status comment web audio apithe definition of 'gain' in that specification.
BlobEvent.timecode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimecode experimentalchrome full support
57edge full support ≤79firefox ?
... ie no support noopera full support 44safari no support nowebview android full support
57chrome android full support
57firefox android ?
Bluetooth.requestDevice() - Web APIs
a proprietary 128-bit uuid service c48e6067-
529
5-48d3-8d
5c-039
5f61792b1.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1802, 0x1803]}, {services: ['c48e6067-
529
5-48d3-8d
5c-039
5f61792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
BroadcastChannel: message event - Web APIs
sender <h1>sender</h1> <label for="message">type a message to broadcast:</label><br/> <textarea id="message" name="message" rows="1" cols="40">hello</textarea> <button id="broadcast-message" type="button">broadcast message</button> body { border: 1px solid black; padding: .
5rem; height: 1
50px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } textarea { padding: .2rem; } label, br { margin: .
5rem 0; } button { vertical-align: top; height: 1.
5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broad...
...castmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .
5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .
5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-se...
BroadcastChannel - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="1
51" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
BudgetService.getBudget() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetbudget experimentaldeprecatednon-standardchrome full support
55edge full support ≤79firefox ?
... webview android full support
55chrome android full support
55firefox android ?
BudgetService.getCost() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcost experimentaldeprecatednon-standardchrome full support
55edge full support ≤79firefox ?
... webview android full support
55chrome android full support
55firefox android ?
BudgetService.reserve() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreserve experimentaldeprecatednon-standardchrome full support
55edge full support ≤79firefox ?
... webview android full support
55chrome android full support
55firefox android ?
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,2
5 86,20 86,...
...30 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSPositionValue.CSSPositionValue() - Web APIs
examples the following example positions a container <div>
5 pixels from the top and 10 pixels from the left of the page.
... let somediv = document.getelementbyid('container'); let position = new csspositionvalue(css.px(
5), css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); //
5 10 ...
CSSPositionValue.x - Web APIs
example the following example positions a container <div>
5 pixels from the top and 10 pixels from the left of the page.
... let somediv = document.getelementbyid('container'); let position = new csspositionvalue(css.px(
5), css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSPositionValue.y - Web APIs
example the following example positions a container <div>
5 pixels from the top and 10 pixels from the left of the page.
... let replaceel = document.getelementbyid('container'); let position = new csspositionvalue(css.px(
5), css.px(10)); somediv.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSPositionValue - Web APIs
examples the following example positions a container <div>
5 pixels from the top and 10 pixels from the left of the page.
... let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(3
5), css.px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned.
CSSRule - Web APIs
(until the documentation is completed, see the interface definition in the mozilla source code: nsidomcssimportrule.) cssrule.media_rule 4 cssmediarule cssrule.font_face_rule
5 cssfontfacerule cssrule.page_rule 6 csspagerule cssrule.keyframes_rule 7 csskeyframesrule cssrule.keyframe_rule 8 csskeyframerule reserved for future use 9 should be used to define color profiles in the future cssrule.namespace_rule 10 cssnamespacerule cssrule.counter_style_rule ...
... 11 csscounterstylerule cssrule.supports_rule 12 csssupportsrule cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 1
5 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
CSSStyleSheet.insertRule() - Web APIs
' !important' : '') + ';\n'; } // insert css rule stylesheet.insertrule(selector + '{' + propstr + '}', stylesheet.cssrules.length); } } polyfill the below polyfill will correct the input of the arguments of insertrule() to standardize them in internet explorer
5–8.
...i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 123)) { // 123 = "{".charcodeat(0) // secondly, find the last closing bracket var openbracketpos = i, closebracketpos = -1; for (; i !== len; ++i) { newcharcode = selectorandrule.charcodeat(i); if (!isescaped && (newcharcode === 12
5)) { // 12
5 = "}".charcodeat(0) closebracketpos = i; } isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } if (closebracketpos === -1) break a; // no closing bracket was found!
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,2
5 91,20 91,...
...30 81,2
5" stroke="#d4dde4" fill="none"/><line x1="91" y1="2
5" x2="121" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
Managing screen orientation - Web APIs
nullam quis malesuada est.</p> css relies on the orientation media query to handle specific styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .
5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .
5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.
5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @...
...media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, we want the tool bar stick on the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.6
5em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .
5em; } } and here's the result portrait landscape note: the orientation media query actually applies based on the orientation of the browser window (or iframe) not the orientation of the device.
Using the CSS properties and values API - Web APIs
.registered { --registered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d4
55; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d4
55; } <button class="registered">background registered</button> <button class="unregistered">background not registered</button> .registered { --registered: #...
...c0ffee; background-image: linear-gradient(to right, #fff, var(--registered)); transition: --registered 1s ease-in-out; } .registered:hover, .registered:focus { --registered: #b4d4
55; } .unregistered { --unregistered: #c0ffee; background-image: linear-gradient(to right, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d4
55; } button { height: 40vh; display: block; width: 100%; font-size: 3vw; } window.css.registerproperty({ name: '--registered', syntax: '<color>', inherits: false, initialvalue: 'red', }); while not functionally accurate, a good way to think about the difference between the unregistered property in the above example and the registered property is the ...
CanvasPattern.setTransform() - Web APIs
vg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-4
5).scale(1.
5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <...
...ble-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-4
5).scale(1.
5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1...
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 7
5, 0, 2 * math.pi); ctx.linewidth =
5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110,
50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas.
...table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:2
50px"> ctx.beginpath(); ctx.arc(100, 100, 7
5, 0, 2 * math.pi, false); ctx.linewidth =
5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110,
50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canva...
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x:
50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 1
50, y: 80 }; let end = { x: 2
50, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(start.x, start.y,
5, 0, 2 * math.pi); // start point ctx.arc(...
...end.x, end.y,
5, 0, 2 * math.pi); // end point ctx.fill(); // control points ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(cp1.x, cp1.y,
5, 0, 2 * math.pi); // control point one ctx.arc(cp2.x, cp2.y,
5, 0, 2 * math.pi); // control point two ctx.fill(); result in this example, the control points are red and the start and end points are blue.
CanvasRenderingContext2D.closePath() - Web APIs
html <canvas id="canvas"></canvas> javascript the triangle's corners are at (20, 1
50), (120, 20), and (220, 1
50).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(21
5, 80); ctx.arc(1
50, 80, 6
5, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
etleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 1
50; const height = 40; // button background ctx.fillstyle = active ?
... 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '1
5px sans-serif'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle = active ?
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 4
5); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.na...
...turalheight; // will draw the image as 300x227, ignoring the custom size of 60x4
5 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); } result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
it has a width of 1
50 and a height of 100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 1
50, 100); result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world',
50, 100); result applying multiple filters you can combine as many filters as you like.
... html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a
52
5ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.getImageData() - Web APIs
of those pixels, most are either transparent or taken from off the canvas; only
5,000 of them are opaque black (the color of the drawn rectangle).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 1
50, 10); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
for example, setting the line dash to [
5, 1
5, 2
5] will result in getting back [
5, 1
5, 2
5,
5, 1
5, 2
5].
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([10, 20]); console.log(ctx.getlinedash()); // [10, 20] // draw a dashed line ctx.beginpath(); ctx.moveto(0,
50); ctx.lineto(300,
50); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getlinedash' in that specification.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(
50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create ellipse const ellipse = new path2d(); ellipse.ellipse(1
50, 7
5, 40, 60, math.pi * .2
5, 0, 2 * math.pi); ctx.linewidth = 2
5; ctx.strokestyle = 'red'; ctx.fill(ellipse); ctx.stroke(ellipse); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); ...
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 1
50); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
... <canvas id="canvas" width="1
50" height="1
50"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); var linejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-
5,
5 + i * 40); ctx.lineto(3
5, 4
5 + i * 40); ctx.lineto(7
5,
5 + i * 40); ctx.lineto(11
5, 4
5 + i * 40); ctx.lineto(1
55,
5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineWidth - Web APIs
examples changing line width this example draws a line and a rectangle, using a line width of 1
5 units.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 1
5; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.putImageData() - Web APIs
ight; var limitbottom = dirtyy + dirtyheight; var limitright = dirtyx + dirtywidth; for (var y = dirtyy; y < limitbottom; y++) { for (var x = dirtyx; x < limitright; x++) { var pos = y * width + x; ctx.fillstyle = 'rgba(' + data[pos*4+0] + ',' + data[pos*4+1] + ',' + data[pos*4+2] + ',' + (data[pos*4+3]/2
55) + ')'; ctx.fillrect(x + dx, y + dy, 1, 1); } } } // draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.getimagedata(0, 0, 100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 1
50, 0,
50,
50, 2
5, 2
5); result data loss due to browser optimization due t...
... javascript const canvas = document.createelement("canvas"); canvas.width = 1; canvas.height = 1; const context = canvas.getcontext("2d"); const imgdata = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels = imgdata.data; pixels[0 + 0] = 1; pixels[0 + 1] = 127; pixels[0 + 2] = 2
55; pixels[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 2
55, 1 ] after: uint8clampedarray(4) [ 2
55, 2
55, 2
55, 1 ] specifications specification st...
CanvasRenderingContext2D.rect() - Web APIs
it has a width of 1
50 and a height of 100.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 20, 1
50, 100); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
the shadowcolor property sets its color, shadowoffsetx sets its offset 2
5 units to the right, and shadowblur gives it a blur level of 10.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 2
5; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 1
50, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
the shadowcolor property sets its color, shadowoffsety sets its offset 2
5 units towards the bottom, and shadowblur gives it a blur level of 10.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 2
5; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 1
50, 80); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 1
50, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(2
5, 2
5, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(17
5, 2
5, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width = 3
50; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 8
5); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent t...
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0,
50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
CanvasRenderingContext2D.textBaseline - Web APIs
html <canvas id="canvas" width="
550" height="
500"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 7
5 + index * 7
5; ctx.beginpath(); ctx.m...
...oveto(0, y + 0.
5); ctx.lineto(
550, y + 0.
5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification.
Drawing text - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10,
50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10,
50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size.
console.assert() - Web APIs
examples the following code example demonstrates the use of a javascript object following the assertion: const errormsg = 'the # is not even'; for (let number = 2; number <=
5; number += 1) { console.log('the # is ' + number); console.assert(number % 2 === 0, {number: number, errormsg: errormsg}); // or, using es201
5 object property shorthand: // console.assert(number % 2 === 0, {number, errormsg}); } // output: // the # is 2 // the # is 3 // assertion failed: {number: 3, errormsg: "the # is not even"} // the # is 4 // the # is
5 // assertion failed: {n...
...umber:
5, errormsg: "the # is not even"} note that, while a string containing a substitution string works as a parameter for console.log in node and many, if not most, browsers...
ConstantSourceNode() - Web APIs
example in this example, an audio context is created, then a constantsourcenode is established with its offset initialized to 0.
5.
... let audiocontext = new audiocontext(); let myconstantsource = new constantsourcenode(audiocontext, { offset: 0.
5 }); note: the new constantsourcenode created by the constructor has a channelcount of 2.
IDBIndex.unique - Web APIs
full support 12firefox full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 1
5safari full support 7webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix: webkitchrome android full support 2
5firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.
5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBKeyRange.includes() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetincludeschrome full support
52edge full support ≤18firefox full support 47ie ?
... opera full support 39safari full support 10.1webview android full support
52chrome android full support
52firefox android full support yesopera android full support 41safari ios full support 10.3samsung internet android full support 6.0legend full support full support compatibility unknown ...
IDBObjectStore.getKey() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support 48edge full support ≤79firefox full support
51ie ?
... opera full support 4
5safari full support 10.1webview android full support 48chrome android full support 48firefox android full support
58opera android full support 43safari ios full support 10.3samsung internet android full support
5.0legend full support full support compatibility unknown ...
IDBOpenDBRequest: blocked event - Web APIs
re.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist',
5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.result; db.onerror = () => { console.log('error creati...
...re.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { // let's try to open the same database with a higher revision version const req2 = indexeddb.open('todolist',
5); // in this case the onblocked handler will be executed req2.onblocked = () => { console.log('request was blocked'); }; }; ...
IDBRequest - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="1
51" y="1" width="100" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction.objectStoreNames - Web APIs
opera full support 3
5safari full support yeswebview android full support 48chrome android full support 48firefox android full support yesopera android full support 3
5safari ios ful...
...l support yessamsung internet android full support
5.0legend full support full support compatibility unknown compatibility unknown ...
IIRFilterNode.getFrequencyResponse() - Web APIs
we first create the float32array objects we need, one containing the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(
5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] =
5000; var magresponseoutput = new float32array(
5); var phaseresponseoutput = new float32array(
5); next we create a <ul> element in our html to contain our results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul cla...
...ss="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable list at the bottom of the page: var feedforwardcoefficients = [0.1, 0.2, 0.3, 0.4, 0.
5]; var feedbackcoefficients = [0.
5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ...
ImageBitmap.close() - Web APIs
syntax void imagebitmap.close() examples var offscreen = new offscreencanvas(2
56, 2
56); var gl = offscreen.getcontext('webgl'); // ...
... var bitmap = offscreen.transfertoimagebitmap(); // imagebitmap { width: 2
56, height: 2
56 } bitmap.close(); // imagebitmap { width: 0, height: 0 } -- disposed specifications specification status comment html living standardthe definition of 'close()' in that specification.
ImageCapture.takePhoto() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettakephoto experimentalchrome full support 60 full support 60 no support
59 — 60notes notes photosettings argument not supported.edge full support ≤79firefox ?
... webview android full support 60 full support 60 no support
59 — 60notes notes photosettings argument not supported.chrome android full support 60 full support 60 no support
59 — 60notes notes photosettings argument not supported.firefox android ?
ImageData() - Web APIs
the imagedata constructor specifies a width of 200 for the new object, so its height defaults to 10,000 divided by 200, which is
50.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const arr = new uint8clampedarray(40000); // iterate through every pixel for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 2
55; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result specification specification status comment html living standardthe definition of 'imagedata()' in that specification.
ImageData.data - Web APIs
data is stored as a one-dimensional array in the rgba order, with integer values between 0 and 2
55 (inclusive).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // percentage in the x direction, times 2
55 let x = (i % 400) / 400 * 2
55; // percentage in the y direction, times 2
55 let y = math.ceil(i / 400) / 100 * 2
55; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 2
55 - x; // b value imagedata.data[i + 3] = 2
55; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 2...
compareVersion - Web APIs
in particular, this method returns one of the following values: -
5 component not present or not registered.
... the following constants can be used to check the value returned by compareversion: int major_diff = 4; int minor_diff = 3; int rel_diff = 2; int bld_diff = 1; int equal = 0; in communicator 4.
5, the following constants are defined and available for checking the value returned by compareversion: <code>installtrigger.major_diff installtrigger.minor_diff installtrigger.rel_diff installtrigger.bld_diff installtrigger.equal </code> description the compareversion method compares the version of an installed file or package with a specified version.
KeyframeEffect.KeyframeEffect() - Web APIs
accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.
58, 1)".
...0.
5 would indicate starting halfway through the first iteration for example, and with this value set, an animation with 2 iterations would end halfway through a third iteration.
Location - Web APIs
span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.
5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:
50%; margin-left:-
50%; font-size:40%; line-height:1.
5; background:black;} [title]:hover:before, :target:before {background:black; color:yellow;} [title] [title]:before {margin-top:1.
5em;} [title] [title] [title]:before {margin-top:3em;} [title]:...
...hover, :target {position:relative; z-index:1; outline:
50em solid rgba(2
55,2
55,2
55,.8);} javascript [].foreach.call(document.queryselectorall('[title][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
MediaDeviceInfo.deviceId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeviceidchrome full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfilledge full support 12firefox full support 39ie no support noopera no support ...
... nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari no support nowebview android full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfillchrome android full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfillfirefox android full support 39opera android ...
MediaDeviceInfo.kind - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkindchrome full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfilledge full support 12firefox full support 39ie no support noopera no support ...
... nonotes no support nonotes notes this property can be used in opera by using the adapter.js polyfill.safari no support nowebview android full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfillchrome android full support
55notes full support
55notes notes for earlier versions, this interface is available through the adapter.js polyfillfirefox android full support 39opera android ...
MediaDeviceInfo - Web APIs
navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua
53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma
5wtovckwfz368xcndm0= or if one or more media streams are active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua
53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvl...
...dmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma
5wtovckwfz368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevicesinfo' in that specification.
MediaDevices.enumerateDevices() - Web APIs
navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoinput: id = cso9c0ypaf274oucpua
53cne0yhlir2yxci+sqfbzz8= audioinput: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: id = r2/xw1xupiyzunfv1lgrkoma
5wtovckwfz368xcndm0= or if one or more mediastreams are active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua
53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yket...
...ycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma
5wtovckwfz368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevices: enumeratedevices' in that specification.
MediaDevices.getUserMedia() - Web APIs
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.
... var constraints = { video: { framerate: { ideal: 10, max: 1
5 } } }; front and back camera on mobile phones.
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
...,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="1
51" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.
571428
571428
571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53"...
... text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 121,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="1
51" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaMetadata.album - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalbum experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support
57firefox android ?
MediaMetadata.artist - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartist experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support
57firefox android ?
MediaMetadata.artwork - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartwork experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support
57firefox android ?
MediaMetadata.title - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettitle experimentalchrome full support
57edge no support nofirefox full support 71ie no support noopera full support yessafari ?
... webview android no support nochrome android full support
57firefox android ?
MediaSource - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="1
51" y="1" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
MediaStream.getTrackById() - Web APIs
example this example activates a commentary track on a video by ducking the audio level of the main audio track to
50%, then enabling the commentary track.
... stream.gettrackbyid("primary-audio-track").applyconstraints({ volume: 0.
5 }); stream.gettrackbyid("commentary-track").enabled = true; specifications specification status comment media capture and streamsthe definition of 'gettrackbyid()' in that specification.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
Using the MediaStream Recording API - Web APIs
first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index:
5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in...
... by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.
5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().
Transcoding assets for Media Source Extensions - Web APIs
run the following commands (shown with sample output): $ python mp4-dash-encode.py -b
5 -v bunny_fragmented.mp4 encoding
5 bitrates, min bitrate =
500.0 max bitrate = 2000.0 media source: video: resolution=640x360 encoding bitrate:
500, resolution: 2
56x144 encoding bitrate: 87
5, resolution: 384x216 encoding bitrate: 12
50, resolution: 480x270 encoding bitrate: 162
5, resolution:
560x316 encoding bitrate: 2000, resolution: 640x360 $ python mp4-dash.py video_0* parsing media file 1: vi...
...deo_00
500.mp4 parsing media file 2: video_0087
5.mp4 parsing media file 3: video_012
50.mp4 parsing media file 4: video_0162
5.mp4 parsing media file
5: video_02000.mp4 splitting media file (audio) video_00
500.mp4 splitting media file (video) video_00
500.mp4 splitting media file (video) video_0087
5.mp4 splitting media file (video) video_012
50.mp4 splitting media file (video) video_0162
5.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └──
5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages.
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
Navigator.registerContentHandler() - Web APIs
specifications specification status comment html
5.2the definition of 'registercontenthandler()' in that specification.
... recommendation this feature is present in html
5.2, but has since been removed from the whatwg html living standard.
NavigatorLanguage - Web APIs
living standard since the html
5 snapshot, the languages property has been added.
... html
5the definition of 'navigatorlanguage' in that specification.
NetworkInformation - Web APIs
networkinformation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 2
5 kilobits per seconds.
... networkinformation.rtt read only returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 2
5 milliseconds.
Node.localName - Web APIs
getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.namespaceuri + "'"; } ]]></script> </head> <body onload="test()"> <svg:svg version="1.1" width="100px" height="100px" viewbox="0 0 100 100"> <svg:circle cx="
50" cy="
50" r="30" style="fill:#aaa" id="circle"/> </svg:svg> <textarea id="text" rows="4" cols="
55"/> </body> </html> notes the local name of a node is that part of the node's qualified name that comes after the colon.
...in later versions, in compliance with html
5, the property returns in the case of the internal dom storage, which is lower case for both html elements in html doms and xhtml elements in xml doms.
Node.namespaceURI - Web APIs
in firefox 3.
5 and earlier, the namespace uri for html elements in html documents is null.
... in later versions, in compliance with html
5, it is https://www.w3.org/1999/xhtml as in xhtml.
NodeIterator - Web APIs
nodefilter.show_document 2
56 shows document nodes.
... nodefilter.show_document_type
512 shows documenttype nodes.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment
5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment1
5 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.color_attachment1_webgl e...
...xt.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment
5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment1
5_webgl when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetofflineaudiocompletionevent() constructorchrome full support
57notes full support
57notes notes before chrome
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42s...
... webview android full support
57notes full support
57notes notes before version
59, the default values were not supported.chrome android full support
57notes full support
57notes notes before chrome
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
OfflineAudioContext.OfflineAudioContext() - Web APIs
for example, a
5-second buffer with a samplerate of 48000hz would have a length of
5 * 48000 = 240000 sample-frames.
...all user agents are required to support a range of 220
50hz to 96000hz, and may support a wider range than that.
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.9
5 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(2
56, 2
56); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters optionsoptional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.9
5 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(2
56, 2
56); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.convertToBlob() - Web APIs
syntax promise<blob> offscreencanvas.converttoblob(options); parameters options optional you can specify several options when converting your offscreencanvas object into a blob object, for example: const blob = offscreencanvas.converttoblob({ type: "image/jpeg", quality: 0.9
5 }); options: type: a domstring indicating the image format.
... examples var offscreen = new offscreencanvas(2
56, 2
56); var gl = offscreen.getcontext("webgl"); // ...
OffscreenCanvas.transferToImageBitmap() - Web APIs
examples var offscreen = new offscreencanvas(2
56, 2
56); var gl = offscreen.getcontext("webgl"); // ...
... offscreen.transfertoimagebitmap(); // imagebitmap { width: 2
56, height: 2
56 } specifications specification status comment html living standardthe definition of 'offscreencanvas.transfertoimagebitmap()' in that specification.
PageTransitionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
... 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
Page Visibility API - Web APIs
budget-based background timeout throttling is now available in modern browsers (firefox
58+, chrome
57+), placing an additional limit on background timer cpu usage.
... this operates in a similar way across modern browsers, with the details being as follows: in firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +
50 ms and -1
50 ms, respectively.
PaymentCurrencyAmount.currency - Web APIs
example this example represents the price of $42.9
5 in us dollars.
... let itemprice = { currency: "usd", value: "42.9
5" }; specifications specification status comment payment request apithe definition of 'paymentcurrencyamount.currency' in that specification.
PaymentRequest.abort() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabort()chrome full support 61edge full support 1
5firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
53firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.canMakePayment() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcanmakepayment()chrome full support 61edge full support 16firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
53firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.onshippingaddresschange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingaddresschangechrome full support 61edge full support 1
5firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
53firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.shippingOption - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support 61edge full support 1
5firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
53firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.shippingType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingtypechrome full support 61edge full support 1
5firefox full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1webview android no support nochrome android full support
55firefox android full support
55notes disabled full support
55notes disabled notes available only in nightly builds.disabled from version
55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentRequest.payerName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayernamechrome full support 61edge full support 1
5firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yeswebview android no support nochrome android full support
58firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
PaymentResponse.requestId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidchrome full support 61edge full support 16firefox full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
... no support noopera no support nosafari full support yeswebview android no support nochrome android full support 60firefox android full support
56notes disabled full support
56notes disabled notes available only in nightly builds.disabled from version
56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true).
performance.now() - Web APIs
// reduced time precision (1ms) in firefox 60 performance.now(); // 8781416 // 878181
5 // 8782206 // ...
... // reduced time precision with `privacy.resistfingerprinting` enabled performance.now(); // 886
5400 // 8866200 // 8866700 // ...
Performance.timeOrigin - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimentalchrome full support 62edge full support 16firefox full support
53ie ?
... opera full support 49safari no support nowebview android full support 62chrome android full support 62firefox android full support
53opera android full support 46safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
PerformanceFrameTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></...
...svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformanceLongTaskTiming.attribution - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetattribution experimentalchrome full support
58edge full support ≤79firefox no support noie ?
... webview android full support
58chrome android full support
58firefox android no support noopera android full support yessafari ios ?
PerformanceMark - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformanceResourceTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="2
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} note: this feature is available in web workers.
PerformanceServerTiming - Web APIs
example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=
53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance...
....getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration:
53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.
Using the Performance API - Web APIs
the unit is milliseconds and should be accurate to
5 µs (microseconds).
... however, if the browser is unable to provide a time value accurate to
5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to a millisecond.
Performance API - Web APIs
the unit of domhighrestimestamp is milliseconds and should be accurate to
5 µs (microseconds).
... however, if the browser is unable to provide a time value accurate to
5 microseconds (because, for example, due to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond.
Using Performance Timeline - Web APIs
performance.mark not supported"); return; } // create some performance entries via the mark() and measure() methods performance.mark("begin"); do_work(
50000); performance.mark("end"); do_work(
50000); performance.measure("measure1", "begin", "end"); // use getentries() to iterate all entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("all entry[" + i + "]"); print_perf_entry(p[i]); } // use getentries(name, entrytype) to get specific entries p = performance.getentries({name : "measure1", en...
... function print_performanceentry(ev) { var properties = ["name", "entrytype", "starttime", "duration"]; // create a few performance entries performance.mark("start"); do_work(
50000); performance.mark("stop"); performance.measure("measure-1"); var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("perfentry[" + i + "]"); for (var j=0; j < properties.length; j++) { // check each property in window.performance var supported = properties[j] in p[i]; if (supported) { var pe = p[i]; log("...
PhotoCapabilities.fillLightMode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilllightmode experimentalchrome full support
59edge full support ≤79firefox ?
... webview android full support
59chrome android full support
59firefox android ?
PhotoCapabilities.imageHeight - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support
59edge full support ≤79firefox ?
... webview android full support
59chrome android full support
59firefox android ?
imageWidth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support
59edge full support ≤79firefox ?
... webview android full support
59chrome android full support
59firefox android ?
PhotoCapabilities.redEyeReduction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetredeyereduction experimentalchrome full support
59edge full support ≤79firefox ?
... webview android full support
59chrome android full support
59firefox android ?
PointerEvent.getCoalescedEvents() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcoalescedevents experimentalchrome full support
58edge full support 79firefox full support
59ie no support noopera full support 4
5safari no support nowebview android full support ...
...
58chrome android full support
58firefox android partial support
59disabled partial support
59disabled disabled from version
59: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true).
Pointer Lock API - Web APIs
document.addeventlistener('pointerlockerror', lockerror, false); document.addeventlistener('mozpointerlockerror', lockerror, false); function lockerror(e) { alert("pointer lock failed"); } note: until firefox
50 the above events were prefixed with moz in firefox.
... we set initial x and y positions on the canvas: var x =
50; var y =
50; the pointer lock methods are currently prefixed, so next we'll fork them for the different browser implementations.
Pointer events - Web APIs
pen stylus) around its major axis in degrees, with a value in the range 0 to 3
59.
...pen contact changed since last event -1 — mouse move with no buttons pressed, pen moved while hovering with no buttons pressed — 0 left mouse, touch contact, pen contact 0 1 middle mouse 1 4 right mouse, pen barrel button 2 2 x1 (back) mouse 3 8 x2 (forward) mouse 4 16 pen eraser button
5 32 notice: the button property indicates a change in the state of the button.
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
... 76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha2
56 = -7; const cose_alg_ecdsa_w_sha
512 = -36; var createcredentialoptions = { // format of new credentials is publickey publickey: { // relying party rp: { name: "example corp", id: "login.example.com", icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8arr...
...smith", }, // requested format of new keypair pubkeycredparams: [{ type: "public-key", alg: cose_alg_ecdsa_w_sha2
56, }], // timeout after 1 minute timeout: 60000, // do not send the authenticator's origin attestation attestation: "none", extensions: { uvm: true, exts: true }, // filter out authenticators which are bound to the device authenticatorselection:{ authenticatorattachment: "cross-platform", requireresidentkey: true, userverification: "preferred" }, ...
PushMessageData.arrayBuffer() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetarraybuffer experimentalchrome full support
50edge full support ≤79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera ...
... full support 37safari no support nowebview android no support nochrome android full support
50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
PushMessageData.blob() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetblob experimentalchrome full support
50edge full support ≤79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera ...
... full support 37safari no support nowebview android no support nochrome android full support
50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
PushMessageData.json() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetjson experimentalchrome full support
50edge full support ≤79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera ...
... full support 37safari no support nowebview android no support nochrome android full support
50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
PushMessageData.text() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext experimentalchrome full support
50edge full support ≤79firefox full support 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera ...
... full support 37safari no support nowebview android no support nochrome android full support
50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support
5.0legend full support full support no support no supportexperimental.
PushSubscription.getKey() - Web APIs
the value can be: p2
56dh: an elliptic curve diffie–hellman public key on the p-2
56 curve (that is, the nist secp2
56r1 elliptic curve).
... allow the user to enable push return; } // set your ui to show they have subscribed for // push messages subbtn.textcontent = 'unsubscribe from push messaging'; ispushenabled = true; // initialize status, which includes setting ui elements for subscribed status // and updating subscribers list via push var endpoint = subscription.endpoint; var key = subscription.getkey('p2
56dh'); var auth = subscription.getkey('auth'); ...
RTCDTMFSender.toneBuffer - Web APIs
using tone buffer strings for example, if you're writing code to control a voicemail system by sending dtmf codes, you might use a string such as "*,1,
5555".
... in this example, we would send "*" to request access to the vm system, then, after a pause, send a "1" to start playback of voicemail messages, then after a pause, dial "
5555" as a pin number to open the messages.
RTCDTMFSender - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="1
51" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
RTCDataChannel.stream - Web APIs
the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 6
5,
53
5) which uniquely identifies the rtcdatachannel.
... syntax var stream = adatachannel.stream; value an unsigned short value (that is, an integer between 0 and 6
5,
53
5) which uniquely identifies the data channel.
Range.setStart() - Web APIs
const endoffset =
5; // end at fifth node: dodge city, ks const range = document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
... html <p id="content">01234
56789</p> <p id="log"></p> javascript const element = document.getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode,
5); // end at fifth character document.getelementbyid('log').textcontent = range; result specifications specification status comment domthe definition of 'range.setstart()' in that specification.
Using the Resource Timing API - Web APIs
transfersize[" + i + "] = not supported"); } } managing the resource buffer although the browser is required to support at least 1
50 resource timing performance entries in its resource timing buffer, some applications may use more resources than that limit.
...er_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-2
56.e2c1fc
556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared.
Resource Timing API - Web APIs
the unit of domhighrestimestamp is milliseconds and should be accurate to
5 µs (microseconds).
... however, if the browser is unable to provide a time value accurate to
5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.
format - Web APIs
if the font is in one of the formats listed in css2([css2], section1
5.3.
5), then its value is the corresponding <string> parameter of the font.
... syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section1
5.3.
5).
SVGExternalResourcesRequired - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired<...
.../text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGFilterPrimitiveStandardAttributes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivesta...
...ndardattributes</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties svgfilterprimitivestandardattributes.x read only an svganimatedlength corresponding to the x attribute of the given element.
SVGFontElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text></a></svg></div> a...
...:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgexternalresourcesrequired and svgstylable.
SVGFontFaceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontfaceelement</text></a></svg></di...
...v> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceFormatElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontfaceformatelement</text><...
.../a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceNameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontfacenameelement</text></a><...
.../svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceSrcElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontfacesrcelement</text></a></s...
...vg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceUriElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgfontfaceurielement</text></a></s...
...vg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</text></a></svg></div> ...
...a:hover text { fill: #009
5dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGHKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svghkernelement" target="_top"><rect x="1" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svghkernelement</text></a></svg></div> ...
... a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecoding experimentalchrome full support 6
5edge full support ≤79firefox ?
... webview android full support 6
5chrome android full support 6
5firefox android ?
SVGMissingGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgmissingglyphelement</text></a><...
.../svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgstylable.
SVGPreserveAspectRatio - Web APIs
none methods none properties unsigned short align unsigned short meetorslice constants svg_preserveaspectratio_unknown = 0 svg_preserveaspectratio_none = 1 svg_preserveaspectratio_xminymin = 2 svg_preserveaspectratio_xmidymin = 3 svg_preserveaspectratio_xmaxymin = 4 svg_preserveaspectratio_xminymid =
5 svg_preserveaspectratio_xmidymid = 6 svg_preserveaspectratio_xmaxymid = 7 svg_preserveaspectratio_xminymax = 8 svg_preserveaspectratio_xmidymax = 9 svg_preserveaspectratio_xmaxymax = 10 svg_meetorslice_unknown = 0 svg_meetorslice_meet = 1 svg_meetorslice_slice = 2 normative document svg 1.1 (2nd edition) constants ...
... svg_preserveaspectratio_xminymid
5 corresponds to value xminymid for attribute preserveaspectratio.
SVGRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text {...
... fill: #009
5dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
SVGTRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text></a></svg></div> a...
...:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextpositioningelement and implements properties from svgurireference.
SVGTransform - Web APIs
wx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_transform_unknown = 0 svg_transform_matrix = 1 svg_transform_translate = 2 svg_transform_scale = 3 svg_transform_rotate = 4 svg_transform_skewx =
5 svg_transform_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_transform_unknown 0 the unit type is not one of predefined unit types.
... svg_transform_matrix 1 a matrix(…) transformation svg_transform_translate 2 a translate(…) transformation svg_transform_scale 3 a scale(…) transformation svg_transform_rotate 4 a rotate(…) transformation svg_transform_skewx
5 a skewx(…) transformation svg_transform_skewy 6 a skewy(…) transformation properties name type description type unsigned short the type of the value as specified by one of the svg_transform_* constants defined on this interface.
SVGTransformList - Web APIs
ction transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on var tfmlist = evt.target.transform.baseval; // create a seperate transform object for each transform var translate = svgroot.createsvgtransform(); translate.settranslate(
50,
5); var rotate = svgroot.createsvgtransform(); rotate.setrotate(10,0,0); var scale = svgroot.createsvgtransform(); scale.setscale(0.8,0.8); // apply the transformations by appending the svgtranform objects to the svgtransformlist associated with the element tfmlist.appenditem(translate); tfmlist.appenditem(rotate); tfmlist.appenditem(scale); ...
... } ]]> </script> <polygon fill="orange" stroke="black" stroke-width="
5" points="100,22
5 100,11
5 130,11
5 70,1
5 70,1
5 10,11
5 40,11
5 40,22
5" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="
5" onclick="transformme(evt)"/> <text x="40" y="2
50" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtransformlist' in that specification.
SVGUnitTypes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> a:hove...
...r text { fill: #009
5dd; pointer-events: all;} constants name value description svg_unit_type_unknown 0 the type is not one of predefined types.
SVGVKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="1
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</text></a></svg></div> ...
... a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGZoomAndPan - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></div> a:ho...
...ver text { fill: #009
5dd; pointer-events: all;} constants name value description svg_zoomandpan_unknown 0 the type is not one of predefined types.
ScriptProcessorNode - Web APIs
the buffer size must be a power of 2 between 2
56 and 16384, that is 2
56,
512, 1024, 2048, 4096, 8192 or 16384.
...its value can be a power of 2 value in the range 2
56–16384.
Selection.extend() - Web APIs
afari ios full support yessamsung internet android full support yesoffset parameter is optional experimentalchrome full support yesedge full support ≤79firefox full support
55ie no support noopera full support yessafari full support yeswebview android no support nochrome android full support yesfirefox android full support ...
...
55opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no supportexperimental.
Selection.removeRange() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverange experimentalchrome full support
58edge full support 12firefox full support yesie ?
... opera full support 4
5safari no support nowebview android full support
58chrome android full support
58firefox android full support yesopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support ...
ServiceWorkerRegistration.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support
59edge full support 17 full support 17 full support 16disabled disabled from version 16: this feature is behind the enable service workers preference.firefox full support 44notes full support ...
... 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 46safari full support 11.1webview android full support
59chrome android full support
59firefox android full support 44opera android full support 43safari ios full support 11.3samsung internet android full support 4.0legend ...
Using Service Workers - Web APIs
note: as of firefox 44, when appcache is used to provide offline support for a page a warning message is now displayed in the console advising developers to use service workers instead (bug 1204
581.) service workers should finally fix these issues.
... the "forget" button, available in firefox's customization options, can be used to clear service workers and their caches (bug 12
52998).
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="1
51" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="1
51" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
SpeechSynthesisUtterance.pitch - Web APIs
syntax // default 1 speechsynthesisutteranceinstance.pitch = 1.
5; value a float representing the pitch value.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.
5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
syntax var myvolume = speechsynthesisutteranceinstance.volume; speechsynthesisutteranceinstance.volume = 0.
5; value a float that represents the volume value, between 0 (lowest) and 1 (highest.) if ssml is used, this value will be overridden by prosody tags in the markup.
... inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.
5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specification.
StaticRange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,2
5...
... 141,20 141,30 131,2
5" stroke="#d4dde4" fill="none"/><line x1="141" y1="2
5" x2="171" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StereoPannerNode.StereoPannerNode() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstereopannernode() constructorchrome full support
55notes full support
55notes notes before chrome
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42s...
...afari no support nowebview android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios no support nosamsung internet android full support 6.0notes ...
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 76,2
5" stroke="#d4...
...dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring repres...
StylePropertyMap - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">stylepropertymap</text></a></svg></div> ...
... a:hover text { fill: #009
5dd; pointer-events: all;} properties inherits properties from its parent, stylepropertymapreadonly.
SubtleCrypto.deriveBits() - Web APIs
async function derivesharedsecret(privatekey, publickey) { const sharedsecret = await window.crypto.subtle.derivebits( { name: "ecdh", namedcurve: "p-384", public: publickey }, privatekey, 128 ); const buffer = new uint8array(sharedsecret, 0,
5); const sharedsecretvalue = document.queryselector(".ecdh .derived-bits-value"); sharedsecretvalue.classlist.add("fade-in"); sharedsecretvalue.addeventlistener("animationend", () => { sharedsecretvalue.classlist.remove("fade-in"); }); sharedsecretvalue.textcontent = `${buffer}...[${sharedsecret.bytelength} bytes total]`; } // generate 2 ecdh key pairs: one for alice and one for bob...
...*/ async function getderivedbits() { const keymaterial = await getkeymaterial(); salt = window.crypto.getrandomvalues(new uint8array(16)); const derivedbits = await window.crypto.subtle.derivebits( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-2
56" }, keymaterial, 2
56 ); const buffer = new uint8array(derivedbits, 0,
5); const derivedbitsvalue = document.queryselector(".pbkdf2 .derived-bits-value"); derivedbitsvalue.classlist.add("fade-in"); derivedbitsvalue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.byt...
SubtleCrypto.encrypt() - Web APIs
algorithm parameters of invalid sizes, or aes-gcm plaintext longer than 2³⁹−2
56 bytes).
...unction encryptmessage(key) { let encoded = getmessageencoding(); // counter will be needed for decryption counter = window.crypto.getrandomvalues(new uint8array(16)); return window.crypto.subtle.encrypt( { name: "aes-ctr", counter, length: 64 }, key, encoded ); } let iv = new uint8array(16); let key = new uint8array(16); let data = new uint8array(1234
5); //crypto functions are wrapped in promises so we have to use await and make sure the function that //contains this code is an async function //encrypt function wants a cryptokey object const key_encoded = await crypto.subtle.importkey( "raw", key.buffer, 'aes-ctr' , false, ["encrypt", "decrypt"]); const encrypted_content = await window.crypto.subtle.encrypt( { name: "aes-ctr"...
SubtleCrypto - Web APIs
the table below summarises which algorithms are suitable for which cryptographic operations: sign() verify() encrypt() decrypt() digest() derivebits() derivekey() wrapkey() unwrapkey() rsassa-pkcs1-v1_
5 ✓ rsa-pss ✓ ecdsa ✓ hmac ✓ rsa-oaep ✓ ✓ aes-ctr ✓ ✓ aes-cbc ✓ ✓ aes-gcm ✓ ✓ sha-1 ✓ sha-2
56 ✓ s...
...ha-384 ✓ sha-
512 ✓ ecdh ✓ hkdf ✓ pbkdf2 ✓ aes-kw ✓ specifications specification status comment web cryptography apithe definition of 'subtlecrypto' in that specification.
TaskAttributionTiming.containerId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainerid experimentalchrome full support
58edge full support ≤79firefox no support noie ?
... webview android full support
58chrome android full support
58firefox android no support noopera android full support yessafari ios ?
TaskAttributionTiming.containerType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainertype experimentalchrome full support
58edge full support ≤79firefox no support noie ?
... webview android full support
58chrome android full support
58firefox android no support noopera android full support yessafari ios ?
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="...
...161,2
5 171,20 171,30 161,2
5" stroke="#d4dde4" fill="none"/><line x1="171" y1="2
5" x2="201" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
HTMLSlotElement.assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslotchrome full support
53edge full support ≤18firefox full support yesie ?
... opera full support 40safari full support 10.1webview android full support
53chrome android full support
53firefox android full support yesopera android full support 41safari ios full support 10.3samsung internet android full support 6.0legend full support full support compatibility unknown ...
TextDecoder.prototype.encoding - Web APIs
the legacy single-byte encodings: 'ibm866', 'iso-88
59-2', 'iso-88
59-3', 'iso-88
59-4', 'iso-88
59-
5', 'iso-88
59-6', 'iso-88
59-7', 'iso-88
59-8'', 'iso-88
59-8i', 'iso-88
59-10', 'iso-88
59-13', 'iso-88
59-14', 'iso-88
59-1
5', 'iso-88
59-16', 'koi8-r', 'koi8-u', 'macintosh', 'windows-874', 'windows-12
50', 'windows-12
51', 'windows-12
52', 'windows-12
53', 'windows-12
54', 'windows-12
55', 'windows-12
56', 'windows-12
57', 'windows-12
58', or 'x-mac-cyrillic'.
... the legacy multi-byte chinese (traditional) encoding: 'big
5'.
VideoTrack - Web APIs
the language is specified as a bcp 47 (rfc
5646) language code, such as "en-us" or "pt-br".
... for (var i = 0; i < tracks.length; i++) { if (tracks[i].language === userlanguage) { tracks[i].selected = true; break; } }); the language is in standard (rfc
5646) format.
WEBGL_compressed_texture_s3tc - Web APIs
ext.compressed_rgba_s3tc_dxt
5_ext a dxt
5-compressed image in an rgba image format.
... examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc') || gl.getextension('moz_webgl_compressed_texture_s3tc') || gl.getextension('webkit_webgl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt
5_ext,
512,
512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status comment webgl_compressed_texture_s3tcthe definition of 'webgl_compressed_texture_s3tc' in that specification.
WEBGL_compressed_texture_s3tc_srgb - Web APIs
ext.compressed_srgb_alpha_s3tc_dxt
5_ext a dxt
5-compressed image in an srgba image format.
... examples var ext = gl.getextension('webgl_compressed_texture_s3tc_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_srgb_s3tc_dxt1_ext,
512,
512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status comment webgl_compressed_texture_s3tc_srgbthe definition of 'webgl_compressed_texture_s3tc_srgb' in that specification.
WaveShaperNode.WaveShaperNode() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwaveshapernode() constructorchrome full support
55notes full support
55notes notes before chrome
59, the default values were not supported.edge full support ≤79firefox full support
53ie no support noopera full support 42s...
... webview android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.chrome android full support
55notes full support
55notes notes before chrome
59, the default values were not supported.firefox android full support
53opera android full support 42safari ios ?
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
possible values: gl.color_attachment{0-1
5}: invalidates one of the framebuffer's color buffers.
... examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1], 0, 0, 2
56, 2
56); specifications specification status comment webgl 2.0the definition of 'invalidatesubframebuffer' in that specification.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
possible values: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 gl.rgba4 gl.rgb
56
5 gl.rgb
5_a1 gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component16 gl.depth_component24 gl.depth_component32f gl.depth_stencil gl.depth24_stencil8 gl.depth32f_stencil8 gl.stencil_index8 width a glsizei specifying the width of the renderbuffer in pixels.
... examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 2
56, 2
56); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification.
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsamplerparameterichrome full support
56edge full support 79firefox full support
51ie no support noopera full support 43safari no support nowebview android full support ...
...
58chrome android full support
58firefox android full support
51opera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support ...
WebGL2RenderingContext.texStorage2D() - Web APIs
possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb
56
5 gl.r11f_g11f_b10f gl.rgb9_e
5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb
5_a1 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui unlike opengl 3.0, webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section
5.37 in the webgl 2 spec).
... examples gl.texstorage2d(gl.texture_2d, 1, gl.rgb8, 2
56, 2
56); specifications specification status comment webgl 2.0the definition of 'texstorage2d' in that specification.
WebGL2RenderingContext.texStorage3D() - Web APIs
possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb
56
5 gl.r11f_g11f_b10f gl.rgb9_e
5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb
5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac ...
... examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 2
56, 2
56, 2
56); specifications specification status comment webgl 2.0the definition of 'texstorage3d' in that specification.
WebGLContextEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="7
5" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.
5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,2
5 86,20 86,30 ...
...76,2
5" stroke="#d4dde4" fill="none"/><line x1="86" y1="2
5" x2="116" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
WebGLRenderingContext.blendColor() - Web APIs
examples to set the blend color, use: gl.blendcolor(0, 0.
5, 1, 1); to get the blend color, query the blend_color constant which returns a float32array.
... gl.getparameter(gl.blend_color); // float32array[0, 0.
5, 1, 1] specifications specification status comment webgl 1.0the definition of 'blendcolor' in that specification.
WebGLRenderingContext.clearColor() - Web APIs
examples gl.clearcolor(1, 0.
5, 0.
5, 3); to get the current clear color, query the color_clear_value constant which returns a float32array.
... gl.getparameter(gl.color_clear_value); // float32array[1, 0.
5, 0.
5, 1] specifications specification status comment webgl 1.0the definition of 'clearcolor' in that specification.
WebGLRenderingContext.clearDepth() - Web APIs
examples gl.cleardepth(0.
5); to get the current depth clear value, query the depth_clear_value constant.
... gl.getparameter(gl.depth_clear_value); // 0.
5 specifications specification status comment webgl 1.0the definition of 'cleardepth' in that specification.
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
when using a webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment
5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment1
5 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.col...
...or_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment
5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment1
5_webgl renderbuffertarget a glenum specifying the binding point (target) for the render buffer.
WebGLRenderingContext.framebufferTexture2D() - Web APIs
gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment
5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment1
5 when using the webgl_draw_buffers extension: ext.color_attachment0_webgl (same as gl.color_attachment0) ext.col...
...or_attachment1_webgl ext.color_attachment2_webgl ext.color_attachment3_webgl ext.color_attachment4_webgl ext.color_attachment
5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment1
5_webgl when using the webgl_depth_texture extension: gl.depth_stencil_attachment: depth and stencil buffer data storage.
XMLHttpRequest: abort event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 2
5rem; height: 4rem; border: 1px solid black; margin: .
5rem; padding: .2rem; } input { width: 11rem; margin: .
5rem; } js const xhrbuttonsuccess = document.queryselector('.xhr.success'); const xhrbuttonerror = document.queryselector('.xhr.error'); const xhrbuttonabort = document.queryselector('.xhr.abort'); const log = document.queryselector('.event-log'); function handl...
...er('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16
553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-
50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="
50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="
56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,2
5 12...
...1,20 121,30 111,2
5" stroke="#d4dde4" fill="none"/><line x1="121" y1="2
5" x2="1
51" y2="2
5" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="1
51" y="1" width="2
50" height="
50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e
53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #009
5dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
XPathException - Web APIs
constants constant value description invalid_expression_err
51 if the expression has a syntax error or otherwise is not a legal expression according to the rules of the specific xpathevaluator or contains specialized extension functions or variables not supported by this implementation.
... type_err
52 if the expression cannot be converted to return the specified type.
XRBoundedReferenceSpace.boundsGeometry - Web APIs
the specification recommends that browsers shift the points to the nearest
5 centimeters (while avoiding going outside the physical limitations of the hardware).
...instead, it's meant to be used for one-room spaces with no more than around 1
5 meters of available movement space in any direction from the native origin.
XRRenderStateInit - Web APIs
all distances are specified as floating-point values in meters; you can specify a value of
50 centimeters using a value of 0.
5, for example.
...the default value is otherwise π * 0.
5 (half of the value of pi).
XRRigidTransform.matrix - Web APIs
thus, for an array [a0, a1, a2, ..., a13, a14, a1
5], the matrix looks like this: [a[0]a[4]a[8]a[12]a[1]a[
5]a[9]a[13]a[2]a[6]a[10]a[14]a[3]a[7]a[11]a[1
5]]\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[
5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[1
5]\\ \end{bmatrix} the first time matrix is requested, it gets computed; after that, it's should be cached to avoid slowing down to compute it every time you need it.
... let transform = new xrrigidtransform( {x: 0, y: 0.
5, z: 0.
5}, {x: 0, y: -0.
5, z: -0.
5, w: 1}); drawglobject("magic-lamp", transform.matrix); specifications specification status comment webxr device apithe definition of 'xrrigidtransform.matrix' in that specification.
XRWebGLLayer.framebuffer - Web APIs
calling functions such as framebuffertexture2d(), framebufferrenderbuffer(), deleteframebuffer(), or getframebufferattachmentparameter() on an opaque framebuffer results in the webgl error invalid_operation (0x0
502).
...attempting to clear, draw to, or read from the framebuffer results in a webgl invalid_framebuffer_operation error (0x0
506).
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
for example, consider a device which uses a 2
560x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1440 pixels).
... now the width and height of the frame buffer are
50% what they were before, resulting in a total frame buffer size of 1280 by 720 pixels, with each eye's half of the buffer being 640x720 pixels.
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
for example, a value of 1.0 indicates that the frame buffer should be the same resolution as the actual display, while a value of 0.
5 indicates that the frame buffer should be half the resolution of the display.
... xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { framebufferscalefactor: 0.
5 }); }); specifications specification status comment webxr device apithe definition of 'xrwebgllayerinit.framebufferscalefactor' in that specification.
Using the aria-required attribute - Accessibility
html
5 now has the required attribute, but aria-required is still useful for user agents that do not yet support html
5.
...ired attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html
5 ...
:invalid - CSS: Cascading Style Sheets
ter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border:
5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border:
5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.
... html
5the definition of ':invalid' in that specification.
:out-of-range - CSS: Cascading Style Sheets
/* selects any <input>, but only when it has a range specified, and its value is outside that range */ input:out-of-range { background-color: rgba(2
55, 0, 0, 0.2
5); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.
...action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 2
55, 0, 0.2
5); } input:out-of-range { background-color: rgba(2
55, 0, 0, 0.2
5); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':out-of-range' in that specification.
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .2
5em; } /* style italic elements within the target element */ p:target i { color: red; } result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
... quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 2
5rem; position: relative; padding: 1.
5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius:
50%; ...
:valid - CSS: Cascading Style Sheets
nclude extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top:
5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:valid + span::before { content: '✓'; color: green; } we set the <span>s to position: relative so that we can position the generated content relative to them.
... html
5the definition of ':valid' in that specification.
unicode-range - CSS: Cascading Style Sheets
syntax /* <unicode-range> values */ unicode-range: u+26; /* single codepoint */ unicode-range: u+0-7f; unicode-range: u+002
5-00ff; /* codepoint range */ unicode-range: u+4??; /* wildcard range */ unicode-range: u+002
5-00ff, u+4??; /* multiple values */ values single codepoint a single unicode character code point, for example u+26.
...so for example, u+002
5-00ff means include all characters in the range u+002
5 to u+00ff.
@font-face - CSS: Cascading Style Sheets
since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch:
50% 200%; font-style a font-style value.
... since firefox 61 (and in other modern browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg
50deg; font-weight a font-weight value.
aspect-ratio - CSS: Cascading Style Sheets
</div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/
5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w...
...">width:16
5</label> <input id="w" name="w" type="range" min="100" max="2
50" step="
5" value="16
5"> <label id="hf" for="w">height:16
5</label> <input id="h" name="h" type="range" min="100" max="2
50" step="
5" value="16
5"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/
5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="16
5px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.styl...
color-index - CSS: Cascading Style Sheets
examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 1
5000) { p { color: #147
5ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 2
56 colors.
... <link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 2
56)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2') format('woff2'); unicode-range: u+0000-00ff, u+0131, u+01
52-01
53, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+221
5, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status ...
... comment media queries level
5the definition of 'reduced-data' in that specification.
@namespace - CSS: Cascading Style Sheets
the @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as html
5 with inline svg or mathml, or xml that mixes multiple vocabularies.
... in html
5, known foreign elements will automatically be assigned namespaces.
@supports - CSS: Cascading Style Sheets
the following example returns true if the browser's transform-origin property considers
5%
5% valid: @supports (transform-origin:
5%
5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.
...to change preferences in firefox, visit about:config.opera android full support 12.1safari ios full support 9samsung internet android full support 1.
5selector()chrome full support 83edge full support 83firefox full support 69 full support 69 full support 64disabled disabled from version 64: this feature is behind the layout...
height - CSS: Cascading Style Sheets
syntax /* one value */ height: auto; height: 320px; height: 1
5em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values.
...omputed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height:
500px; } specifications specification status comment css device adaptationthe definition of '"height" descriptor' in that specification.
max-zoom - CSS: Cascading Style Sheets
syntax /* keyword value */ max-zoom: auto; /* <number> values */ max-zoom: 0.8; max-zoom: 2.0; /* <percentage> value */ max-zoom: 1
50%; values auto the user agent will set the document's upper zoom factor limit.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.
5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration:
5s; animation-name: slidein; animation-iteration-count: infinite; } .stopped { animation-name: none; } @keyframes slidein { 0% { margin-left: 0%; }
50% { margin-left:
50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classnam...
...e = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/
5ty
5a4oy/ ...
Using multi-column layouts - CSS: Cascading Style Sheets
example
5 html <div id="columns_12"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #column_gap { column-count:
5; column-gap: 2em; } result graceful degradation the column properties will just be ignored by non-columns-supporting browsers.
Basic concepts of flexbox - CSS: Cascading Style Sheets
if we have three 100 pixel-wide items in a container which is
500 pixels wide, then the space we need to lay out our items is 300 pixels.
...if we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (
50px each out of the 200px total).
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,171,88); border-radius:
5px; background-color: rgba(233,171,88,.
5); padding: 1em; color: #d9480f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-...
...auto-rows: minmax(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 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() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid colu...
Stacking with floated blocks - CSS: Cascading Style Sheets
source code for the example html <div id="abs1"> <b>div #1</b><br />position: absolute;</div> <div id="flo1"> <b>div #2</b><br />float: left;</div> <div id="flo2"> <b>div #3</b><br />float: right;</div> <br /> <div id="sta1"> <b>div #4</b><br />no positioning</div> <div id="abs2"> <b>div #
5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 1
50px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; ...
...} #flo1 { margin: 0px 10px 0px 20px; float: left; width: 1
50px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #flo2 { margin: 0px 20px 0px 10px; float: right; width: 1
50px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #abs2 { position: absolute; width: 1
50px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990; background-color: #fdd; } ...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 2
50px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left:
5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 7
5px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left:
5px; } #container2 { ...
... z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position: relative; border: 2px outset #000099; background-color: #ddddff; padding-left:
5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">l...
Pseudo-classes - CSS: Cascading Style Sheets
no significant change for other pseudo-classes defined in selectors level 3 and html
5 (though semantic meaning not taken over).
... html
5 recommendation copies the relevant section from the canonical (whatwg) html spec.
Shorthand properties - CSS: Cascading Style Sheets
margin-top: 10px; margin-right:
5px; margin-bottom: 10px; margin-left:
5px; ...
... margin: 10px
5px 10px
5px; margin shorthand rules for one, two, three and four value declarations are: when one value is specified, it applies the same margin to all four sides.
align-content - CSS: Cascading Style Sheets
d | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-content: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill,
50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width:
50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height:
50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px...
...; } #item
5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height:
50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item
5">
5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-content: </label> <select id="values"> <option value="normal">normal</option> <option value="stretch">stretch</option> <option value="flex-start">fl...
align-items - CSS: Cascading Style Sheets
seline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-items: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill,
50px); } div > div { box-sizing: border-box; border: 2px solid #8c8c8c; width:
50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height:
50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px...
...; } #item
5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height:
50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item
5">
5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </div> <div class="row"> <label for="values">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">f...
<angle> - CSS: Cascading Style Sheets
examples: 0turn, 0.2
5turn, 1.2turn.
... examples setting a clockwise right angle 90deg = 100grad = 0.2
5turn ≈ 1.
5708rad setting a flat angle 180deg = 200grad = 0.
5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.2
5turn ≈ -1.
5708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status comment css values and units module level 4the definition of '<angle>' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
r(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(1
50%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples css .box { background-color: rgba(2
55, 2
55, 2
55, 0.3); border-radius:
5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width:
50%; max-height:
50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/68
58/4
574), linear-gradient(rgb(219, 166, 166), rgb(0...
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/120
57/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/120
57/starsolid.gif"), url("https://mdn.mozillademos.org/files/120
59/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specification.
background-image - CSS: Cascading Style Sheets
to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(2
55,2
55,0,0.
5), rgba(0,0,2
55,0.
5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images.
... </p> <p>and no more.</p> </div> css p { font-size: 1.
5em; color: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/64
57/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent...
<basic-shape> - CSS: Cascading Style Sheets
a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 7
5% apiece) define a shape enclosing no area.
... html <div></div> css div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange
50px); clip-path: polygon(
50% 0%, 60% 40%, 100%
50%, 60% 60%,
50% 100%, 40% 60%, 0%
50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(
50% 0%, 60% 40%, 100%
50%, 60% 60%,
50% 100%, 40% 60%, 0%
50%, 40% 40%); } to { clip-path: polygon(
50% 30%, 100% 0%, 70%
50%, 100% 100%,
50% 70%, 0% 100%, 30%
50%, ...
border-block-end-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-block-end-width:
5px; border-block-end-width: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.
... valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width:
5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-block-start-width:
5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element.
...alueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width:
5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-width - CSS: Cascading Style Sheets
/* <'border-width'> values */ border-block-width:
5px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width.
...uted valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width:
5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
f box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-bottom-left-radius: 0.
5em 1em; border-bottom-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(2
50,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.
border-bottom-right-radius - CSS: Cascading Style Sheets
20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ border-bottom-right-radius: 0.
5em 1em; border-bottom-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(2
50,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
ocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b
5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #
52e38
5; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .
...b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b
5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
border-color - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-color border-left-color border-right-color border-top-color syntax /* <color> values */ border-color: red; /* horizontal | vertical */ border-color: red #f01
5ca; /* top | vertical | bottom */ border-color: red rgb(240,30,
50,.7) green; /* top | right | bottom | left */ border-color: red yellow green blue; /* global values */ border-color: inherit; border-color: initial; border-color: unset; the border-color property may be specified using one, two, three, or four values.
.../li> <li><code>border-bottom-color: black;</code></li> <li><code>border-left-color: gold;</code></li> </ul> </div> css #justone { border-color: red; } #horzvert { border-color: gold red; } #topvertbott { border-color: red cyan gold; } #trbl { border-color: red cyan black gold; } /* set width and style for all divs */ div { border: solid 0.3em; width: auto; margin: 0.
5em; padding: 0.
5em; } ul { margin: 0; list-style: none; } result specifications specification status comment css logical properties and values level 1 editor's draft added the logical keyword.
border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 2
5%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width:
5% 1
5% 10%; /* top | right | bottom | left */ border-image-width:
5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-image-width property may be specified ...
...stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819
586a8dd293c17b38d0fd0e26430146a86dd04294a
53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-image - CSS: Cascading Style Sheets
is property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 3
5px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 /
50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below.
... /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(4
5deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
syntax /* <'border-width'> values */ border-inline-start-width:
5px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element.
...th of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width:
5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-width - CSS: Cascading Style Sheets
/* <'border-width'> values */ border-inline-width:
5px 10px; border-inline-width:
5px; border-inline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width.
...al-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width:
5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-spacing - CSS: Cascading Style Sheets
examples spacing and padding table cells this example applies a spacing of .
5em vertically and 1em horizontally between a table's cells.
... html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>
5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .
5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.
5em; height: 1.
5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification.
border-style - CSS: Cascading Style Sheets
html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b
5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #
52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-styl...
...e:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b
5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-style' in that specification.
border-top-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.
5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
...square: an arc of circle is used as the border div { border-top-left-radius: 40%; } the box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(2
50,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.
border-top-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.
5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(2
50,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.
border-top-style - CSS: Cascading Style Sheets
lies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b
5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #
52e38
5; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {bo...
...rder-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b
5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
border-width - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2px 1.
5em; /* top | horizontal | bottom */ border-width: 1px 2em 1.
5cm; /* top | right | bottom | left */ border-width: 1px 2em 0 4rem; /* global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four values.
...<p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.2
5em; padding: 0.2
5em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
border - CSS: Cascading Style Sheets
amazing, isn't it?</div> css div { border: 0.
5rem outset pink; outline: 0.
5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.
5rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border' in that specification.
...oidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support 3.
5safari full support 1webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full...
box-shadow - CSS: Cascading Style Sheets
syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px
5px
5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset
5em 1em gold; /* any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* global keywords */ box-shadow: inherit; box-shadow: initial; box-shadow: unset; specify a single ...
... html <blockquote><q>you may shoot me with your words,<br/> you may cut me with your eyes,<br/> you may kill me with your hatefulness,<br/> but still, like air, i'll rise.</q> <p>— maya angelou</p> </blockquote> css blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(2
55,2
55,2
55), 0.3em 0.3em 1em rgba(0,0,0,0.3); } result setting zero for offset and blur when the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides.
caret-color - CSS: Cascading Style Sheets
syntax /* keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* <color> values */ caret-color: red; caret-color: #
5729e9; caret-color: rgb(0, 200, 0); caret-color: hsla(228, 4%, 24%, 0.8); values auto the user agent selects an appropriate color for the caret.
...percentage><hue> = <number> | <angle> examples setting a custom caret color html <input value="this field uses a default caret." size="64"/> <input class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css input { caret-color: auto; display: block; margin-bottom: .
5em; } input.custom { caret-color: red; } p.custom { caret-color: green; } result specifications specification status comment css basic user interface module level 3the definition of 'caret-color' in that specification.
clip - CSS: Cascading Style Sheets
y positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width:
536px; height: 3
50px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 17
5px 113px 0); } #middle { left: 280px; clip: rect(119px 2
55px 229px 80px); } #bottom-right { left: 200px; clip: rect(23
5px 33
5px 34
5px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/1
5174f3
500.jpg" t...
...itle="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/1
5174f3
500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/1
5174f3
500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/1
5174f3
500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
content - CSS: Cascading Style Sheets
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e6646
5, #9198e
5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(val...
... html <h1>
5</h1> <p>according to sir tim berners-lee, <q cite="http://www.w3.org/people/berners-lee/faq.html#internet">i was lucky enough to invent the web at the time when the internet already existed - and had for a decade and a half.</q> we must understand that there is nothing fundamentally wrong with building on the contributions of others.
element() - CSS: Cascading Style Sheets
width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(4
5deg); color:white;">this text is part of the background.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement() experimentalchrome no support noedge no support nofirefox full support
57prefixed full support
57prefixed prefixed implemented with the vendor prefix: -moz- no support 29 —
57prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image, background, border-image and border-image-source.
<filter-function> - CSS: Cascading Style Sheets
tate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/173
50/3b4892b7e820122ac6dd7678891d4
507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width:
5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); cons...
...t', () => { 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.0
5; 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 ===...
fit-content() - CSS: Cascading Style Sheets
/* <length> values */ fit-content(200px) fit-content(
5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length.
... </div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap:
5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding:
5px; } result specifications specification status comment css box sizing module level 3the definition of 'fit-content()' in that specification.
flex-grow - CSS: Cascading Style Sheets
formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h
5>a,b,c and f are flex-grow:1 .
... d and e are flex-grow:2 .</h
5> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> <div class="box" style="background-color:brown;">f</div> </div> css #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); } result specifications specification status comment css flexible box layout modulethe definition of 'f...
flex-shrink - CSS: Cascading Style Sheets
formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is
500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
...ess than the others.</p> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> </div> css #content { display: flex; width:
500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } result specifications specification status comment css flexible box layout modulethe definition of 'flex-shrink' in that specification.
flex - CSS: Cascading Style Sheets
lass="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.
5em; width: 110px; min-width: 0; background-color: #1b
538
5; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by default flex items don't shrink below their minimum content size.
...| <'flex-basis'> ] examples setting flex: auto html <div id="flex-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width:
5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
font-variant-caps - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-capschrome full support
52edge full support 79firefox full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to tru...
...to change preferences in firefox, visit about:config.ie no support noopera full support 39safari no support nowebview android full support
52chrome android full support
52firefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true).
font - CSS: Cascading Style Sheets
<label for="line-height-1.2">1.2</label><br/> <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setcss()"> <label for="line-height-3">3</label> </div><br/> <div class="setpropcont fontfamily"> font-family<br/> <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setcss(
5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setcss()"> <label for="font-family-serif">serif</label><br /> <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setcss()"> <label for="font-family-sans-serif">sans-serif</label>...
...</div> <br/><br/><br/><br/><br/><br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left; text-align: center; margin-right:
5px; width: 80px; } .setpropcont { float: left; margin-right:
5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px...
<gradient> - CSS: Cascading Style Sheets
<div class="radial-gradient">radial gradient</div> div { width: 240px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 2
55)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <div class="linear-repeat">repeating linear gradient</div> <br> <div class="radial-repeat">repeating radial gradient</div> div { width: 240px; height: 80px; } .linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink
5px, white
5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
grid-auto-columns - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns:
50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.
5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content...
...(
5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 1
50px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.
5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.
5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length.
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item
5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-au...
...to-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item
5 { background-color: aqua; } function changegridautoflow() { var grid = document.getelementbyid("grid"); var direction = document.getelementbyid("direction"); var dense = document.getelementbyid("dense"); var gridautoflow = direction.value === "row" ?
grid-auto-rows - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows:
50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.
5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 1
50px 390px; gri...
...d-auto-rows: 10% 33.3%; grid-auto-rows: 0.
5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.
5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; values <length> is a non-negative length.
grid - CSS: Cascading Style Sheets
roperties: grid-auto-columns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill,
50px); /* <'grid-template-rows'> / [ auto-flow && dense?
.../ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width:
50px; height:
50px; } result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.
image() - CSS: Cascading Style Sheets
the spacial dimension definition in the media specification indicates that percentages will be supported as well: xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ xywh=percent:2
5,2
5,
50,
50 /* results in a
50%x
50% image at x=2
5% and y=2
5% */ the image fragments can be used in url() notation as well.
... putting color on top of a background image .quarterlogo {height: 200px; width: 200px; border: 1px solid;} .quarterlogo { background-image: image(rgba(0, 0, 0, 0.2
5)), url("https://mdn.mozillademos.org/files/120
53/firefox.png"); background-size: 2
5%; background-repeat: no-repeat; } <div class="quarterlogo">if supported, a quarter of this div has a darkened logo</div> the above will put a semi-transparent black mask over the firefox logo background image.
initial-letter - CSS: Cascading Style Sheets
/* keyword values */ initial-letter: normal; /* numeric values */ initial-letter: 1.
5; /* initial letter occupies 1.
5 lines */ initial-letter: 3.0; /* initial letter occupies 3 lines */ initial-letter: 3.0 2; /* initial letter occupies 3 lines and sinks 2 lines */ /* global values */ initial-letter: inherit; initial-letter: initial; initial-letter: unset; syntax the keyword value normal, or a <number> optionally followed by an <integer>.
...] examples setting initial letter size html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.
5 lines</p> <p class="three">initial letter occupies 3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.
5; initial-letter: 1.
5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; } result specifications specification status comment css inline layoutthe definition of 'ini...
inset-block - CSS: Cascading Style Sheets
/* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10%
5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property.
...m, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px
50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline - CSS: Cascading Style Sheets
/* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10%
5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property.
... left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px
50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
/* <length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset:
5px 1
5px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10%
5%
5%
5%; /* keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property.
...ntsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 1
50px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
left - CSS: Cascading Style Sheets
float: right; position: relative; top: 20px; left: 20px; </pre> <p>relative to its sibling div above, but removed from flow of content.</p> <div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_
5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </div> </div> </div> css #wrap { width: 700px; margin: 0 auto; background: #
5c
5c
5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } #example_1 { width: 2...
...00px; height: 200px; position: absolute; left: 20px; top: 20px; background-color: #d8f
5ff; } #example_2 { width: 200px; height: 200px; position: relative; top: 0; right: 0; background-color: #c1ffdb; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_
5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
margin-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom:
5%; /* relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>.
...length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.
5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px solid black; } div { width:320px; background-color:gold; } result specifications specification status ...
margin-left - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left:
5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left:
5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -
5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification.
margin-right - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /* relative to the text size */ margin-right:
5%; /* relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right:
5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -
5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification.
margin-top - CSS: Cascading Style Sheets
syntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /* relative to the text size */ margin-top:
5%; /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top:
5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -
5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification.
mask-border-slice - CSS: Cascading Style Sheets
syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 4
5; /* top | right | bottom | left */ mask-border-slice: 7 12 14
5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
... zones
5-8 are edge regions.
mask-position - CSS: Cascading Style Sheets
/* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 2
5% 7
5%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas.
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 2
50px; height: 2
50px; } #masked { width: 2
50px; height: 2
50px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <op...
mask-repeat - CSS: Cascading Style Sheets
they will then compress to 22
5px.
...eatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 2
50px; height: 2
50px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value=...
mask-size - CSS: Cascading Style Sheets
/* keywords syntax */ mask-size: cover; mask-size: contain; /* one-value syntax */ /* the width of the image (height set to 'auto') */ mask-size:
50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size:
50% auto; mask-size: 3em 2
5%; mask-size: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size:
50%, 2
5%, 2
5%; mask-size: 6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of th...
...rcentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size:
50%; mask-size:
50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="
50%" selected>
50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option>...
mask - CSS: Cascading Style Sheets
e used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as luminance mask */ mask: url(masks.svg#star) 40px 20px; /* element within svg graphic used as mask positioned 40px from the top and 20px from the left */ mask: url(masks.svg#star) 0 0/
50px
50px; /* element within svg graphic used as mask with a width and height of
50px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element within svg graphic used as mask extending to the box enclosed by the stroke */ mask: url(masks.svg#star) exclude; /* element within svg g...
...length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1)
50px 30px/10px 10px repeat-x exclude; } specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
min-height - CSS: Cascading Style Sheets
syntax /* <length> value */ min-height: 3.
5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value.
...s 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: 7
5%; } form { min-height: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-height' in that specification.
min-inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-inline-size: 100px; min-inline-size:
5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, ...
...s tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size:
5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
offset-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 2
5% 7
5%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its val...
... <div class="offset-anchor1"></div> </section> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000
50%, #000
51%, transparent
52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result ...
offset-rotate - CSS: Cascading Style Sheets
syntax /* follow the path direction, with optional additional angle */ offset-rotate: auto; offset-rotate: auto 4
5deg; /* follow the path direction but facing the opposite direction of `auto` */ offset-rotate: reverse; /* keep a constant rotation regardless the position on the path */ offset-rotate: 90deg; offset-rotate: .
5turn; auto the element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis.
...lueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100%
50%, 70% 100%, 0% 100%, 30%
50%); animation: move
5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,
50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-distance: 100%; } } result specifications specification s...
outline-offset - CSS: Cascading Style Sheets
initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 1
5px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-offsetchrome full support 1edge full support 1
5firefox full support 1.
5ie no support noopera full support 9.
5safari full support 1.2webview android full support 37chrome android full support ...
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width:
500px; background-color: white; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.
5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top:
50px; left:
50px; overscroll-behavior-block: contain; } div > div { height: 1
500px; width: 100%; background-color: yellow; background-image...
...: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.
5) 20px); } p { padding: 10px; background-color: rgba(2
55,0,0,0.
5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
<p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.
5) 20px); } main > div { height: 300px; width: 400px; overflow: auto; position: relative; top:
50px; left:
50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1
500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.
5) 20px); } p { padding: 10px; background-color...
...: rgba(2
55,0,0,0.
5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
padding-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-bottom: 0.
5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom:
5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-left - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-left: 0.
5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left:
5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-right: 0.
5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right:
5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-top: 0.
5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /* global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top:
5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
pointer-events - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpointer-eventschrome full support 1edge full support 12firefox full support 1.
5ie full support 11opera full support 9safari full support 4webview android full support 2chrome android full support 18firefox android full support ...
...rt 1.0applies to html elements experimentalchrome full support 2edge full support 12firefox full support 3.6ie full support 11opera full support 1
5safari full support 4webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full su...
<position> - CSS: Cascading Style Sheets
/* 1-value syntax */ keyword /* either the horizontal or vertical position; the other axis defaults to center */ value /* the position on the x-axis; the y-axis defaults to
50% */ /* 2-value syntax */ keyword keyword /* a keyword for each direction (the order is irrelevant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /* 4-value s...
... examples valid positions center left center top right 8.
5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 1
5px 20px 1
5px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification.
repeating-linear-gradient() - CSS: Cascading Style Sheets
syntax /* a repeating gradient tilted 4
5 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(4
5deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* a gradient going from the bottom to top, starting blue, turning green after 40%, and f...
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-4
5deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-4
5deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(to bottom, rgb(26,198,204), ...
rotate - CSS: Cascading Style Sheets
syntax /* keyword values */ rotate: none; /* angle value */ rotate: 90deg; rotate: 0.2
5turn; rotate: 1.
57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.2
5turn; rotate: z 1.
57rad; /* vector plus angle value */ rotate: 1 1 1 90deg; values angle value an <angle> specifying the angle to rotate the affected element through, around the z axis.
...ion initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 1
50px; margin: 0 auto; } p { padding: 10px
5px; border: 3px solid black; border-radius: 20px; width: 1
50px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.
5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' ...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.
5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows.
...>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height:
50px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specifications specification ...
scale - CSS: Cascading Style Sheets
syntax /* keyword values */ scale: none; /* single values */ /* values of more than 1 make the element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.
5; /* two values */ scale: 2 0.
5; /* three values */ scale: 2 0.
5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 1
50px; margin: 0 auto; } p { padding: 10px
5px; border: 3px solid black; border-radius: 20px; width: 1
50px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specifi...
scroll-behavior - CSS: Cascading Style Sheets
tion typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width:
50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding:
5px; border: 1px solid black; } scroll-container { display: block; width: 3
50px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%;...
... font-size:
5em; } result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 2
50px; height: 2
50px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the sc...
... the child elements are styled as follows: .scroller > div { flex: 0 0 2
50px; width: 2
50px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the outer container is styled like this: .scroller { text-align: left; width: 2
50px; height: 2
50px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the sc...
... the child elements are styled as follows: .scroller > div { flex: 0 0 2
50px; width: 2
50px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points.
scroll-snap-destination - CSS: Cascading Style Sheets
eft | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap destination html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer destination0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (2
5, 0)</p> <div class="scrollcontainer destination2
5"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (
50, 0)</p> <div class="scrollcontainer destination
50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 2...
...0px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination2
5 { scroll-snap-destination: 2
5px 0; } .destination
50 { scroll-snap-destination:
50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size:
50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scrollbar-width - CSS: Cascading Style Sheets
and introduced in wcag 2.1, criterion 2.
5.
5 (target size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).
... mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.
5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.
5.
5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
shape-image-threshold - CSS: Cascading Style Sheets
for example, a value of 0.
5 means that the shape will enclose all the pixels that are more than
50% opaque.
...</p> css #gradient-shape { width: 1
50px; height: 1
50px; float: left; background-image: linear-gradient(30deg, black, transparent 80%, transparent); shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } the shape is established here using background-image with a linear gradient rather than an image file.
text-decoration-thickness - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a
5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness:
5px; } .shorthand { text-decora...
...tion: underline solid red
5px; } results specifications specification status comment css text decoration module level 4the definition of 'text-decoration-width' in that specification.
text-indent - CSS: Cascading Style Sheets
syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 1
5%; /* keyword values */ text-indent:
5em each-line; text-indent:
5em hanging; text-indent:
5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
...ge> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent:
5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-ind...
text-shadow - CSS: Cascading Style Sheets
syntax /* offset-x | offset-y | blur-radius | color */ text-shadow: 1px 1px 2px black; /* color | offset-x | offset-y | blur-radius */ text-shadow: #fc0 1px 0 10px; /* offset-x | offset-y | color */ text-shadow:
5px
5px #
558abb; /* color | offset-x | offset-y */ text-shadow: white 2px
5px; /* offset-x | offset-y /* use defaults for color and blur-radius */ text-shadow:
5px 10px; /* global values */ text-shadow: inherit; text-shadow: initial; text-shadow: unset; this property is specified as a comma-separated list of shadows.
...simple shadow .red-text-shadow { text-shadow: red 0 -2px; } <p class="red-text-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> multiple shadows .white-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.
5em georgia, serif; } <p class="white-text-with-blue-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> specifications specification status comment css text decoration module level 3the definition of 'text-shadow' in that specification.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0
50
50"> <g> <circle id="center" fill="red" r="1" transform="translate(2
5 2
5)" /> <circle id="boxcenter" fill="blue" r=".
5" transform="translate(1
5 1
5)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely.
... svg{ width:80vh; border:1px solid #d9d9d9; position:absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #box{ transform-origin:
50%
50%; /*+++++++++++++++++++++++++++*/ /* if i remove this rule the pen won't work properly on chrome for mac, ff, safari will still work properly on chrome for pc & opera*/ transform-box: fill-box; /*alternatively i can use transform-origin:1
5px 1
5px;*/ /*+++++++++++++++++++++++++++*/ animation: rotatebox 3s linear infinite; } @keyframes rotatebox { to { transform: rotate(360de...
perspective() - CSS: Cascading Style Sheets
box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-1
5deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-1
5deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-1
5deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0,
50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0,
50px); } .front { bac...
...kground-color: limegreen; transform: translate3d(0, 0,
50px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification.
rotate() - CSS: Cascading Style Sheets
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(4
5deg); /* equal to rotatez(4
5deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
... html <div>normal</div> <div class="rotate">rotated</div> <div class="rotate-translate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(4
5deg); } .rotate-translate { background-color: pink; transform: rotate(4
5deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(4
5deg); } result specifications specification status comment css transforms level 1the definition of 'rotate()' in that specification.
transform-style - CSS: Cascading Style Sheets
html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">
5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin:
50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-conte...
...nt: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(
50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(
50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(
50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(
50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(
50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(
50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); check...
transform - CSS: Cascading Style Sheets
syntax /* keyword values */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0,
5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.
5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12px,
50%); transform: translate3d(12px,
50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: t...
...ranslatez(2px); transform: scale(2, 0.
5); transform: scale3d(2.
5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.
5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10px) rotate(10deg) translatey(
5px); transform: perspective(
500px) translate(10px, 0, 20px) rotatey(3deg); /* global values */ transform: inherit; transform: initial; transform: unset; the transform property may be specified as either the keyword value none or as one or more <transform-function> values.
translate - CSS: Cascading Style Sheets
syntax /* keyword values */ translate: none; /* single values */ translate: 100px; translate:
50%; /* two values */ translate: 100px 200px; translate:
50% 10
5px; /* three values */ translate:
50% 10
5px
5rem; values single <length-percentage> value a <length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes.
...]?where <length-percentage> = <length> | <percentage> examples html <div> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 1
50px; margin: 0 auto; } p { padding: 10px
5px; border: 3px solid black; border-radius: 20px; width: 1
50px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px
50px; } result specifications specification status comment css transforms level 2the definition of 'individual transf...
Used value - CSS: Cascading Style Sheets
example this example computes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-
50"> <p>explicit width:
50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-
50 { width:
50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } java...
...script function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-
50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing:
50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser.
... examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 1
5px; } #mozdiv2 { word-spacing:
5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable.
writing-mode - CSS: Cascading Style Sheets
�</span></td> </tr> <tr> <td>sideways-lr</td> <td class="example text4"><span>我家没有电脑。</span></td> <td class="example text4"><span>example text</span></td> <td class="example text4"><span>מלל ארוך לדוגמא</span></td> <td class="example text4"><span>1994年に至っては</span></td> </tr> <tr> <td>sideways-rl</td> <td class="example text
5"><span>我家没有电脑。</span></td> <td class="example text
5"><span>example text</span></td> <td class="example text
5"><span>מלל ארוך לדוגמא</span></td> <td class="example text
5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px...
... black solid; padding: 3px; } th { background-color: lightgray; } .example { height:7
5px; width:7
5px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.text3 span, .example.text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text
5 span, .example.text
5 { writing-mo...
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p
5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) s...
...go "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api html
5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope html
5 web audio showcase (source code) html
5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch t...
Ajax - Developer guides
asynchronous javascript and xml, while not a technology in itself, is a term coined in 200
5 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
... see also ajax: a new approach to web applications jesse james garrett, of adaptive path, wrote this article in february 200
5, introducing ajax and its related concepts.
Writing forward-compatible websites - Developer guides
this has happened multiple times to various sites already during the evolution of html
5.
...here's an example that works in browsers without html
5 support but breaks in a browser supporting html
5: <form action="http://www.example.com"> <input type="submit" value="submit the form" </form> due to the missing > on the input tag.
disabled - HTML: Hypertext Markup Language
living standard html
5the definition of 'disabled attribute' in that specification.
... recommendation html
5.1the definition of 'disabled attribute' in that specification.
HTML attribute: max - HTML: Hypertext Markup Language
syntax syntax for max values by input type input type syntax example date yyyy-mm-dd <input type="date" max="2019-12-2
5" step="1"> month yyyy-mm <input type="month" max="2019-12" step="12"> week yyyy-w## <input type="week" max="2019-w23" step=""> time hh:mm <input type="time" max="17:00" step="900"> datetime-local yyyy-mm-ddthh:mm <input type="datetime-local" min="2019-12-2
5t23:
59"> number <number> <input type="number" min="0" step="
5" max=...
..."100"> range <number> <input type="range" min="60" step="
5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more information.
SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated - JavaScript
with ecmascript 201
5 and later, the standardized syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o).
... examples "0"-prefixed octal literals "use strict"; 03; // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated octal escape sequences "use strict"; "\2
51"; // syntaxerror: "0"-prefixed octal literals and octal escape sequences // are deprecated valid octal numbers use a leading zero followed by the letter "o" or "o": 0o3; for octal escape sequences, you can use hexadecimal escape sequences instead: '\xa9'; ...
RangeError: invalid date - JavaScript
however, depending on the implementation, non–conforming iso format strings, may also throw rangeerror: invalid date, like the following cases in firefox: new date('foo-bar 2014'); new date('2014-2
5-23').toisostring(); new date('foo-bar 2014').tostring(); this, however, returns nan in firefox: date.parse('foo-bar 2014'); // nan for more details, see the date.parse() documentation.
... valid cases new date('0
5 october 2011 14:48 utc'); new date(1317826080); // unix time stamp for 0
5 october 2011 14:48:00 utc ...
TypeError: "x" is not a function - JavaScript
: var dog = function () { this.age = 11; this.color = "black"; this.dogname = "ralph"; //using this.dogname instead of .name return this; } dog.prototype.name = function(name) { this.dogname = name; return this; } var mynewdog = new dog(); mynewdog.name("cassidy"); //dog { age: 11, color: 'black', dogname: 'cassidy' } using brackets for multiplication in math, you can write 2 × (3 +
5) as 2*(3 +
5) or just 2(3 +
5).
... using the latter will throw an error: const sixteen = 2(3 +
5); alert('2 x (3 +
5) is ' + string(sixteen)); //uncaught typeerror: 2 is not a function you can correct the code by adding a * operator: const sixteen = 2 * (3 +
5); alert('2 x (3 +
5) is ' + string(sixteen)); //2 x (3 +
5) is 16 import the exported module correctly ensure you are importing the module correctly.
TypeError: "x" is read-only - JavaScript
'use strict'; var obj = object.freeze({name: 'elsa', score: 1
57}); obj.score = 0; // typeerror 'use strict'; object.defineproperty(this, 'lung_count', {value: 2, writable: false}); lung_count = 3; // typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray[0]++; // typeerror there are also a few read-only properties built into javascript.
... the global variable undefined is also read-only, so you can't silence the infamous "undefined is not a function" error by doing this: 'use strict'; undefined = function() {}; // typeerror: "undefined" is read-only valid cases 'use strict'; var obj = object.freeze({name: 'score', points: 1
57}); obj = {name: obj.name, points: 0}; // replacing it with a new object works 'use strict'; var lung_count = 2; // a `var` works, because it's not read-only lung_count = 3; // ok (anatomically unlikely, though) ...
TypeError: Reduce of empty array with no initial value - JavaScript
var ints = [0, -1, -2, -3, -4, -
5]; ints.filter(x => x > 0) // removes all elements .reduce((x, y) => x + y) // no more elements to use for the initial value.
... var ints = [0, -1, -2, -3, -4, -
5]; ints.filter(x => x > 0) // removes all elements .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition another way would be two to handle the empty case, either before calling reduce, or in the callback after adding an unexpected dummy initial value.
Method definitions - JavaScript
starting with ecmascript 201
5, a shorter syntax for method definitions on objects initializers is introduced.
... parameters… ) {}, async* generator( parameters… ) {}, // with computed keys get [property]() {}, set [property](value) {}, [property]( parameters… ) {}, *[generator]( parameters… ) {}, async [property]( parameters… ) {}, async* [generator]( parameters… ) {}, }; description the shorthand syntax is similar to the getter and setter syntax introduced in ecmascript 201
5.
The arguments object - JavaScript
however, it can be converted to a real array: var args = array.prototype.slice.call(arguments); // using an array literal is shorter than above but allocates an empty array var args = [].slice.call(arguments); as you can do with any array-like object, you can use es201
5's array.from() method or spread syntax to convert arguments to a real array: let args = array.from(arguments); // or let args = [...arguments]; the arguments object is useful for functions called with more arguments than they are formally declared to accept.
...instead, the arguments object in non-strict functions with complex parameters will always reflect the values passed to the function when the function was called (this is the same behavior as exhibited by all strict-mode functions, regardless of the type of variables they are passed): function func(a =
55) { arguments[0] = 99; // updating arguments[0] does not also update a console.log(a); } func(10); // 10 and also: function func(a =
55) { a = 99; // updating a does not also update arguments[0] console.log(arguments[0]); } func(10); // 10 and also: // an untracked default parameter function func(a =
55) { console.log(arguments[0]); } func(); // undefined specifications ...
getter - JavaScript
expression starting with ecmascript 201
5, you can also use expressions for a computed property name to bind to the given function.
... note the following when working with the get syntax: it can have an identifier which is either a number or a string; it must have exactly zero parameters (see incompatible es
5 change: literal getter and setter functions must now have exactly zero or one arguments for more information); it must not appear in an object literal with another get or with a data entry for the same property ({ get x() { }, get x() { } } and { x: ..., get x() { } } are forbidden).
Array.prototype.fill() - JavaScript
if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this); // steps 3-
5.
... examples using fill [1, 2, 3].fill(4) // [4, 4, 4] [1, 2, 3].fill(4, 1) // [1, 4, 4] [1, 2, 3].fill(4, 1, 2) // [1, 4, 3] [1, 2, 3].fill(4, 1, 1) // [1, 2, 3] [1, 2, 3].fill(4, 3, 3) // [1, 2, 3] [1, 2, 3].fill(4, -3, -2) // [4, 2, 3] [1, 2, 3].fill(4, nan, nan) // [1, 2, 3] [1, 2, 3].fill(4, 3,
5) // [1, 2, 3] array(3).fill(4) // [4, 4, 4] [].fill.call({ length: 3 }, 4) // {0: 4, 1: 4, 2: 4, length: 3} // a single object, referenced by each slot of the array: let arr = array(3).fill({}) // [{}, {}, {}] arr[0].hi = "hi" // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }] specifications specification ecmascript (ecma-262)the definition o...
Array.prototype.flatMap() - JavaScript
for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24
500 examples map() and flatmap() let arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] arr1.flatmap(x => [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatmap(x => [[x * 2]]); // [[2], [4], [6], [8]] while the above could have been achieved by using map itself, here is an example that better showcases the use of flatmap.
... // let's say we want to remove all the negative numbers // and split the odd numbers into an even number and a 1 let a = [
5, 4, -3, 20, 17, -33, -4, 18] // |\ \ x | | \ x x | // [4,1, 4, 20, 16, 1, 18] a.flatmap( (n) => (n < 0) ?
Array.prototype.toLocaleString() - JavaScript
if (len === 0) { return ''; } //
5.
... object: object.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() always display the currency for the strings and numbers in the prices array: var prices = ['¥7',
500, 8123, 12]; prices.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "¥7,¥
500,¥8,123,¥12" for more examples, see also the intl, numberformat, and datetimeformat pages.
Array.prototype.unshift() - JavaScript
see example: let arr = [4,
5, 6] arr.unshift(1, 2, 3) console.log(arr); // [1, 2, 3, 4,
5, 6] arr = [4,
5, 6] // resetting the array arr.unshift(1) arr.unshift(2) arr.unshift(3) console.log(arr) // [3, 2, 1, 4,
5, 6] examples using unshift let arr = [1, 2] arr.unshift(0) // result of the call is 3, which is the new array length // arr is [0, 1, 2] arr.unshift(-2, -1) // the new array length i...
...s
5 // arr is [-2, -1, 0, 1, 2] arr.unshift([-4, -3]) // the new array length is 6 // arr is [[-4, -3], -2, -1, 0, 1, 2] arr.unshift([-7, -6], [-
5]) // the new array length is 8 // arr is [ [-7, -6], [-
5], [-4, -3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.unshift' in that specification.
ArrayBuffer() constructor - JavaScript
exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 **
53) or negative.
... compatibility notes starting with ecmascript 201
5, arraybuffer constructors require to be constructed with a new operator.
Atomics.and() - JavaScript
the truth table for the and operation is: a b a & b 0 0 0 0 1 0 1 0 0 1 1 1 for example, a bitwise and of
5 & 1 results in 0001 which is 1 in decimal.
...
5 0101 1 0001 ---- 1 0001 examples using and() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] =
5; atomics.and(ta, 0, 1); // returns 0, the old value atomics.load(ta, 0); // 1 specifications specification ecmascript (ecma-262)the definition of 'atomics.and' in that specification.
Atomics.or() - JavaScript
the truth table for the or operation is: a b a | b 0 0 0 0 1 1 1 0 1 1 1 1 for example, a bitwise or of
5 & 1 results in 0101 which is
5 in decimal.
...
5 0101 1 0001 ----
5 0101 examples using or const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 2; atomics.or(ta, 0, 1); // returns 2, the old value atomics.load(ta, 0); // 3 specifications specification ecmascript (ecma-262)the definition of 'atomics.or' in that specification.
Intl.NumberFormat.prototype.format() - JavaScript
examples using format use the format getter function for formatting a single currency value, here for russia: var options = { style: 'currency', currency: 'rub' }; var numberformat = new intl.numberformat('ru-ru', options); console.log(numberformat.format(6
54321.987)); // → "6
54 321,99 руб." using format with map use the format getter function for formatting all numbers in an array.
... var a = [1234
56.789, 9876
54.321, 4
56789.123]; var numberformat = new intl.numberformat('es-es'); var formatted = a.map(n => numberformat.format(n)); console.log(formatted.join('; ')); // → "123.4
56,789; 987.6
54,321; 4
56.789,123" specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.numberformat.prototype.format' in that specification.
Intl - JavaScript
"ja-jp-u-ca-japanese": use the japanese calendar in date and time formatting, so that 2013 is expressed as the year 2
5 of the heisei period, or 平成2
5.
... examples formatting dates and numbers you can use intl to format dates and numbers in a form that's conventional for a specific language and region: const count = 262
54.39; const date = new date("2012-0
5-24"); function log(locale) { console.log( `${new intl.datetimeformat(locale).format(date)} ${new intl.numberformat(locale).format(count)}` ); } log("en-us"); // expected output:
5/24/2012 26,2
54.39 log("de-de"); // expected output: 24.
5.2012 26.2
54,39 specifications specification ecmascript internationalization api (ecma-402)...
Math.PI - JavaScript
the math.pi property represents the ratio of the circumference of a circle to its diameter, approximately 3.141
59: math.pi=π≈3.141
59\mathtt{\mi{math.pi}} = \pi \approx 3.141
59 the source for this interactive example is stored in a github repository.
... function calculatecircumference(radius) { return math.pi * (radius + radius); } calculatecircumference(1); // 6.28318
5307179
586 specifications specification ecmascript (ecma-262)the definition of 'math.pi' in that specification.
Math.asinh() - JavaScript
polyfill math.asinh can be emulated with the following function: if (!math.asinh) math.asinh = function(x) { var absx = math.abs(x), w if (absx < 3.72
5290298461914e-9) // |x| < 2^-28 return x if (absx > 26843
54
56) // |x| > 2^28 w = math.log(absx) + math.ln2 else if (absx > 2) // 2^28 >= |x| > 2 w = math.log(2 * absx + 1 / (math.sqrt(x * x + 1) + absx)) else var t = x * x, w = math.log1p(absx + t / (1 + math.sqrt(1 + t))) return x > 0 ?
... examples using math.asinh() math.asinh(1); // 0.881373
587019
543 math.asinh(0); // 0 specifications specification ecmascript (ecma-262)the definition of 'math.asinh' in that specification.
Math.fround() - JavaScript
var mantissa = math.round((leading - arg / powexp) * 0x800000); if (mantissa <= -0x800000) return sign * infinity; return sign * powexp * (leading - mantissa / 0x800000); }; examples using math.fround() the number 1.
5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit: math.fround(1.
5); // 1.
5 math.fround(1.
5) === 1.
5; // true however, the number 1.337 cannot be precisely represented in the binary numeral system, so it differs in 32-bit and 64-bit: math.fround(1.337); // 1.3370000123977661 math.fround(1.337) === 1.337; // false 21
502^1
50 is too big for a 32-b...
...it float, so infinity is returned: 2 ** 1
50; // 1.42724769270
596e+4
5 math.fround(2 ** 1
50); // infinity if the parameter cannot be converted to a number, or it is not-a-number (nan), math.fround() will return nan: math.fround('abc'); // nan math.fround(nan); // nan specifications specification ecmascript (ecma-262)the definition of 'math.fround' in that specification.
Math.hypot() - JavaScript
if your numbers are larger than about 101
54, taking the square of them will result in infinity.
...1 / 0 : max * math.sqrt(s)); }; examples using math.hypot() math.hypot(3, 4); //
5 math.hypot(3, 4,
5); // 7.07106781186
547
55 math.hypot(); // 0 math.hypot(nan); // nan math.hypot(nan, infinity); // infinity math.hypot(3, 4, 'foo'); // nan, since +'foo' => nan math.hypot(3, 4, '
5'); // 7.07106781186
547
55, +'
5' =>
5 math.hypot(-3); // 3, the same as math.abs(-3) specifications specification ecmascript (ecma-262)t...
Math.imul() - JavaScript
// floating points give us
53 bits of precision to work with plus 1 sign bit // automatically handled for our convienence: // 1.
...he statement above because: // 0x1fffff7fc00001 + 0xffc00000 = 0x1fffffff800001 // 0x1fffffff800001 < number.max_safe_integer /*0x1fffffffffffff*/ if (opa & 0xffc00000 /*!== 0*/) result += (opa & 0xffc00000) * opb |0; return result |0; }; examples using math.imul() math.imul(2, 4); // 8 math.imul(-1, 8); // -8 math.imul(-2, -2); // 4 math.imul(0xffffffff,
5); // -
5 math.imul(0xfffffffe,
5); // -10 specifications specification ecmascript (ecma-262)the definition of 'math.imul' in that specification.
Math.pow() - JavaScript
examples using math.pow() // simple math.pow(7, 2); // 49 math.pow(7, 3); // 343 math.pow(2, 10); // 1024 // fractional exponents math.pow(4, 0.
5); // 2 (square root of 4) math.pow(8, 1/3); // 2 (cube root of 8) math.pow(2, 0.
5); // 1.414213
56237309
51 (square root of 2) math.pow(2, 1/3); // 1.2
599210498948732 (cube root of 2) // signed exponents math.pow(7, -2); // 0.02040816326
530612 (1/49) math.pow(8, -1/3); // 0.
5 // signed bases math.pow(-7, 2); // 49 (squares are positive) math.pow(-7, 3); // -343 (cubes can be negative) mat...
...h.pow(-7, 0.
5); // nan (negative numbers don't have a real square root) // due to "even" and "odd" roots laying close to each other, // and limits in the floating number precision, // negative bases with fractional exponents always return nan math.pow(-7, 1/3); // nan specifications specification ecmascript (ecma-262)the definition of 'math.pow' in that specification.
Math.random() - JavaScript
examples note that as numbers in javascript are ieee 7
54 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for math.random() itself) aren't exact.
... if extremely large bounds are chosen (2
53 or higher), it's possible in extremely rare cases to calculate the usually-excluded upper bound.
Math.random() - JavaScript
examples note that as numbers in javascript are ieee 7
54 floating point numbers with round-to-nearest-even behavior, the ranges claimed for the functions below (excluding the one for math.random() itself) aren't exact.
... if extremely large bounds are chosen (2
53 or higher), it's possible in extremely rare cases to calculate the usually-excluded upper bound.
Math - JavaScript
math.pi ratio of the a circle's circumference to its diameter; approximately 3.141
59.
... in javascript, we can do this with the following:
50 * math.tan(degtorad(60)).
Number.EPSILON - JavaScript
property attributes of number.epsilon writable no enumerable no configurable no description the epsilon property has a value of approximately 2.2204460492
503130808472633361816e-16, or 2-
52.
... polyfill if (number.epsilon === undefined) { number.epsilon = math.pow(2, -
52); } examples testing equality x = 0.2; y = 0.3; z = 0.1; equal = (math.abs(x - y + z) < number.epsilon); specifications specification ecmascript (ecma-262)the definition of 'number.epsilon' in that specification.
Number.prototype.toFixed() - JavaScript
examples using tofixed let numobj = 1234
5.6789 numobj.tofixed() // returns '12346': note rounding, no fractional part numobj.tofixed(1) // returns '1234
5.7': note rounding numobj.tofixed(6) // returns '1234
5.678900': note added zeros (1.23e+20).tofixed(2) // returns '123000000000000000000.00' (1.23e-10).tofixed(2) // returns '0.00' 2.34.tofixed(1) // returns '2.3' 2.3
5.tofixed(1) // returns '2.4'.
... note it rounds up 2.
55.tofixed(1) // returns '2.
5'.
Number.prototype.toPrecision() - JavaScript
examples using toprecision let numobj =
5.1234
56 console.log(numobj.toprecision()) // logs '
5.1234
56' console.log(numobj.toprecision(
5)) // logs '
5.123
5' console.log(numobj.toprecision(2)) // logs '
5.1' console.log(numobj.toprecision(1)) // logs '
5' numobj = 0.000123 console.log(numobj.toprecision()) // logs '0.000123' console.log(numobj.toprecision(
5)) // logs '0.00012300' console.log(numobj.toprecision(2)) // logs '0...
....00012' console.log(numobj.toprecision(1)) // logs '0.0001' // note that exponential notation might be returned in some circumstances console.log((1234.
5).toprecision(2)) // logs '1.2e+3' specifications specification ecmascript (ecma-262)the definition of 'number.prototype.toprecision' in that specification.
Object.prototype.__defineSetter__() - JavaScript
examples non-standard and deprecated way var o = {}; o.__definesetter__('value', function(val) { this.anothervalue = val; }); o.value =
5; console.log(o.value); // undefined console.log(o.anothervalue); //
5 standard-compliant ways // using the set operator var o = { set value(val) { this.anothervalue = val; } }; o.value =
5; console.log(o.value); // undefined console.log(o.anothervalue); //
5 // using object.defineproperty var o = {}; object.defineproperty(o, 'value', { set: function(val) { this.anothervalue = val; } }...
...); o.value =
5; console.log(o.value); // undefined console.log(o.anothervalue); //
5 specifications specification ecmascript (ecma-262)the definition of 'object.prototype.__definesetter__()' in that specification.
Object.prototype.__proto__ - JavaScript
warning: while object.prototype.__proto__ is supported today in most browsers, its existence and exact behavior has only been standardized in the ecmascript 201
5 specification as a legacy feature to ensure compatibility for web browsers.
...only recently was the __proto__ property standardized by the ecmascript 201
5 specification for compatibility with web browsers, so it will be supported into the future.
Object.prototype.toLocaleString() - JavaScript
calestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more suitable for specific locales: for example: const testdate = new date(date.now()); // "date fri may 29 2020 18:04:24 gmt+0100 (british summer time)" let dedate = testdate.tolocalestring('de'); // "29.
5.2020, 18:04:24" var frdate = testdate.tolocalestring('fr'); //"29/0
5/2020 à 18:04:24" number tolocalestring() override on number objects, tolocalestring() is used to print out number displays more suitable for specific locales, e.g.
... with the correct separators: for example: const testnumber = 2901234
564; // "2901234
564" let denumber = testnumber.tolocalestring('de'); // "2.901.234.
564" let frnumber = testnumber.tolocalestring('fr'); // "2 901 234
564" specifications specification ecmascript (ecma-262)the definition of 'object.prototype.tolocalestring' in that specification.
Promise.race() - JavaScript
log(p); console.log(p2); }); // logs, in order: // promise { <state>: "pending" } // promise { <state>: "pending" } // the stack is now empty // promise { <state>: "fulfilled", <value>: 100 } // promise { <state>: "fulfilled", <value>: "non-promise value" } using promise.race – examples with settimeout var p1 = new promise(function(resolve, reject) { settimeout(() => resolve('one'),
500); }); var p2 = new promise(function(resolve, reject) { settimeout(() => resolve('two'), 100); }); promise.race([p1, p2]) .then(function(value) { console.log(value); // "two" // both fulfill, but p2 is faster }); var p3 = new promise(function(resolve, reject) { settimeout(() => resolve('three'), 100); }); var p4 = new promise(function(resolve, reject) { settimeout(() => reject(...
...new error('four')),
500); }); promise.race([p3, p4]) .then(function(value) { console.log(value); // "three" // p3 is faster, so it fulfills }, function(reason) { // not called }); var p
5 = new promise(function(resolve, reject) { settimeout(() => resolve('five'),
500); }); var p6 = new promise(function(resolve, reject) { settimeout(() => reject(new error('six')), 100); }); promise.race([p
5, p6]) .then(function(value) { // not called }, function(error) { console.log(error.message); // "six" // p6 is faster, so it rejects }); specifications specification ecmascript (ecma-262)the definition of 'promise.race' in that specification.
RegExp.prototype[@@replace]() - JavaScript
var result = str; for (var i = 0; i < this.count; i++) { result = regexp.prototype[symbol.replace].call(this, result, replacement); } return result; } } var re = new myregexp('\\d', '', 3); var str = '01234
567'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
... console.log(newstr); // ###34
567 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@replace]' in that specification.
RegExp() constructor - JavaScript
as of es
5, this can also be another regexp object or literal (for the two regexp constructor notations only).
... alternatively, if an object is supplied for the pattern, the flags string will replace any of that object's flags (and lastindex will be reset to 0) (as of es201
5).
RegExp.prototype.source - JavaScript
empty regular expressions and escaping starting with ecmascript
5, the source property no longer returns an empty string for empty regular expressions.
... new regexp().source; // "(?:)" new regexp('\n').source === '\n'; // true, prior to es
5 new regexp('\n').source === '\\n'; // true, starting with es
5 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype.source' in that specification.
String.prototype.codePointAt() - JavaScript
polyfill the following extends strings to include the codepointat() function as specified in ecmascript 201
5 for browsers without native support.
... } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) // 66 '\ud800\udc00'.codepointat(0) // 6
5536 'xyz'.codepointat(42) // undefined looping with codepointat() for (let codepoint of '\ud83d\udc0e\ud83d\udc71\u2764') { console.log(codepoint.codepointat(0).tostring(16)) } // '1f40e', '1f471', '2764' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.codepointat' in that specification.
String.prototype.indexOf() - JavaScript
for example, 'hello world'.indexof('o', -
5) will return 4, as it starts at position 0, and o is found at position 4.
... 'blue whale'.indexof('blue') // returns 0 'blue whale'.indexof('blute') // returns -1 'blue whale'.indexof('whale', 0) // returns
5 'blue whale'.indexof('whale',
5) // returns
5 'blue whale'.indexof('whale', 7) // returns -1 'blue whale'.indexof('') // returns 0 'blue whale'.indexof('', 9) // returns 9 'blue whale'.indexof('', 10) // returns 10 'blue whale'.indexof('', 11) // returns 10 the indexof() method is case sensitive.
String length - JavaScript
7) established a maximum length of 2^
53 - 1 elements.
...in versions prior to firefox 6
5, the maximum length was 2**28 - 1 (~2
56mb).
String.raw() - JavaScript
examples using string.raw() string.raw`hi\n${2+3}!`; // 'hi\n
5!', the character after 'hi' // is not a newline character, // '\' and 'n' are two characters.
... // normally you would not call string.raw() as a function, // but to simulate `foo${2 + 3}bar${'java' + 'script'}baz` you can do: string.raw({ raw: ['foo', 'bar', 'baz'] }, 2 + 3, 'java' + 'script'); // 'foo
5barjavascriptbaz' // notice the first argument is an object with a 'raw' property, // whose value is an iterable representing the separated strings // in the template literal.
String.prototype.repeat() - JavaScript
polyfill this method has been added to the ecmascript 201
5 specification and may not be available in all javascript implementations yet.
... 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 generic method) specifications specification ecmascript (ecma-262)the definition of 'string.prototype.repeat' in that specification.
String.prototype.replace() - JavaScript
(the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthesized submatches it specifies.) the following example will set newstring to 'abc - 1234
5 - #$*%': function replacer(match, p1, p2, p3, offset, string) { // p1 is nondigits, p2 digits, and p3 non-alphanumerics return [p1, p2, p3].join(' - '); } let newstring = 'abc1234
5#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); console.log(newstring); // abc - 1234
5 - #$*% examples defining the regular expression in replace() in the following example, the regular expression is defined...
... function f2c(x) { function convert(str, p1, offset, s) { return ((p1 - 32) *
5/9) + 'c'; } let s = string(x); let test = /(-?\d+(?:\.\d*)?)f\b/g; return s.replace(test, convert); } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.replace' in that specification.
String.prototype.startsWith() - JavaScript
polyfill this method has been added to the ecmascript 201
5 specification and may not be available in all javascript implementations yet.
...rawpos|0 : 0; return this.substring(pos, pos + search.length) === search; } }); } a more robust (fully es201
5 specification compliant), but less performant and compact, polyfill is available on github by mathias bynens.
Symbol.unscopables - JavaScript
property attributes of symbol.unscopables writable no enumerable no configurable no examples scoping in with statements the following code works fine in es
5 and below.
... however, in ecmascript 201
5 and later, the array.prototype.keys() method was introduced.
TypedArray.prototype.entries() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40,
50]); var earray = arr.entries(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40,
50]); var earr = arr.entries(); console.log(earr.next().value); // [0, 10] console.log(earr.next().value); // [1, 20] console.log(earr.next().value); // [2, 30] console.log(...
...earr.next().value); // [3, 40] console.log(earr.next().value); // [4,
50] specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.entries()' in that specification.
TypedArray.prototype.every() - JavaScript
function isbigenough(element, index, array) { return element >= 10; } new uint8array([12,
5, 8, 130, 44]).every(isbigenough); // false new uint8array([12,
54, 18, 130, 44]).every(isbigenough); // true testing typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([12,
5, 8, 130, 44]).every(elem => elem >= 10); // false new uint8array([12,
54, 18, 130, 44]).every(elem => elem >= 10); // true specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.every' in that specification.
TypedArray.prototype.filter() - JavaScript
function isbigenough(element, index, array) { return element >= 10; } new uint8array([12,
5, 8, 130, 44]).filter(isbigenough); // uint8array [ 12, 130, 44 ] filtering typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([12,
5, 8, 130, 44]).filter(elem => elem >= 10); // uint8array [ 12, 130, 44 ] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.filter' in that specification.
TypedArray.prototype.some() - JavaScript
function isbiggerthan10(element, index, array) { return element > 10; } new uint8array([2,
5, 8, 1, 4]).some(isbiggerthan10); // false new uint8array([12,
5, 8, 1, 4]).some(isbiggerthan10); // true testing typed array elements using arrow functions arrow functions provide a shorter syntax for the same test.
... new uint8array([2,
5, 8, 1, 4]).some(elem => elem > 10); // false new uint8array([12,
5, 8, 1, 4]).some(elem => elem > 10); // true specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.some' in that specification.
TypedArray.prototype.sort() - JavaScript
let numbers = new uint8array([40, 1,
5, 200]); numbers.sort(); // uint8array [ 1,
5, 40, 200 ] // unlike plain arrays, a compare function is not required // to sort the numbers numerically.
... // regular arrays require a compare function to sort numerically: numbers = [40, 1,
5, 200]; numbers.sort(); // [1, 200, 40,
5] numbers.sort((a, b) => a - b); // compare numbers // [ 1,
5, 40, 200 ] specifications specification ecmascript (ecma-262)the definition of 'typedarray.prototype.sort' in that specification.
TypedArray.prototype.toString() - JavaScript
var numbers = new uint8array([2,
5, 8, 1, 4]) numbers.tostring(); // "2,
5,8,1,4" javascript calls the tostring method automatically when a typed array is to be represented as a text value or when an array is referred to in a string concatenation.
... compatibility if a browser doesn't support the typedarray.prototype.tostring() method yet, javascript will call the tostring method of object: var numbers = new uint8array([2,
5, 8, 1, 4]) numbers.tostring(); // "[object uint8array]" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
TypedArray.prototype.values() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40,
50]); var earray = arr.values(); // your browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40,
50]); var earr = arr.values(); console.log(earr.next().value); // 10 console.log(earr.next().value); // 20 console.log(earr.next().value); // 30 console.log(earr.next().value...
...); // 40 console.log(earr.next().value); //
50 specifications specification ecmascript (ecma-262)the definition of '%typedarray%.prototype.values()' in that specification.
Uint8ClampedArray() constructor - JavaScript
the uint8clampedarray() constructor creates a typed array of 8-bit unsigned integers clamped to 0-2
55; if you specified a value that is out of the range of [0,2
55], 0 or 2
55 will be set instead; if you specify a non-integer, the nearest integer will be set.
... examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 1337; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 2
55 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8clampedarray(buffer, 1...
Uint8ClampedArray - JavaScript
the uint8clampedarray typed array represents an array of 8-bit unsigned integers clamped to 0-2
55; if you specified a value that is out of the range of [0,2
55], 0 or 2
55 will be set instead; if you specify a non-integer, the nearest integer will be set.
... examples different ways to create a uint8clampedarray // from a length var uintc8 = new uint8clampedarray(2); uintc8[0] = 42; uintc8[1] = 1337; console.log(uintc8[0]); // 42 console.log(uintc8[1]); // 2
55 (clamped) console.log(uintc8.length); // 2 console.log(uintc8.bytes_per_element); // 1 // from an array var arr = new uint8clampedarray([21,31]); console.log(arr[1]); // 31 // from another typedarray var x = new uint8clampedarray([21, 31]); var y = new uint8clampedarray(x); console.log(y[0]); // 21 // from an arraybuffer var buffer = new arraybuffer(8); var z = new uint8clampedarray(buffer, 1...
WebAssembly.CompileError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstance() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Instance.prototype.exports - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.LinkError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory.prototype.buffer - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsbufferchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Memory.prototype.grow() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.customSections() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscustomsectionschrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.exports() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Module.imports() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.RuntimeError() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table() constructor - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jstable() constructorchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.get() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgetchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.grow() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.length - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslengthchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.Table.prototype.set() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jssetchrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.compile() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.compileStreaming() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilestreamingchrome full support 61edge full support 16firefox full support
58ie no support noopera full support 47safari no support nowebview android full support 61chrome android full support 61firefox android full support ...
...
58opera android full support 4
5safari ios no support nosamsung internet android full support 8.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.instantiate() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
WebAssembly.instantiateStreaming() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatestreamingchrome full support 61edge full support 16firefox full support
58ie no support noopera full support 47safari no support nowebview android full support 61chrome android full support 61firefox android full support ...
...
58opera android full support 4
5safari ios no support nosamsung internet android full support 8.0nodejs no support nolegend full support full support no support no support ...
WebAssembly.validate() - JavaScript
desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsvalidatechrome full support
57edge full support 16firefox full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).ie no support noopera full support 44sa...
...fari full support 11webview android full support
57chrome android full support
57firefox android full support
52notes full support
52notes notes disabled in the firefox
52 extended support release (esr).opera android full support 43safari ios full support 11samsung internet android full support 7.0nodejs full support 8.0.0legend full support ...
Bitwise NOT (~) - JavaScript
for example, ~-
5 yields 4.
... note that due to using 32-bit representation for numbers both ~-1 and ~429496729
5 (232-1) results in 0.
Bitwise OR (|) - JavaScript
9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 1
5 (base 10) bitwise oring any number x with 0 yields x.
... examples using bitwise or // 9 (00000000000000000000000000001001) // 14 (00000000000000000000000000001110) 14 | 9; // 1
5 (00000000000000000000000000001111) specifications specification ecmascript (ecma-262)the definition of 'bitwise or expression' in that specification.
Greater than (>) - JavaScript
examples string to string comparison console.log("a" > "b"); // false console.log("a" > "a"); // false console.log("a" > "3"); // true string to number comparison console.log("
5" > 3); // true console.log("3" > 3); // false console.log("3" >
5); // false console.log("hello" >
5); // false console.log(
5 > "hello"); // false console.log("
5" > 3n); // true console.log("3" >
5n); // false number to number comparison console.log(
5 > 3); // true console.log(3 > 3); // false console.log(3 >
5); ...
... // false number to bigint comparison console.log(
5n > 3); // true console.log(3 >
5n); // false comparing boolean, null, undefined, nan console.log(true > false); // true console.log(false > true); // false console.log(true > 0); // true console.log(true > 1); // false console.log(null > 0); // false console.log(1 > null); // true console.log(undefined > 3); // false console.log(3 > undefined); // false console.log(3 > nan); // false console.log(nan > 3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Greater than or equal (>=) - JavaScript
examples string to string comparison console.log("a" >= "b"); // false console.log("a" >= "a"); // true console.log("a" >= "3"); // true string to number comparison console.log("
5" >= 3); // true console.log("3" >= 3); // true console.log("3" >=
5); // false console.log("hello" >=
5); // false console.log(
5 >= "hello"); // false number to number comparison console.log(
5 >= 3); // true console.log(3 >= 3); // true console.log(3 >=
5); // false number to bigint comparison console.log(
5n >= 3); // true console.log(3 >=...
... 3n); // true console.log(3 >=
5n); // false comparing boolean, null, undefined, nan console.log(true >= false); // true console.log(true >= true); // true console.log(false >= true); // false console.log(true >= 0); // true console.log(true >= 1); // true console.log(null >= 0); // true console.log(1 >= null); // true console.log(undefined >= 3); // false console.log(3 >= undefined); // false console.log(3 >= nan); // false console.log(nan >= 3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Less than (<) - JavaScript
examples string to string comparison console.log("a" < "b"); // true console.log("a" < "a"); // false console.log("a" < "3"); // false string to number comparison console.log("
5" < 3); // false console.log("3" < 3); // false console.log("3" <
5); // true console.log("hello" <
5); // false console.log(
5 < "hello"); // false console.log("
5" < 3n); // false console.log("3" <
5n); // true number to number comparison console.log(
5 < 3); // false console.log(3 < 3); // false console.log(3 <
5); ...
... // true number to bigint comparison console.log(
5n < 3); // false console.log(3 <
5n); // true comparing boolean, null, undefined, nan console.log(true < false); // false console.log(false < true); // true console.log(0 < true); // true console.log(true < 1); // false console.log(null < 0); // false console.log(null < 1); // true console.log(undefined < 3); // false console.log(3 < undefined); // false console.log(3 < nan); // false console.log(nan < 3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Less than or equal (<=) - JavaScript
examples string to string comparison console.log("a" <= "b"); // true console.log("a" <= "a"); // true console.log("a" <= "3"); // false string to number comparison console.log("
5" <= 3); // false console.log("3" <= 3); // true console.log("3" <=
5); // true console.log("hello" <=
5); // false console.log(
5 <= "hello"); // false number to number comparison console.log(
5 <= 3); // false console.log(3 <= 3); // true console.log(3 <=
5); // true number to bigint comparison console.log(
5n <= 3); // false console.log(3 <...
...= 3n); // true console.log(3 <=
5n); // true comparing boolean, null, undefined, nan console.log(true <= false); // false console.log(true <= true); // true console.log(false <= true); // true console.log(true <= 0); // false console.log(true <= 1); // true console.log(null <= 0); // true console.log(1 <= null); // false console.log(undefined <= 3); // false console.log(3 <= undefined); // false console.log(3 <= nan); // false console.log(nan <= 3); // false specifications specification ecmascript (ecma-262)the definition of 'relational operators' in that specification.
Spread syntax (...) - JavaScript
without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3, 4,
5]; // append all items from arr2 onto arr1 arr1 = arr1.concat(arr2); with spread syntax this becomes: let arr1 = [0, 1, 2]; let arr2 = [3, 4,
5]; arr1 = [...arr1, ...arr2]; // arr1 is now [0, 1, 2, 3, 4,
5] // note: not to use const otherwise, it will give typeerror (invalid assignment) array.prototype.unshift() is often used to insert an array of values at the start of an existing array.
... without spread syntax, this is done as: const arr1 = [0, 1, 2]; const arr2 = [3, 4,
5]; // prepend all items from arr2 onto arr1 array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4,
5, 0, 1, 2] with spread syntax, this becomes: let arr1 = [0, 1, 2]; let arr2 = [3, 4,
5]; arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4,
5, 0, 1, 2] note: unlike unshift(), this creates a new arr1, and does not modify the original arr1 array in-place.
typeof - JavaScript
type result undefined "undefined" null "object" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol (new in ecmascript 201
5) "symbol" function object (implements [[call]] in ecma-262 terms) "function" any other object "object" note: ecmascript 2019 and older permitted implementations to have typeof return any implementation-defined string value for non-callable non-standard exotic objects.
... typeof /s/ === 'function'; // chrome 1-12 non-conform to ecmascript
5.1 typeof /s/ === 'object'; // firefox
5+ conform to ecmascript
5.1 errors before ecmascript 201
5, typeof was always guaranteed to return a string for any operand it was supplied with.
block - JavaScript
in strict mode, starting with es201
5, functions inside blocks are scoped to that block.
... prior to es201
5, block-level functions were forbidden in strict mode.
do...while - JavaScript
examples using do...while in the following example, the do...while loop iterates at least once and reiterates until i is no longer less than
5.
... var result = ''; var i = 0; do { i += 1; result += i + ' '; } while (i > 0 && i <
5); // despite i == 0 this will still loop as it starts off without the test console.log(result); specifications specification ecmascript (ecma-262)the definition of 'do-while statement' in that specification.
for await...of - JavaScript
function* generatorwithrejectedpromises() { try { yield 0; yield 1; yield promise.resolve(2); yield promise.reject(3); yield 4; throw
5; } finally { console.log('called finally') } } (async function() { try { for await (let num of generatorwithrejectedpromises()) { console.log(num); } } catch (e) { console.log('catched', e) } })(); // 0 // 1 // 2 // catched 3 // compare with for-of loop: try { for (let numorpromise of generatorwithrejectedpromises()) { console.log(numorpromise); } } catc...
...h (e) { console.log('catched', e) } // 0 // 1 // promise { 2 } // promise { <rejected> 3 } // 4 // catched
5 // called finally to make finally blocks of a sync generator to be always called use appropriate form of the loop, for await...of for the async generator and for...of for the sync one and await yielded promises explicitly inside the loop.
import.meta - JavaScript
for example, with the following html: <script type="module"> import './index.mjs?someurlinfo=
5'; </script> ..the following javascript file will log the `someurlinfo parameter: // index.mjs new url(import.meta.url).searchparams.get('someurlinfo'); //
5 the same applies when a file imports another: // index.mjs import './index2.mjs?someurlinfo=
5'; // index2.mjs new url(import.meta.url).searchparams.get('someurlinfo'); //
5 note that while node.js will pass on query parameters (or the h...
...ash) as in the latter example, as of node 14.1.0, a url with query parameters will err when loading in the form node --experimental-modules index.mjs?someurlinfo=
5 (it is treated as a file rather than a url in this context).
let - JavaScript
he typeof operator to check for the type of a variable in that variable's temporal dead zone will throw a referenceerror: // prints out 'undefined' console.log(typeof undeclaredvariable); // results in a 'referenceerror' console.log(typeof i); let i = 10; another example of temporal dead zone combined with lexical scoping due to lexical scoping, the identifier foo inside the expression (foo +
55) evaluates to the if block's foo, and not the overlying variable foo with the value of 33.
... function test(){ var foo = 33; if(foo) { let foo = (foo +
55); // referenceerror } } test(); this phenomenon may confuse you in a situation like the following.
return - JavaScript
function counter() { for (var count = 1; ; count++) { // infinite loop console.log(count + 'a'); // until
5 if (count ===
5) { return; } console.log(count + 'b'); // until 4 } console.log(count + 'c'); // never appears } counter(); // output: // 1a // 1b // 2a // 2b // 3a // 3b // 4a // 4b //
5a returning a function see also the article about closures.
... function magic() { return function calc(x) { return x * 42; }; } var answer = magic(); answer(1337); //
561
54 specifications specification ecmascript (ecma-262)the definition of 'return statement' in that specification.
Digital video concepts - Web media technologies
in bt.709 (used for hdtv), for example, the luma value is the weighted sum of the gamma-corrected red, green, and blue components of the pixel, using the formula y' = 0.2126r' + 0.71
52g' + 0.0722b'.
...each of y', cb, and cr are able to have values from 0 to 2
55.
Lazy loading - Web Performance
between 2011 and 2019, the median resource weight increased from ~100kb to ~400kb for desktop and ~
50kb to ~3
50kb for mobile.
... while image size has increased from ~2
50kb to ~900kb on desktop and ~100kb to ~8
50kb on mobile.
Performance budgets - Web Performance
on september,
50% of the budget was spent in a week).
... a default baseline to reduce bounce rate is to achieve time to interactive under
5 seconds in 3g/4g, and under 2 seconds for subsequent loads.
Understanding latency - Web Performance
the approximate values of some presets include: selection download speed upload speed minimum latency (ms) gprs
50 kbps 20 kbps
500 regular 2g 2
50 kbps
50 kbps 300 good 2g 4
50 kbps 1
50 kbps 1
50 regular 3g 7
50 kbps 2
50 kbps 100 good 3g 1.
5 mbps 7
50 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps
5 wi-fi 30 mbps 1
5 mbps 2 network timings also, on the network tab,...
...we can look at how long a 267.
5kb svg image asset took to download.
Progressive web app structure - Progressive web apps (PWAs)
-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-
512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-fram...
.../pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-2
56.png', '/pwa-examples/js13kpwa/icons/icon-
512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); the next block installs the service worker, which then actually caches all the files contained in the above list: self.addeventlistener('install', function(e) { console.
How to make PWAs installable - Progressive web apps (PWAs)
{ "src": "icons/icon-
512.png", "sizes": "
512x
512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app.
...browser support is currently limited to firefox for android
58+, mobile chrome and android webview 31+, and opera for android 32+, but this should improve in the near future.
Structural overview of progressive web apps - Progressive web apps (PWAs)
-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-
512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-fram...
.../pwa-examples/js13kpwa/img/js13kgames.png', '/pwa-examples/js13kpwa/img/bg.png', '/pwa-examples/js13kpwa/icons/icon-32.png', '/pwa-examples/js13kpwa/icons/icon-64.png', '/pwa-examples/js13kpwa/icons/icon-96.png', '/pwa-examples/js13kpwa/icons/icon-128.png', '/pwa-examples/js13kpwa/icons/icon-168.png', '/pwa-examples/js13kpwa/icons/icon-192.png', '/pwa-examples/js13kpwa/icons/icon-2
56.png', '/pwa-examples/js13kpwa/icons/icon-
512.png' ]; var gamesimages = []; for(var i=0; i<games.length; i++) { gamesimages.push('data/img/'+games[i].slug+'.jpg'); } var contenttocache = appshellfiles.concat(gamesimages); with the file list prepared, it's time to install the service worker itself.
alignment-baseline - SVG: Scalable Vector Graphics
example <svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,10 l60,110 m30,10 l300,10 m30,6
5 l300,6
5 m30,110 l300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="10">a hanging</text> <text alignment-baseline="middle" x="60" y="6
5">a middle</text> <text alignment-baseline="baseline" x="60" y="110">a baseline</text> <!-- materialisation of anchors --> <cir...
...cle cx="60" cy="10" r="3" fill="red" /> <circle cx="60" cy="6
5" r="3" fill="red" /> <circle cx="60" cy="110" r="3" fill="red" /> <style><![cdata[ text{ font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> for object alignment in other elements (such as <text>), see dominant-baseline.
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.0
5" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default val...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.0
5" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'ba...
clip-rule - SVG: Scalable Vector Graphics
example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m
50,0 21,90 98,3
5 2,3
5 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="url(#emptystar)" width="
50" height="90" fill="blue" /> <!-- right: nonzero --> <clippath id="filledstar"> <use xlink:href="#star" clip-rule="nonzero" /> </clippath> <rect clip-path="url(#filledstar...
...)" width="
50" height="90" x="
50" fill="red" /> </svg> elements the following elements can use the clip-rule attribute, but only if they are inside a <clippath> element.
color-rendering - SVG: Scalable Vector Graphics
<ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="4
5" y="
50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-...
...rendering="optimizespeed" fill="url(#gradient)" style="transform: translatex(240px);" /> <text x="290" y="
50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.
5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer> </filter> <filter id="componenttra...
...nsfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="
5"/> <fefuncg type="gamma" exponent="
5"/> <fefuncb type="gamma" exponent="
5"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifications specification sta...
fill - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="
50" cy="
50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="1
50" cy="
50" r="40" fill="url(#mygradient)" /> <!-- keeping the final state of an animated circle which is a circle with a radius ...
... --> <circle cx="2
50" cy="
50" r="20"> <animate attributetype="xml" attributename="r" from="0" to="40" dur="
5s" fill="freeze" /> </circle> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0
500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
... </text> <text y="60" font-family="times, serif" font-size="10px" font-size-adjust="0.
58"> this is the 10px times, but now adjusted to the same aspect ratio as the verdana.
fr - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="2
5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100"...
... fill="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.
5" cy="0.
5" r="0.
5" fx="0.3
5" fy="0.3
5" fr="
5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="1
5" ry="1
5" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="
50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="3
5" cy="3
5" r="2" fill="white" stroke="white"/> <circle cx="60" cy="6...
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/64
57/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="
50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/64
57/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="
50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
kerning - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 1
50 12
5" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based on ker...
...if a unit identifier (e.g., 0.2
5em or 1%) is provided, then the length is converted into a corresponding value in the current user coordinate system.
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="1
50" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
... </text> <text x="0" y="
50" textlength="300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs.
letter-spacing - SVG: Scalable Vector Graphics
if the attribute value has a unit identifier, such as .2
5em or 1%, then the browser converts the <length> into its corresponding value in the current user coordinate system.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.
5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="
50" cy="
50" r="3
5" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".
5" cy=".
5" r=".3
5" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="4
5" height="4
5" /> <rect id="r2" x="0" y="
55" width="4
5" height="4
5" /> <rect id=...
..."r3" x="
55" y="
55" width="4
5" height="4
5" /> <rect id="r4" x="
55" y="0" width="4
5" height="4
5" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element.
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="
50" cy="
50" r="3
5" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="
50" cy="
50" r="3
5" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="4
5" height="4
5" /> <rect id="r2" x="0" y=...
..."
55" width="4
5" height="4
5" /> <rect id="r3" x="
55" y="
55" width="4
5" height="4
5" /> <rect id="r4" x="
55" y="0" width="4
5" height="4
5" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskunits defines the coordinate system in use for the geometry attributes (x, y, width and height) of the element.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <intege...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.0
5" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification.
pointer-events - SVG: Scalable Vector Graphics
to change the color of the rect underneath you have to click outside the circle --> <rect x="0" y="0" height="10" width="10" fill="black" /> <circle cx="
5" cy="
5" r="4" fill="white" pointer-events="visiblepoint" /> <!-- the circle below will never catch a mouse event.
... the rect underneath will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="1
5" cy="
5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellips...
seed - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default va...
...lue 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.0
5" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,4
5 q90,10
50,10 q10,10 10,40 q10,70 4
5,70 q70,70 7
5,
50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,4
5 q210,10 170,10 q130,10 130,40 q130,70 16
5,70 q190,70 19
5,
50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
...1
50%) are allowed.
stroke-dasharray - SVG: Scalable Vector Graphics
<tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="
5" x2="30" y2="
5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of various sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3"...
...thus,
5,3,2 is equivalent to
5,3,2,
5,3,2.
stroke-dashoffset - SVG: Scalable Vector Graphics
pan> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="
5" x2="30" y2="
5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array computation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the ...
...same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,
5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(2
55,0,0,.
5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.
visibility - SVG: Scalable Vector Graphics
following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="
5" fill="transparent" /> <g stroke="seagreen" stroke-width="
5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | collapse default value visible animatable yes visible this value indicates th...
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.
59 8.
59l12 13.17 7.41 8.
59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.
59 4.
58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align:
50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselecto...
word-spacing - SVG: Scalable Vector Graphics
.2
5em or 1%), then the browser converts the <length> into a corresponding value in the current user coordinate system.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 2
50
50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.
5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the css letter-spacing property.
x1 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="
5" y1="1" y2="9" stroke="red" /> <line x1="
5" x2="
5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="
5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="
5" y1="1" y2="9" stroke="red" /> <line x1="
5" x2="
5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="
5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
x2 - SVG: Scalable Vector Graphics
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="
5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="
5" x2="
5" y1="1" y2="9" stroke="green" /> <line x1="
5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="
5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="
5" x2="
5" y1="1" y2="9" stroke="green" /> <line x1="
5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
y - SVG: Scalable Vector Graphics
imatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="
5%" y1="0" x2="
5%" y2="100%" /> <line x1="
55%" y1="0" x2="
55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="
5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="
55%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .
5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecat...
...imatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="
5%" y1="0" x2="
5%" y2="100%" /> <line x1="
55%" y1="0" x2="
55%" y2="100%" /> <text> <!-- y with a single value --> <tspan y="40%" x="
5%">svg</tspan> <!-- y with multiple values --> <tspan y="40%,60%,80%" x="
55%">svg</tspan> </text </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .
5px; stroke-dasharray: 2px; } use for <use>...
<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 4
5 degree angle), but it can be rotated by using the transform attribute.
... html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="
50" rx="100" ry="
50" /> </svg> attributes cx the x position of the ellipse.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
to illustrate, suppose you have a input image which is
5 pixels by
5 pixels, whose color values for one of the color channels are as follows: 0 20 40 23
5 23
5 100 120 140 23
5 23
5 200 220 240 23
5 23
5 22
5 22
5 2
55 2
55 2
55 22
5 22
5 2
55 2
55 2
55 and you define a 3-by-3 convolution kernel as follows: 1 2 3 4
5 6 7 8 9 let's focus on the color value at the second row and second column of the image (source pixel value is 120).
... assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 +
5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+
5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes in order kernelmatrix divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
<feDisplacementMap> - SVG: Scalable Vector Graphics
the formula for the transformation looks like this: p'(x,y) ← p( x + scale * (xc(x,y) - 0.
5), y + scale * (yc(x,y) - 0.
5)) where p(x,y) is the input image, in, and p'(x,y) is the destination.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.0
5" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<f...
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="
5" /> </filter> <circle cx="60" cy="60" r="
50" fill="green" /> <circle cx="170" cy="60" r="
50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddevia...
...tion="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="
50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<marker> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="
5" refy="
5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10
5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="
5" refy="
5" markerwidth="
5" markerheight="
5"> <circle cx="
5" cy="
5" r="
5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead...
... in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="1
5,80 29,
50 43,60
57,30 71,40 8
5,1
5" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport.
<solidcolor> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="1
50"> <defs> <!-- solidcolor is experimental.
...--> <lineargradient id="mygradient"> <stop offset="0" stop-color="green" /> </lineargradient> </defs> <text x="10" y="20">circles colored with solidcolor</text> <circle cx="1
50" cy="6
5" r="3
5" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="
50" cy="6
5" r="3
5" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="1
50" cy="16
5" r="3
5" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="
50" cy="16
5" r="3
5" fill="url(#mygradient)"/> </svg> result ...
<use> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="mycircle" cx="
5" cy="
5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle.
... --> </svg> the effect is the same as if the nodes were deeply cloned into a non-exposed dom, then pasted where the use element is, much like cloned template elements in html
5.
<view> - SVG: Scalable Vector Graphics
viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="
50" cx="180" cy="
50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="
5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="
5" y="40" font-size="20">normal size</text> </a>...
... <a xlink:href="#doublesizeview"> <text x="
5" y="60" font-size="20">double size</text> </a> </svg> result dom interface this element implements the svgviewelement interface.
Namespaces crash course - SVG: Scalable Vector Graphics
versions of svg viewers prior to the release of firefox 1.
5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
...knowing this will save you some confusion if you come across markup like in the following example: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <body> <h1>svg embedded inline in xhtml</h1> <svg:svg width="300px" height="200px"> <svg:circle cx="1
50" cy="100" r="
50" fill="#ff0000"/> </svg:svg> </body> </html> note that because a namespace prefix is used for the <svg:svg> element and its child <svg:circle>, it wasn't necessary to redeclare the default namespace.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:
5%; top:
5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; posi...
...tion:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </lineargradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> <circle cx="
50" cy="
50" r="30" style="fill:url(#gradient)" /> </svg> </body> </html> discussion the page is mainly regular html, css and javascript.
SVG fonts - SVG: Scalable Vector Graphics
internet explorer hasn't considered implementing this, the functionality has been removed from chrome 38 (and opera 2
5) and firefox has postponed its implementation indefinitely to concentrate on woff.
... <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="3
50" ideographic="400" hanging="
500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="300"><!-- outline of exclam.
Certificate Transparency - Web security
certificate transparency initially came about in 2013 against a backdrop of ca compromises (diginotar breach in 2011), questionable decisions (trustwave subordinate root incident in 2012) and technical issuance issues (weak,
512 bit certificate issuance by digicert sdn bhd of malaysia).
...this can be accomplished via a number of different mechanisms: x.
509v3 certificate extension which embeds signed certificate timestamps directly into the leaf certificate a tls extension of type signed_certificate_timestamp sent during the handshake ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist with one or more scts with the x.
509 certificate extension, the included scts are decided by the issuing ca...
How to turn off form autocompletion - Web security
note that the wcag 2.1 success criterion 1.3.
5: identify input purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified.
...for example, firefox version 67 (see bug 1119063) stopped autofilling in this case; however, firefox 70 (see bug 1
56
5407) can suggest securely-generated passwords, but does not autofill a saved password.
Securing your site - Web security
the same issues can arise if you use an old or insecure algorithm for hashing (such as md
5).
... you should use a password-specific hashing algorithm (such as argon2, pbkdf2, scrypt or bcrypt) instead of message digest algorithms (such as md
5 and sha).
Weak signature algorithms - Web security
certificates employing more secure hash algorithms (such as sha-2
56 or sha-
512) should be used instead.
... md
5 support for md
5 based signatures was removed in early 2012.
rx - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="
50" cy="
50" rx="0" ry="2
5" /> <ellipse cx="1
50" cy="
50" rx="2
5" ry="2
5" /> <ellipse cx="2
50" cy="
50" rx="
50" ry="2
5" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="1
5"/> <rect x="120" y="120" width="60" height="60" rx="1
5" ry="1
5"/> <rect x="220" y="120" width="60" height="60" rx="1
50" ry="1
5"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
ry - SVG: Scalable Vector Graphics
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="
50" cy="
50" ry="0" rx="2
5" /> <ellipse cx="1
50" cy="
50" ry="2
5" rx="2
5" /> <ellipse cx="2
50" cy="
50" ry="
50" rx="2
5" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="1
5"/> <rect x="120" y="120" width="60" height="60" ry="1
5" rx="1
5"/> <rect x="220" y="120" width="60" height="60" ry="1
50" rx="1
5"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
scale - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.0
5" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.0
5" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="
50"/> </filter> <circle cx="100"...
side - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 2
5px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes ...
specularExponent - SVG: Scalable Vector Graphics
0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="
5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value f...
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="
5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="
50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="
50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="
50" style="filter: url(#gaussianblur3); transform:...
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.02
5" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: tra...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="
5" cy="
5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="1
5" cy="
5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="2
5" cy="
5" r="4" stroke="green" stroke-opacity="
50%" /> <!-- stroke opacity as a css property --> <circle cx="3
5" cy="
5" r="4" stroke="green" style="stroke-opacity: .
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="
5" cy="
5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="1
5" cy="
5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="2
5" cy="
5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: ...
stroke - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="
5" cy="
5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="1
5" cy="
5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value ...
surfaceScale - SVG: Scalable Vector Graphics
viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1
5"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
systemLanguage - SVG: Scalable Vector Graphics
3
5 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
tabindex - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="1
5" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.
5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues="0 1"/> <fefuncb type="table" tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter i...
target - SVG: Scalable Vector Graphics
the name must be a valid xml name [xml11], and should not start with an underscore (u+00
5f low line character), to meet the requirements of a valid browsing context name from html.